Advanced CSS (5) - Browser Compatibility

This series of notes is based on [Duyi Education] Mr. Yuan Jin's html+css basic course and is only used for personal records and reading.

browser compatibility

Cause of the problem

• market competition
• Changes to the standard version

vendor prefix

For example: box-sizing, Google's old browser uses -webkit-box-sizing: border-box

• Market competition, standards not published
• The standard is still under discussion (draft), and browser vendors hope to support it first

IE： -ms-
Chrome，safari: -webkit-
opera： -o-
firefox: -moz-

When the browser processes styles or elements, it uses the following method:
when it encounters unrecognized code, it directly skips it.

1. Google Chrome's scroll bar style

In fact, using custom scroll bars in development is often implemented using div+css+JS

2. Select one of multiple background images as the background

css hack

Set different styles and elements according to different browsers (mainly for IE)

1. style

Special symbols for CSS in IE

• *Attribute, compatible with IE5, IE6, IE7
• _ attribute, compatible with IE5~IE6
• Attribute value \9, compatible with IE5~IE11
• Attribute value \0, compatible with IE8~IE11
• Attribute value \9\0, compatible with IE9~IE10

The margin bug of IE5, 6, 7, the left margin of the floating element is doubled

2. conditional judgment

Asymptotic enhancement and graceful degradation

Two ideas for solving compatibility problems will affect the writing style of the code

• Progressive enhancement: adapt to most browsers first, and then add new styles for new versions of browsers

When writing code, first try to avoid writing code with compatibility issues, and then gradually add the code in the new standard after completion.

• Graceful degradation: first make complete functions, and then perform special processing for low-version browsers

When writing code, don’t pay special attention to compatibility. After completing the entire function, handle the style for lower-version browsers.

greyish

Find css compatibility

caniuse.com

References

1. [Duyi Education] Teacher Yuan Jin's html+css basic course
2. [Duyi Education] Teacher Yuan Jin's related course source code