Talking about CSS hack (browser compatible)

Write a little bit about browser compatibility today, although Baidu has a lot, but I still want to write!

Look at a diagram first

This figure depicts the browser market share used by netizens from January 2016 to August (source: Http://tongji.baidu.com/data/browser). I am pleased that Chrome is the first, chrome has always been relatively friendly to the standard, but the figure also reflects the use of IE series of people are also many, so we do the front-end development of the day to consider their feelings.

The following is the text:

My predecessor company did the front end when asked to be compatible with IE8 and above, Google, Firefox three mountain. Because it is used in the layout of the table (there is a certain history ~), so the daily development and maintenance of the time generally there is not much compatibility issues to deal with. Google and Firefox are now well-supported, especially the latest version. Now the latest version of Firefox is the latest version of 49.0.1.6109,chrome 53.0.2785.116. Wrote a few HTML5+CSS3 small pages (3D Rubik's Cube animation, simple strokes + animation), the support is very good. Some CSS3 properties do not support direct prefix-webkit-,-moz-,-o-、-ms-can be resolved.

One sentence summary : The latest version of the major browsers support almost all the standards, but the daily development of the CSS3 attribute is recommended to prefix, to forward compatibility with the old version of the browser.

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*/

It's not complicated to say the simple point.

IE series, IE9 and above for HTML5 support are good. But IE678 still has a lot of problems, mainly is not support HTML5 new label.

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

This question I think the better solution is html5shiv.js (what?) You say there's a better solution? Please let us know, thank you very much.)

This file is interesting to look at, the main is to create a new label HTML5 (Chestnut article nav, etc.), and then set these tags as block-level elements.

For small white, using very simple, 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 less than IE9, use this JS file to solve the problem of incompatible HTML5.

But in the development process, it is often not enough to solve these, especially IE 6 7 There are some content is incompatible.

Chestnuts:

When we write the navigation bar, we may use display:inline-block, but we find that IE6 7 does not support inline-block this property.

Then I have to add +display:inline in the code; Then use the +zoom:1 to do the scaling.

Although there is a little inconsistency with inline-block, but the overall is still possible.

This prefix + can only be recognized by IE 67, the other version of the browser will not recognize this CSS code.

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

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

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

In addition to adding prefixes, you can also use conditional annotations hack

Chestnuts:

<!-- [If IE 6]> only IE6 recognizable
Your code <! [EndIf]  - <!-- [If Lt IE 9]> IE9 The following versions are recognized
Your code <! [EndIf]  -

IE6 also have a lot of bugs, such as the famous 3px, IE67 is very troublesome, but now (2016.9.28) Many companies are no longer required to fully compatible with IE6 7, so here is not detailed, there is a prefix hack and conditional comments hack I think it's enough. Everyone is interested can download ietest or in the IE11 to bring up the compatibility mode, with various versions of IE to see some of the pages of the rich content of the big site what the difference.

Finish IE 6 7 and then the last word about IE 8

IE8 generally there is no compatibility problem, but IE8 does not have the exclusive prefix hack, if there is a problem I will use the prefix hack to filter,

(Do you say conditional comment hack?) Of course you can)

Look at 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 */}

This Li Zili is selected with the prefix hack, except that the IE8 div shows that the background color is green, IE9 10 and other browsers are red.

If you have a better and more convenient way, please do not hesitate to inform, thank you very much.

IE9 and above are hardly too much of a problem. There's no more nagging here. Later found in the work to add.

Finally summarizes, the daily development rarely uses the IE hack, writes this blog is also for later safekeeping ~

If there are any questions or suggestions, can be a lot of communication, original articles, writing limited, Caishuxueqian, if there is not in the text, Wan hope to inform ending~

Talking about CSS hack (browser compatible)