/***** 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
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 :)
Please can any one explain what this codes does ? i meant am confues .. But i found it interesting .. please can any one help me out in explaining to me in details
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.
Thanks Sanjay for the solution. How to use it with !important?
/*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 */
But W3C validation doesn’t validate the IE target CSS like I have given:
color:green\9;
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
Thank You very much, its working fine for IE and not not affecting to other browser, Thanks a lot.
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
:( 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
To work only chrome or safari, try my answer in Stackoverflow – Is there a Google Chrome-only CSS hack?
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.
\9 hack for ie9 and below. i want only ie8 and below. your information is wrong. please update it….. thanks.
hey guys,
Can anyone of you here that could help me to fixed the issue of my filePicker button color display on mobile phones/iphones.
http://www.jotformpro.com/form/31846176706965
I am using some custom css to change the color from original blue to green but it doesn’t work.
This is the CSS that I’ve injected into this form.
.filePicker-button {
background: linear-gradient(to bottom, #008000 0%,#008000 100%);
}
.filePicker-button:hover {
background: linear-gradient(to bottom, #008000 0%,#008000 100%);
}
Can you help me?
Thanks,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
safari css hack
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only override */
::i-block-chrome, .wrapper th > p span {
position: relative;
}
}
Thanks It’s working fine for me :)
This is working only for safari. Thanks.
@media screen and (-webkit-min-device-pixel-ratio:0)
no longer works in Chrome for Mac v31 (not sure in which version this stopped working).Many of the these are missing indications that they work in IE10+. Hacks are still relevant to newer versions of IE, because even IE11 has its own major quirks (like it’s positioning of fixed nested elements).
I would also add these to collection ;) – CSS hacks: Firefox, Opera, Safari and Internet Explorer
Hey Chris,
I found the code, it’s working on “iPad|iPhone|iPod|android” devices, i have use this code on my bigcommerce site “http://cancooker.com/” you can see the result on it.
This is the site where i pick the code.
https://gist.github.com/jsoverson/4963116#file-device-js
Thanks!
Sam
Have a look: https://github.com/tarunsharma20/initiator
following css not working in ie 8 if any thing wrong let me know
$(“ul.dynamic”).css(‘margin-top/*/’,’30px\9′);
Thanks
Bhaskar
Just found out this specific hack for chrome!!! because Webkit on Mac is making fonts sometimes a bit thinner – but on Retina Displays the thinner font is looking fine!
at least I didn´t used it, because I took the normal Chrome and Safari Hack and overwritet the Retina Display later!
Anyone know a hack to get media queries to work for iphone 5/5s?
My media-queries are working on everything but the iphone 5 and iphone 5s.
You need to write this:
@Johann,
Thanks for the snippet. I’m using mobile first, and em’s but I’ll try this.
Due to a bug in IE 10 & 11, I needed to target some specific CSS at them. This is where I normally turn to find those kinds of hacks, but it wasn’t listed here.
Here’s how I was able to do it. I hope you’ll consider adding it to your list:
@Nik
Awesome, thank you very much. this guide needs to be updated now that IE:10+ no longer support all the code in the guide. Surprised I had to go comment hunting for a solution.
Nice, thanks for sharing
awesome, however that is old post , but it help :)
for me i usually use this hacks ..
Hey, my friend and I are having an argument. I said “I’m pretty sure the \9 hack is just called ‘the slash hack.'” but she thinks it has a different name. I don’t suppose you know what it’s called, do you? Cheers :)
p{
border-color: blue \ ;
}
for Internet Explorer 8 only
I have used HelveticaNeueLTStdCn font on a web page which is cool on every browser except Safari browser. Thats why i need to use different font family only on safari browser.
Do you have any idea to write only Safari browser specific css …
This page may come in handy: http://browserhacks.com/.