06 htm l Picture integration and browser compatibility

Picture integration and browser compatibility
What is picture integration?
In website development, we often encounter situations where pictures are needed, and the loading of each picture in a web page is equivalent to initiating a http request.
Too many http requests will directly cause the web page to load slowly, thereby affecting users Experience.
So later there was picture integration, and the so-called picture integration is still called Sprite. It is to merge all the small pictures in the website into one big picture, so that the entire website only needs to send an http request once when requesting these small pictures.
The benefits of picture integration
Because all the small pictures in the website have been merged together. So when we requested this website, we only initiated one request for these small pictures. The loading speed of the website will be greatly improved.
Combining multiple pictures into one picture can also reduce the size of the picture.
Tip: It is best to keep a single integrated picture within 100k.
Use the picture to integrate
background-position.
When we use background-position to set the Sprite map, do not use keywords that indicate location, but use specific values ​​to indicate location.
Browser compatibility issues
What is browser compatibility issues?
Attributes cannot take effect in the browser or the code does not reach the expected effect.
Why do compatibility issues occur? Discrepancies
between rule makers and executors
Mainstream browsers
safari, ie, chrome, firefox, opera
browser kernel
Trident
represents the browser
ie
Maxthon
360 browser
Gecko
represents the browser
Mozilla Firefox
webkit
Safari, Chrome
Presto
represents the browser
Opera.
It is also recognized as the fastest rendering engine in the world.
Blink
The browser layout engine developed by Google and Opera Software, April 2013 Released monthly.
Graceful degradation and progressive enhancement
Use scenarios for graceful degradation and progressive enhancement
When we develop a website, if we need to consider compatibility issues,
when developing a project, we should choose between cost and compatibility.
Graceful degradation is based
on the Chrome browser during development. Test the browser to ensure that the development can be completed on demand, and then subtract and test other versions of the browser, and ensure that the business can be realized on the lower version of the browser.
Progressive enhancement
In the early stage of development, use low-version browsers to test and develop browsers. First, ensure that the project can successfully implement business in low-version browsers, and then gradually upgrade to high-version browsers to make the project experience and functions more perfect.
Common css bugs and css hacks.
What are css bugs?
CSS styles are inconsistent in different browsers, or the problem that CSS styles cannot be displayed correctly in browsers is called CSS bugs.
What is css hacks?
In CSS, Hack refers to a technique that is compatible with the correct display of CSS in different browsers, because they are all personal unofficial changes to the CSS code, or unofficial patches. Some people prefer to use patches to describe this behavior.
Said before the filter, in fact, belongs to a hack of
side effects
reduces code readability
to increase the burden on the code
common css bug and hack
IE6 Bug and resolve common CSS hack
pictures gap
directly insert a picture element, below picture will generate about 3 pixels gap (the bug appears in IE6 and lower versions)
hack1: will be converted to block elements, add declaration: display: block;
hack2: hack2: set img vertical-align: top/middle/bottom; As long as the baseline is not
double-floating (double margin),
browsers of Ie6 and lower versions will erroneously double the floating border when parsing floating elements.
hack: Add a declaration to the floating element: display: inline;
default height (IE6)
In IE6 and below, some block elements have a default height (below 16px height)
hack1: Add a declaration to the element: font-size:0;
hack2 : Add a statement to the element: overflow: hidden;
percentage bug
In IE6 and below, when parsing the percentage, it will be calculated by rounding, resulting in a situation where 50% plus 50% is greater than 100%.
Hack: Add a declaration to the floating element on the right: clear:right; meaning: clear the right floating.
The list ladder bug (in IE6 and lower browsers)
uses Float: left in the child element; there is no floating attribute set in the parent element, and the li ladder effect is used.
Hack: Setting a float to the parent element can solve this problem.
When the A in LI is converted to a block element and a fixed height is set, and the parent element is written to float, it will appear in IE6 and lower browsers Display vertically.
Hack: It can be solved by setting a to float left.
Mouse pointer cursor
crosshair (cross)
pointer (hand)
move
e-resize (left and right direction)
ne-resize (move right and up)
nw-resize (move up and left)
n-resize (move up)
se -resize (down and right)
sw-resize (down and left)
s-resize (downward movement)
w-resize (leftward movement)
text (text)
wait (waiting state)
help (help)