Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the ways to use CSS hack". In daily operation, I believe many people have doubts about the way CSS hack is used. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the ways to use CSS hack?" Next, please follow the editor to study!

What is CSS hack?

Due to the different browsers of different manufacturers or different versions of a browser (such as IE6-IE11,Firefox/Safari/Opera/Chrome, etc.), the support and resolution of CSS are different, resulting in inconsistent page rendering effects in different browsers. At this time, in order to achieve a unified page effect, we need to write specific CSS styles for different browsers or different versions. We call this process of writing corresponding CSS code for different browsers / different versions, called CSS hack!

The principle of CSS hack

Because different browsers and different versions of browsers have different support for CSS and different parsing results, as well as the impact of CSS priority on browser presentation, we can apply different CSS to different browser scenarios.

CSS hack classification

CSS Hack can be roughly expressed in three forms: CSS attribute prefix, selector prefix and IE conditional annotation (that is, HTML header references if IE) Hack. In actual projects, most of CSS Hack is introduced according to the performance differences between different versions of IE browsers.

Attribute prefix method (that is, class internal Hack): for example, IE6 can recognize underscores "and asterisks" * ", IE7 can recognize asterisks" * ", but can not recognize underscores", IE6~IE10 knows "\ 9", but firefox cannot recognize the above three.

Selector prefix (selector Hack): for example, IE6 can recognize html .class {}, IE7 can recognize + html .class {} or *: first-child+html .class {}.

IE conditional annotations (i.e. HTML conditional annotations Hack): for all IE (note: IE10+ no longer supports conditional annotations): for IE6 and the following versions:. This type of Hack works not only for CSS, but also for all code written in the judgment statement.

The writing order of CSS hack is generally defined in front of CSS, which has a wide range of application and strong recognition ability.

CSS hack mode 1: conditional annotation method

This is the proprietary Hack method for IE browsers and hack, which is officially recommended by Microsoft. Examples are as follows

Only under IE, only under IE6, only above IE6, but not on IE8. Non-IE browsers.

CSS hack mode 2: intra-class attribute prefix method

The attribute prefix method is to prefix the CSS style attribute name with some hack prefixes that can only be recognized by specific browsers in order to achieve the desired page rendering effect.

CSS hack comparison table of different versions of IE browser

