Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code
❗ ️ ❗ ️ ❗ ️
The following link is the latest erratum to this articleCSS Extension: ① Browser Compatibility
1. What do incremental enhancement and graceful degradation mean respectively? 2. What is a CSS Hack? On which site do YOU view the browser compatibility of tags (attributes)? 3. What is the Hack of IE6 and ie7? 4. List as many examples of browser-compatible processing as possible. 5. What is CSS Reset? What is a CSS precompiler? What is a post-compiler (PostCSS)? 6. What is the difference between CSS Reset and normalize.css? 7. Write as many browser compatibility issues as you can? 8. How do I make Chrome display text less than 12px? 9. Comparison of CSS preprocessors: Less, Sass? 10. Common Compatibility Problems?Copy the code🙋 on the question “refer to the answer in detail”, please click here to view access!
Preface: What are browser compatibility issues? The same code, some browsers work, some not.
In fact, the most important is the compatibility of IE browser, can be roughly divided into:
- Grade A compatibility (Chrome, Firefox, IE9+) : Ensure perfect implementation of the design in the latest browser;
- Class B compatibility (IE8) : usable and indistinguishable;
- Grade C compatibility (IE7 and below) : can be used.
1 Ideas for dealing with compatibility problems
First of all, on the basis of improving the design draft to the greatest extent, compatibility should be considered, and convenient and simple new methods (such as HTML5 and CSS3) should not be abandoned blindly for compatibility. Of course, can not use a new technical method to make compatibility too low, poor practicality.
Progressive enhancement and graceful degradation
1.1 Progressive Enhancement
Build the page for the lower version browser to ensure the most basic functions, and then for the advanced browser effect, interaction and other improvements and additional functions to achieve a better user experience.
1.2 Graceful Degradation
Build full functionality from the start and then make it compatible with older browsers.
1.3 the difference between
- Graceful downgrading starts with a complex status quo and tries to reduce the supply of user experience; Progressive enhancement, on the other hand, starts with a very basic, working version and expands to meet the needs of future environments.
- Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone.
1.3.1 Do it or not
- Product perspective (product audience, browser ratio of audience, effect first or basic feature first)
- Cost perspective (is it necessary to do something)
1.3.2 To what extent
- Let which browsers support which effects.
1.3.3 how to do
(At present, 90% of the front-end work does not need to deal with IE8 compatibility issues, the focus of work is mainly focused on JS. Browser compatibility doesn’t require too much effort, just understand the solution.
- Choose technical frameworks and libraries based on compatibility requirements — just be careful when using them:
Bootstrap (>=IE8)
jQuery 1.~ (>=IE6), jQuery 2.~ (>=IE9)
Vue (>=IE9)
...
Copy the code- Select compatible tools (html5shiv.js, respond. js, CSS Reset, Normalize.css, Modernizr) based on compatibility requirements.
- PostCSS;
- Some old techniques, such as conditional comments (dealing with IE), CSS hacks, JS ability detection do some fixes.
1.4 Conditional Comments
Conditional comments are statements conditionally interpreted by IE in HTML source code. Conditional comments can be used to provide and hide code from IE.
| project | sample | instructions |
|---|---|---|
| ! | [if !IE] | The IE |
| lt | [if lt IE 5.5] | Less than IE5.5 |
| lte | [if lte IE 6] | The value must be less than or equal to Internet Explorer 6 |
| gt | [if gt IE 5] | Is greater than the IE5 |
| gte | [if gte IE 7] | The value must be greater than or equal to Internet Explorer 7 |
| \ | [if (IE 6)(IE 7)] | 6 or 7 |
Ex. :
<! --[if IE 6]> <p>You are using Internet Explorer 6.</p> <! [endif]-->
<! --[if !IE]><! -->
<script>alert(1);</script>
<! - <! [endif]-->
<! --[if IE 8]> <link href="ie8only.css" rel="stylesheet"> <! [endif]-->
Copy the code❗️ Conditional comment pages work properly in Windows Internet Explorer 9, but not in Internet Explorer 10, which no longer supports conditional comment.
1.5 Hack,
(By some strange means to achieve compatibility!)
Browsers from different vendors, such as Internet Explorer, Safari, Mozilla Firefox, and Chrome, or browsers from the same vendor, such as Internet Explorer 6 and Internet Explorer 7, have different understanding of CSS resolution. Therefore, the generated page effect is not the same, we can not get the page effect we need.
At this point, we need to write different CSS for different browsers, so that it can be used in different browsers to get the page we want.
(💡 browserhacks.com)
.box {
color: red;
_color: blue; /* It works with IE6 */
*color: pink; /* It works under IE67 */
color: yellow\9; /* IE/Edge 6-8 it works */} <! -- -[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-- - >Copy the code
2 Compatibility of common attributes
| The property name | compatibility |
|---|---|
| inline-block | >=IE8 |
| min-width/min-height | >=IE8 |
| ::before/::after | >=IE8 |
| div:hover | >=IE7 |
| inline-block | >=IE8 |
| background-size | >=IE9 |
| Rounded corners | >=IE9 |
| shadow | >=IE9 |
| Animation/Gradient | >=IE10 |
(💡 caniuse.com Check CSS property compatibility)
3 Common compatibility processing examples
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* Only for IE67 */
}
Copy the code.target {
display: inline-block;
*display: inline;
*zoom: 1;
}
Copy the code<! -- [if lt IE 9] > < script SRC = "https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" > < / script > < script SRC = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script > <! [endif]-->
Copy the code<! DOCTYPEhtml>
<! --[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <! [endif]-->
<! --[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <! [endif]-->
<! --[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <! [endif]-->
<! --[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <! [endif]-->
<! --[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><! --><html dir="ltr" lang="en-US" class="no-js"><! - <! [endif]-->
Copy the code
4 Some tools to deal with compatibility summary
4.1 Conditional Notes
Conditional comments are conditional statements interpreted by IE in HTML source code. Conditional comments can be used to provide and hide code from IE.
Conditional comments first appeared in Microsoft’s Internet Explorer 5 browser and are supported until Internet Explorer 9. Microsoft has announced the end of support for IE10.
4.2 IE Hack
For IE browser to prepare different CSS so that IE can normally render the process.
4.3 JS ability detection
Use JS syntax to detect browser-supported properties in order to show the effect.
4.4 html5shiv. Js
It is used to solve the problem that browsers of IE9 or later do not recognize new HTML5 tags, and CSS does not work. So we use in the process, want to let the lower version of the browser, namely IE9 browsers support, then this html5shiv.js is a very good choice!
4.5 Respond. Js
Responding.js is a small script designed to provide min-width and max-width features for media query in Internet Explorer 6-8 and other browsers that do not support CSS3 media query for responsive web design.
4.6 CSS Reset
Remove the browser’s default styles altogether, or more specifically, “override” the browser’s CSS default properties by redefining the label style.
4.7 the Normalize. CSS
Normalize.css is just a small CSS file, but it provides a high degree of consistency across browsers in the default HTML element styles. Normalize.css is a modern, high-quality alternative to traditional CSS Reset, ready for HTML5. Normalize. CSS is a customizable CSS file that allows different browsers to render web elements in a more uniform manner.
🚀 It can:
- Keep useful defaults, unlike many CSS resets, which are simply erased altogether.
- Standardized styles for a wide range of elements;
- Correct errors and common browser inconsistencies;
- Minor improvements to ease of use;
- Use detailed comments to explain the code.
4.8 none of
Modernizr is a JavaScript library for detecting HTML5 and CSS3 features in a user’s browser.
Modernizr makes it easy to write JavaScript and CSS for all kinds of situations, whether the browser supports these features or not. This is a perfect solution for handling progressive enhancement.
Modernizr detects features as soon as the page loads and creates a JavaScript object that contains the results, along with a class name for the HTML element that makes it easier to tweak your CSS.
(🏆❗️ we will use a special article to explain the following knowledge points in the “front-end integration”, so we are familiar with the relevant concepts first, don’t go into depth!)
4.9 PostCompiling PostCSS
It provides a way to manipulate CSS with JavaScript code. It is responsible for parsing CSS code into an Abstract Syntax Tree (AST) and handing it over to plug-ins for processing.
A plug-in’s CSS-BASED AST can do a variety of things, such as support for variables and mixins, adding browser-specific declaration prefixes, or transpile rules that use future CSS specifications into formats supported by current CSS specifications.
💡 simply put: it can be thought of as a platform on which plug-ins can run, and it provides a parser that parses CSS into abstract syntax trees.
With the PostCSS platform, we can develop plug-ins to handle CSS. Popular plugins such as Autoprefixer can help us deal with compatibility issues. Autoprefixer can help us automatically generate compatibility code by writing CSS normally.
💡 “CSS precompilers” — Precompilers enhance CSS syntax and allow variables, loops, and nesting in CSS. These are Less, Sass, and Stylus, which are essentially compilers.
Postscript: for browser compatibility we mainly understand this approach, familiar with some examples, and then in the actual process of writing pages to choose to reuse.
I wish you good, QdyWXS ♥ you!