Introduction to CSS hack (browser compatibility) and csshack

Introduction to CSS hack (browser compatibility) and csshack

Today, I want to write a little bit about browser compatibility. Although there are already many solutions on Baidu, I still want to write them!

First look at a chart

This figure describes the market share of Web browsers used by Internet users in January to August 2016 (Source: http://tongji.baidu.com/data/browser ). I am glad that chrome ranks first. chrome has always supported W3C standards, but the figure also shows that there are a large number of people using the IE series, therefore, we need to consider their feelings during daily frontend development.

The following is the text:

When I was working as a front-end Company, I required to be compatible with IE8 and above, and Google and Firefox. Because it uses the table layout (with some history ~), Therefore, during daily development and maintenance, there are usually no major compatibility issues to deal. Google and Firefox are now well supported by W3C standards, especially the latest version. The latest firefox version is 49.0.1.6109 and chrome 53.0.2785.116. I have written several small HTML5 + CSS3 pages (3D cube animation, simplified strokes + animation), and all of them are well supported. Some CSS3 attributes cannot be directly prefixed with-webkit-,-moz-,-o-, and-ms.

 

In a word: almost all major browsers support W3C standards in the latest version. However, we recommend that you add a prefix when using the CSS3 attribute in daily development to be compatible with earlier browsers.

Chestnuts:

Transform-style: preserve-3d;/* W3C standard */

-Webkit-transform-style: preserve-3d;/* chrome safari */

-Moz-transform-style: preserve-3d;/* firefox */

-0-transform-style: preserve-3d;/* opera */

 

Simply put, the point is not very complicated.

In the IE series, IE9 and above have good support for HTML5. However, IE678 still has a big problem, mainly because it does not support HTML5 new tags.

(What new tag does HTML5 add? What is the role of the new logo? Please see https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document)

I think the better solution is html5shiv. js (what? Are there any better solutions? Please do not hesitate to inform us, thank you very much)

If you are interested in this file, you can see that the new html5 labels (chestnut article nav) are created and set these labels as block-level elements.

For Tom, it is very easy to use. Add the following code to the head of the page.

<!--[if lt IE 9]>    <script src="js/html5shiv.js"></script>    <![endif]-->

When the browser is IE and the version is earlier than IE9, this js file is used to solve the problem of incompatibility with html5.

However, in the development process, solving these problems is often not enough. In particular, some content in IE 6 7 may produce incompatibility.

Chestnuts:

Display: inline-block may be used when writing the navigation bar. However, IE6 7 does not support the inline-block attribute.

Then I had to add + display: inline in the code, and then use + zoom: 1 for scaling.

Although it is a bit different from inline-block, it is still possible.

This prefix + can only be recognized by IE 67, but not by browsers of other versions.

Display: inline-block;
+ Display: inline;/* for IE6, 7 */

There are other prefixes, such as the exclusive IE6 prefix "-"-display: inline;

Prefix "*" * display: inline;/* IE6 7 */

In addition to adding a prefix, you can also annotate hack with conditions.

Chestnuts:

<! -- [If IE 6]> only IE6 can recognize
Your code <! [Endif] --> <! -- [If lt IE 9]> versions earlier than IE9 are recognizable
Your code <! [Endif] -->

 

IE6 has a lot of bugs, such as the famous 3px, and IE67 is quite troublesome. But now (2016.9.28) Many companies no longer require full compatibility with IE6 7, so I will not elaborate here. I think it is enough to have a prefix hack and a conditional comment hack. If you are interested, you can download IEtest or call up the compatibility mode in IE11. use various IE versions to see what is the difference between some large websites with rich page content.

After I finish talking about IE 6 7, I will try again.

IE8 generally has no compatibility issues, but IE8 does not have an exclusive prefix hack. If there is a problem, I will use the prefix hack for filtering,

(Do you want to comment on hack? Certainly)

Check chestnuts

Chestnuts:

. Div {
Width: 100px;
Height: 100px;
Background: green \ 0;/* IE 8 9 10 exclusive */background: red \ 0 \ 9;/* IE 9 10 exclusive */background: red; /* W3C standard */}

Use the prefix hack in this example. Except that the DIV in IE8 shows that the background color is green, IE9 10 and other browsers are red.

If you still have better and more convenient methods, please do not hesitate to inform us. Thank you very much.

IE9 and above have almost no major problems. Here we will not be embarrassed. I will try again later when I find it in my work.

In conclusion, IE hack is rarely used in daily development. Writing this blog is to prevent future risks ~

If you have any questions or suggestions, you can have a lot of discussions, original articles, and only a few articles. If there are any mistakes in this article, please let us know about ending ~