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

This article mainly introduces several forms of Hack expression in CSS, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

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 (i.e. Hack within the class): for example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but not the underscore "_", 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 II: 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

Description: in standard mode

The "-" minus sign is IE6's proprietary hack

"\ 9" IE6/IE7/IE8/IE9/IE10 is effective.

"\ 0" IE8/IE9/IE10 takes effect. It is the hack of IE8/9/10.

"\ 9\ 0" is only valid for IE9/IE10 and is the hack of IE9/10.

Demo is as follows

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

So why is the color of IE6 not the green of _ background-color:green; but the pink of * + background-color:pink? Is it actually the fault of the so-called IE7 private hack? Didn't you say that * + is the proprietary hack of IE7? No, you may be too careless! We often say that the format of IE7 proprietary * + hack is * + html selector, rather than adding a * + prefix directly to the attribute above. If you are customizing a special style for IE7, you should use this:

* + html # ie7test {/ * IE7 only*/ color:green;}

After testing, I found that the attribute prefix * + background-color:pink; 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, etc.

Combined with some selectors of CSS3, such as html:first-child,body:nth-of-type (1), more hack methods are derived. For more details, please refer to the following table:

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;} CSS hack pros and cons

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.

Finally, add a CSS hack table quoted from a foreign Daniel summary, at this time an old knowledge summary table from 6 years ago, put here only for convenient reference when needed.

Thank you for reading this article carefully. I hope the article "several forms of Hack in CSS" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.