[Summary] CSS Hacks summary in the browser

Browser compatibility is the first challenge for front-end development. Currently, I have installed six browsers on my computer (such as Maxthon, which is based on the IE kernel ).

CSS hacks uses browser vulnerabilities to hide CSS rules of a specific browser. Browser compatibility can be implemented in two ways: Conditional style sheets and CSS Hacks (Selector Hacks and Attribute Hacks ). Some CSS Hacks methods are summarized based on some information.

1. Conditional style sheet

You should have seen code like this:

 <link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css"href="css/ie.css"  />
< ![endif]-->

PS: it is not recommended to use conditional style sheets for yahoo's internal encoding best practices. It adds an additional average of 1 or 2 HTTP download requests (refer to here ).

 

2. Selector Hacks)

/* IE6 and below */
* Html # uno {color: red}

/* IE7 */
*: First-child + html # dos {color: red}

/* IE7, FF, Saf, Opera */
Html> body # tres {color: red}

/* IE8, FF, Saf, Opera (outside IE 6, 7 )*/
Html>/**/body # cuatro {color: red}

/* Opera 9.27 or lower, safari 2 */
Html: first-child # cinco {color: red}

/* Safari 2-3 */
Html [xmlns * = ""] body: last-child # seis {color: red}

/* Safari 3 +, chrome 1 +, opera9 +, ff 3.5 + */
Body: nth-of-type (1) # siete {color: red}

/* Safari 3 +, chrome 1 +, opera9 +, ff 3.5 + */
Body: first-of-type # ocho {color: red}

/* Saf3 +, chrome1 + */
@ Media screen and (-webkit-min-device-pixel-ratio: 0 ){
# Diez {color: red}
}

/* IPhone/mobile webkit */
@ Media screen and (max-device-width: 480px ){
# Veintiseis {color: red}
}
/* Safari 2-3.1 */
Html [xmlns * = ""]: root # trece {color: red}

/* Safari 2-3.1, Opera 9.25 */
* | Html [xmlns * = ""] # catorce {color: red}

/* Outside IE6-8 */
: Root *> # quince {color: red}

/* IE7 */
* + Html # dieciocho {color: red}

/* Firefox only. 1 + */
# Veinticuatro, x:-moz-any-link {color: red}

/* Firefox 3.0 + */
# Veinticinco, x:-moz-any-link, x: default {color: red}

PS: There are many Hacks methods for selector, but as long as the code is well written, there will not be a lot of Hack, except for sometimes the Internet Explorer is messy, there will be almost no problem in browsers other than Internet Explorer.

 

3. Attribute hacks (Attribute Hacks)

 /* IE6 */
# Once {_ color: blue}

/* IE6, IE7 */
# Doce {* color: blue;/* or # color: blue */}

/* Outside IE6 */
# Diecisiete {color/**/: blue}

/* IE6, IE7, IE8 */
# Diecinueve {color: blue \ 9 ;}

/* IE7, IE8 */
# Veinte {color/* \ **/: blue \ 9 ;}

/* Only IE8 */
# Veinte {color: blue \ 0 ;}

PS: attribute Hacks hybrid writing is a method that I usually use, and it feels simple to write. In most cases, CSS Hacks is used to take into account the disturbing IE. Using Attribute Hacks can basically solve IE compatibility. 4. Attribute hacks hybrid write

 /*! Important first */
# Bgcolor {
Background: red! Important;/* Other browsers such as Firefox */
Background: blue;/* IE6 */
}

# Test {
Background-color: black;/* Firefox, Opera, IE8 */
[; Background-color: green;]/* Safari, Chrome */
* Background-color: blue;/* IE7 */
_ Background-color: red;/* IE6 */
}

PS: Pay attention to the writing order for the hacks hybrid Writing of the attribute.

Finally, let's take a look at this test page (Demo)

In fact, browser compatibility should not only be compatible with previous browsers (Forward compatibility), but should also be considered for future browser services (backward compatibility). Therefore, we should try our best to comply with standards during development, keeping code clean is a very important thing (refer to "Keep CSS Simple. Address: Workshop VicTo sum up, please indicate the source if any reprint is available. Thank you! ReferencesBrowser CSS hacks: http://paulirish.com/2009/browser-specific-css-hacks/CSS Hacks: http://www.webdevout.net/css-hacks Additional readingWill the browser apply the rule (s )? CSS Hackz Series: Targeting and Filtering Internet Explorer 7CSS Hack quick query CSS hack: differentiate IE6, IE7, firefox