/ / alert (document.compatMode); body:nth-of-type (1) .iehack {color: # F00X CSS hack * for Windows IE9/Firefox 7+/Opera 10 / all Chrome/Safari, the selector also applies to almost all Mobile/Linux/Mac browser*/} .demo1, .demo2, .demo3, .demo4 {width:100px; height:100px } .hack {/ * demo1 * / / * demo1 pay attention to the order, otherwise it may not be displayed correctly under IE6/7, resulting in a white background * / background-color:red; / * All browsers * / background-color:blue! important;/* All browsers but IE6 * / * background-color:black; / * IE6, IE7*/ + background-color:yellow;/* IE6, IE7*/ background-color:gray\ 9 / * IE6, IE7, IE8, IE9, IE10*/ background-color:purple\ 0 * IE8, IE9, IE10*/ background-color:orange\ 9\ 0 * IE10*/ _ background-color:green; / * Only works in IE6 * / * + background-color:pink; / * WARNING: Only works in IE7? Is it right? * /} / * you can detect IE10 through javascript, and then tag the IE10 with the class class= "ie10" * / .ie10 # hack {color:red / * Only works in IE10 * /} / * demo2*/.iehack {/ * this demo instance is the hack used to distinguish between ie6~ie9 and Firefox/Chrome in standard mode. Note that the sequence IE6 displays as green, IE7 displays as black, IE8 displays as red, IE9 displays as blue, Firefox/Chrome displays as orange, (this IE10 effect is the same as the latest version of IE9,Opera effect as IE8) * / background-color:orange / * all-for Firefox/Chrome * / background-color:red\ 0; / * ie8/ 9/10/Opera-for ie8/ie10/Opera * / background-color:blue\ 9\ 0; / * ie9/10-for ie9/10 * / * background-color:black; / * ie 6 background-color:green 7-for ie7 * / _ background-color:green / * ie6-for ie6 * /} / * demo3 instance is used to distinguish between ie6~ie9 and Firefox/Chrome in standard mode. Note that the sequence IE6 is red, IE7 is blue, IE8 is green, IE9 is pink, Firefox/Chrome is orange, (this IE10 effect is the same as the latest IE9,Opera effect and IE9 is pink) * / .element {background-color:orange / * all IE/FF/CH/OP*/} .element {* background-color: blue; / * IE6+7, doesn't work in IE8/9 as IE7 * /}. Element {_ background-color: red; / * IE6 * /}. Element {background-color: green\ 0; / * IE8+9+10 * /}: root .element {background-color:pink\ 0 } / * IE9+10 * / / * demo4*//* this instance is used to distinguish between ie6~ie10 and Opera/Firefox/Chrome in standard mode. In this example, it is important to note that the sequence IE6 is displayed as orange, IE7 as pink, IE8 as yellow, IE9 as purple, IE10 as green, Firefox as blue, Opera as black, Safari/Chrome as gray, * / .hacktest {background-color:blue / * all are identified here for firefox * / background-color:red\ 9; / * all ie*/ background-color:yellow\ 0; / * the latest version of for IE8/IE9/10 opera also knows * / + background-color:pink; / * for ie6/7*/ _ background-color:orange; / * for ie6*/} @ media screen and (min-width:0) {.hacktest {background-color:black\ 0 } / * opera*/} @ media screen and (min-width:0) {hacktest {background-color:purple\ 9;} / * for IE9/IE10 PS: some foreign countries are used to writing\ 0 without considering the fact that Opera also knows\ 0 * /} @ media screen and (- ms-high-contrast: active), (- ms-high-contrast: none) {hacktest {background-color:green } / * for IE10+ this writing can be adapted to high contrast and default mode, so it can cover all ie10 modes * /} @ media screen and (- webkit-min-device-pixel-ratio:0) {.hacktest {background-color:gray;}} / * for Chrome/Safari*/ / * # 963 brown: root is for IE9/IE10, priority is higher than @ media, use with caution! If the two are used together, add! important to the @ media style if necessary to distinguish IE9 from IE10 * / / *: root .hacktest {background-color:#963\ 9;} * /

Demo1 is to test the display effect of hack in different IE browsers

IE6 is displayed as: pink

IE7 is displayed as: pink

IE8 is displayed as: blue

IE9 is displayed as: blue

Firefox/Chrome/Opera is displayed as: blue

If you remove the! important attribute definition, IE6/7 is still pink, IE8 is purple, IE9/10 is orange, Firefox/Chrome is red, and Opera is purple. Isn't it a little strange that all the performances except IE6 meet our expectations. Then why is the color of IE6 + margin-bottom: 0px instead of _ green; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; "> + html # ie7test {/ * IE7 only*/ color:green;}

After testing, I found that the attribute prefix + is recognized only by IE6 and IE7. And + html selector is known only to IE7. So we must pay special attention to it when using it.

Demo2 instance is a hack used to distinguish between ie6~ie9 and Firefox/Chrome in standard mode. Note the order.

IE6 is displayed as: green

IE7 is displayed as: black

IE8 is displayed as: red

IE9 is displayed as: blue

Firefox/Chrome is displayed as: orange

(this example IE10 effect is the same as the latest version of IE9,Opera effect and IE8)

Demo3 instance is also a hack used to distinguish between ie6~ie9 and Firefox/Chrome in standard mode. Note the order.

IE6 is displayed as: red

IE7 is displayed as: blue

IE8 is displayed as: green

IE9 is displayed as: pink

Firefox/Chrome is displayed as: orange

(the IE10 effect in this example is the same as the latest version of IE9,Opera and pink as IE9.)

Demo4 instance is a hack used to distinguish between ie6~ie10 and Opera/Firefox/Chrome in standard mode. Special attention should be paid to the order in this example.

IE6 is displayed as: orange

IE7 is displayed as: pink

IE8 is displayed as: yellow

IE9 is displayed as: purple

IE10 is displayed as: green

Firefox is displayed as: blue

Opera is displayed as: black

Safari/Chrome is displayed as: Gray

CSS hack mode 3: selector prefix method

The selector prefix method is to hack CSS selectors with prefixes that only certain browsers can recognize for browsers whose pages are inconsistent or require special treatment.

At present, the most common is

* html * prefix works only for IE6 * + html * + prefix only for IE7 @ media screen\ 9 {...} only for IE6/7 @ media\ 0screen {body {background: red;}} only for IE8 @ media\ 0screen\, screen\ 9 {body {background: blue;}} only for IE6/7/8 @ media screen\ 0 {body {background: green;}} only for IE8/9/10 @ media screen and (min-width:0\ 0) {body {background: gray }} is only valid for IE9/10 @ media screen and (- ms-high-contrast: active), (- ms-high-contrast: none) {body {background: orange;}} is only valid for IE10

Combine some selectors of CSS3, such as html:first-child,body:nth-of-type (1), to derive more hack methods.

CSS3 selector combined with JavaScript's Hack

Let's use IE10 as an example:

Because the IE10 user agent string (UserAgent) is: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0), we can use javascript to add this attribute to the document tag, and then use the CSS3 basic selector to match.

JavaScript Code:

Var htmlObj = document.documentElement;htmlObj.setAttribute ('data-useragent',navigator.userAgent); htmlObj.setAttribute (' data-platform', navigator.platform)

CSS3 matching code:

Html [data-useragent*='MSIE 10.0'] # id {color: # F00;}

Advantages and disadvantages of CSS hack

In general, we try to avoid using CSS hack, but in some cases we have to use hack to achieve backward compatibility for the sake of user experience. For example, since CSS3 is not supported in IE8 and below, and our project page uses a large number of new attributes of CSS3 to render normally under IE9/Firefox/Chrome, in this case, if you do not use methods such as css3pie or htc or conditional comments, you may have to let the exclusive hack of IE8-. While using hack is good for consistency of page performance, excessive abuse can cause confusion in html documents and increase the burden of management and maintenance. I believe that as long as we work together, use less and use hack cautiously, the standards of browser manufacturers will become more and more unified in the future and make a smooth transition to the mainstream era of standard browsers. Abandoning those old IE hack will certainly reduce the complexity of our coding and do less useless work.

Description: the test environment of this paper is IE6~IE10,Chrome 29.0.1547.66m Firefox 20.0.1, Opera 12.02, etc.

At this point, the study of "what are the ways to use CSS hack" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.