Go: "Summary" browser CSS Hacks rollup, browser-compatible CSS Hacks

Browser compatibility can be said to be the front-end development of the first challenge to face, currently my computer has installed 6 kinds of browsers (based on IE kernel does not count, such as Maxthon, etc.).

CSS hacks uses browser vulnerabilities to hide CSS rules for specific browsers. There are two main ways to implement browser compatibility style sheets and CSS Hacks (Selector Hacks, Attribute Hacks). This summarizes some CSS hacks methods based on some data.

1. Conditional style Sheet

Code like this you should have seen:

<link rel= "stylesheet" type= "Text/css" href= "Css/style.css"/>
<!--[If ie]>
<link rel= "stylesheet" type= "Text/css" href= "Css/ie.css"/>
<! [endif]-->

Ps:yahoo's internal coding best practices do not recommend the use of conditional style sheets. It will add an additional average of 1 or 2 HTTP download requests (see here).

2. Selector Hacks (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 and below, Safari 2 */
Html:first-child #cinco {color:red}

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

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

/* Safari, 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: Selector hacks way more, but as long as the code to write enough standards, in fact, to Hack the place will not be a lot of, in addition to sometimes ie disruptive, ie browser is almost no problem.

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 is one of the more ways I use it, and I feel it is easier to write. The use of CSS hacks Most of the situation is to take into account the love of disruptive IE, the use of attribute hacks can basically solve the compatibility of IE. 4. Attribute hacks Mixed Write/*!important Priority */
#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: Attribute hacks write order.

Finally, check out this test page ( demo )

In fact, browser compatibility should not be only for the past browser compatibility (forward-compatible), but also should consider for the future browser services (backward compatibility), so when developing, to the extent possible to conform to the standards, keep the code neat is a very important thing (refer to "Keep CSS simple") when only hack. This article address: Http://www.cnblogs.com/wiky/archive/2010/01/07/Browser-CSS-Hacks-assembles.htmlPS: This article by VickiSummary, if there is reproduced please indicate the source, thank you! ReferencesBrowser CSS hacks:http://paulirish.com/2009/browser-specific-css-hacks/css Hacks:http://www.webdevout.net/css-hacks Extended ReadingWould the browser apply the rule (s)? CSS Hackz series:targeting and Filtering Internet Explorer 7CSS Hack Summary quick check CSS Hack: Differentiate Ie6,ie7,firefox

Go: "Summary" browser CSS Hacks rollup, browser-compatible CSS Hacks