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

This article focuses on "what are browser-specific CSS Hacks". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn what browser-specific CSS Hacks has!

Instead of using CSS Hacks, I will use IE's conditional judgment to apply the class to the body tag.

However, I want to record the specific CSS selector and style properties of each browser I've encountered before. I believe there is no other way to provide stylesheets to the unique Safari.

With these CSS Hacks, you can better target IE, Chrome, Firefox, Opera and Safari, as follows:

Browser-specific CSS Hacks comprehensive list:

The code is as follows:

/ * 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 (Everything but IE 6, 7) * /

Html > / * * / body # cuatro {color: red}

/ * Opera 9.27 and below, 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}

/ * Everything but IE6-8 * /

Root * > # quince {color: red}

/ * IE7 * /

* + html # dieciocho {color: red}

/ * IE 10 + * /

@ media screen and (- ms-high-contrast: active), (- ms-high-contrast: none) {

# veintiun {color: red;}

}

/ * Firefox only. 1 + * /

# veinticuatro, x:-moz-any-link {color: red}

/ * Firefox 3.0 + * /

# veinticinco, x:-moz-any-link, x:default {color: red}

/ * FF 3.5 + * /

Body:not (:-moz-handler-blocked) # cuarenta {color: red;}

/ * Attribute Hacks * /

/ * IE6 * /

# once {_ color: blue}

/ * IE6, IE7 * /

# doce {* color: blue; / * or # color: blue * /}

/ * Everything but IE6 * /

# diecisiete {color/**/: blue}

/ * IE6, IE7, IE8, but also IE9 in some cases * /

# diecinueve {color: blue\ 9;}

/ * IE7, IE8 * /

# veinte {color/*\ * * /: blue\ 9;}

/ * IE6, IE7-acts as an! important * /

# veintesiete {color: blue! ie;} / * string after! Can be anything * /

/ * IE8, IE9 * /

# anotherone {color: blue\ 0swap;} / * must go at the END of all rules * /

/ * IE9, IE10 * /

@ media screen and (min-width:0\ 0) {

# veintidos {color: red}

}

1. Conditional style sheet

You should have seen code like this:

The code is as follows:

PS:yahoo 's internal coding best practices do not recommend using conditional stylesheets. It adds an additional average of 1 or 2 HTTP download requests (see here).

two。 Selector Hacks (Selector Hacks)

The code is as follows:

/ * 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 (except IE 6 and 7) * /

Html > / * * / body # cuatro {color: red}

/ * Opera 9.27 and below, 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}

/ * other than 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 ways to select Hacks, but as long as the code is standard enough, there won't be a lot of places to Hack, except for sometimes IE, IE browsers will hardly have a problem.

3. Property hacks (Attribute Hacks)

The code is as follows:

/ * IE6 * /

# once {_ color: blue}

/ * IE6, IE7 * /

# doce {* color: blue; / * or # color: blue * /}

/ * outside of IE6 * /

# diecisiete {color/**/: blue}

/ * IE6, IE7, IE8 * /

# diecinueve {color: blue\ 9;}

/ * IE7, IE8 * /

# veinte {color/*\ * * /: blue\ 9;}

/ * IE8 only * /

# veinte {color: blue\ 0;}

PS: attribute Hacks mixing is a way I use more often, and it feels easier to write. In most cases, CSS Hacks is used to take care of the troublesome IE, and the use of Attribute Hacks can basically solve the compatibility with IE.

4. Attribute hacks mixing

The code is as follows:

/ *! important first * /

# bgcolor {

Other browsers such as background:red! important; / * 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: attention should be paid to the writing order of attribute hacks mixing.

At this point, I believe you have a deeper understanding of "browser-specific CSS Hacks". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.