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 */
Check out BrowserHacks.com for more.
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
Chrome Hack only
Firefox Hack only
IE8 Hack
IE9 Hack
coloe:red\9; hack works on IE9
I am not totally css hack fanatic, I prefer to design and develop simple website yet effective than using fancy website but full of css hack and someday the newer version of browser will no longer adopt this kind of scripting.
IE8 hack aslo working in IE9 @media screen {
.item {
background: #000;
}
}
:( is there any perfect hack that apply only for IE8 and below ?
IE8 Hack works
@media screen {
.item {
background: #000;
}
}
missed “” infront of “screen”
correction : missed “slash0″ infront of “screen”
Hi,
Please help me with Google chrome only css hack. I am having @ font-face issue with google chrome only. I just need to hack google chrome alone to make it ‘Arial’
Thanks
Anil
IE9 another hack (works for me):
Hi there,
Over the years I ask myself again and again the same question:
“When are browser builders going to sit down together and begin to build browsers that work WITHOUT all those irritating differences?!?”
Wake up you guys and do what you have to do.
Be responsible and free us from all that cr@p!
By the way:
Many thanks to all people who are trying so hard to make right what browser builders are messing up!
Greetings.
html[xmlns] .clearfix {
display: block;
}
Hi,this hack is to which browser and version? :D
Hi,
i want android css hack solution please provide hack css. for me…please………..
it’s amazing!!!!
I can not seem to correct a chrome element without breaking a safari element. The Chrome exclusive hacks available do not make any difference.
You can read more about browser specific selector and attribute hacks below it was very helpful for me so just sharing it. Thanks!
Selector Hacks:
http://mydons.com/browser-specific-css-rules-you-must-memorize-part-1/
Attribute Hacks:
http://mydons.com/browser-specific-css-rules-you-must-memorize-part-2/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.ar #form-wrapper {
width: 330px;
}
}
Above hack for safari and chrome, i need only chrome if u know share to me
Is there any separate hack for chrome ,and separate hack for safari
superb,
now i have solved all my browsers issue…..
thanks .
@anil,
If you like to create separate style for chrome and safari, you can use individual css “with” browser detection function. For your question, it might be impossible due of both browser are under the same Webkit browser engine. IMHO.
More Browser hacks at BrowserHacks.