Code Snippet
Browser Specific 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 (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 }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { 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 */
#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 */
Reference URL
IE8
/* Not IE 5.5 and below */
line-height/**/:/**/
is it working properly
Okay… maybe its just me… but I’m not sure I understand this snippet. Anyone care to explain?
Hi there, just like Chris, I would like an explanation of what this code does?
Thanks :)
I think it explains the ways to do browser-specific css-rules. For example, if you want to have red background on element with IE6, you take the first selector and do your magic with it.
It’s not working properly. Please add a demo page.
It’s working but should be follow hierarchic.
/*For IE 8 Only*/
.header{
border:#000 solid 5px /;
}
/*For IE 8 Only*/
.header{border:#000 solid 5px /;
i am not able to submit right code for IE8.
/* Safari */
html[xmlns*=""] body:last-child .yourclass { }
This is not working in safari. I need a filter which can differ webkit from chrome.
Very cool, thanks for sharing. Can you have it directed to an external style sheet or does it have to be embedded?
I use these hack for targeting specific IE versions
color : green; /* IE9 and below */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
Why using hack on each line ?
If you’ve got a complex integration, use the conditionnals comments with specifics div ids.
For example if you wanna target IE7
Your content
Different syntaxs here : http://www.quirksmode.org/css/condcom.html
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.