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 for more.


  1. Markus
    Permalink to comment#


    .classnameOrElement {
      color /*\**/: blue\9
    html>/**/body #id { property: value; }
    .ie8only { color /*\**/: #fff\9 }
  2. Hilbrand Edskes
    Permalink to comment#

    /* Not IE 5.5 and below */

  3. vicky
    Permalink to comment#

    is it working properly

  4. Chris Brailsford
    Permalink to comment#

    Okay… maybe its just me… but I’m not sure I understand this snippet. Anyone care to explain?

  5. Joachim Kudish
    Permalink to comment#

    Hi there, just like Chris, I would like an explanation of what this code does?

    Thanks :)

    • Dave
      Permalink to comment#

      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

  6. Codeclown
    Permalink to comment#

    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.

  7. Sanjay Gupt
    Permalink to comment#

    It’s not working properly. Please add a demo page.

  8. Sanjay Gupt
    Permalink to comment#

    It’s working but should be follow hierarchic.

  9. Sanjay Gupt
    Permalink to comment#

    /*For IE 8 Only*/

    border:#000 solid 5px /;

    • Parvej
      Permalink to comment#

      Thanks Sanjay for the solution. How to use it with !important?

  10. Sanjay Gupt
    Permalink to comment#

    /*For IE 8 Only*/

    .header{border:#000 solid 5px /;

  11. Sanjay Gupt
    Permalink to comment#

    i am not able to submit right code for IE8.

  12. Wahid
    Permalink to comment#

    /* Safari */
    html[xmlns*=””] body:last-child .yourclass { }
    This is not working in safari. I need a filter which can differ webkit from chrome.

  13. Rian
    Permalink to comment#

    Very cool, thanks for sharing. Can you have it directed to an external style sheet or does it have to be embedded?

  14. Kis László
    Permalink to comment#

    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 */

    • Rajesh
      Permalink to comment#

      But W3C validation doesn’t validate the IE target CSS like I have given:


  15. Alex Pereira

    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 :

  16. Jake
    Permalink to comment#

    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.

  17. Gobi
    Permalink to comment#

    IE8 hack aslo working in IE9 @media screen {
    .item {
    background: #000;

    :( is there any perfect hack that apply only for IE8 and below ?

    • Gobi
      Permalink to comment#

      IE8 Hack works

      @media screen {
      .item {
      background: #000;

      missed “” infront of “screen”

    • Gobi
      Permalink to comment#

      correction : missed “slash0” infront of “screen”

  18. Anil Paul
    Permalink to comment#

    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’


  19. Alexander

    IE9 another hack (works for me):

    @media all and(min-width:0){
       background: #000;
  20. Arno
    Permalink to comment#

    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!


  21. bird
    Permalink to comment#

    html[xmlns] .clearfix {
    display: block;

    Hi,this hack is to which browser and version? :D

  22. Servesh Mishra
    Permalink to comment#

    i want android css hack solution please provide hack css. for me…please………..

  23. Jasa Website Jakarta
    Permalink to comment#

    it’s amazing!!!!

  24. kim
    Permalink to comment#

    I can not seem to correct a chrome element without breaking a safari element. The Chrome exclusive hacks available do not make any difference.

  25. Shankar
    Permalink to comment#

    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:

    Attribute Hacks:

    Permalink to comment#

    @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

  27. anil
    Permalink to comment#

    Is there any separate hack for chrome ,and separate hack for safari

  28. NIlesh
    Permalink to comment#


    now i have solved all my browsers issue…..
    thanks .

  29. Mark
    Permalink to comment#

    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.

  30. Tirumal

    More Browser hacks at BrowserHacks.

  31. hirdesh
    Permalink to comment#

    \9 hack for ie9 and below. i want only ie8 and below. your information is wrong. please update it….. thanks.

  32. Mark

    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.

    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?


  33. rakesh saini
    Permalink to comment#

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #safari { display: block; }

    safari css hack

  34. Nazar
    Permalink to comment#

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari only override */
    ::i-block-chrome, .wrapper th > p span {
    position: relative;

  35. smhmic
    Permalink to comment#

    @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).

  36. Adrian Harris
    Permalink to comment#

    I would also add these to collection ;) – CSS hacks: Firefox, Opera, Safari and Internet Explorer

  37. Sam
    Permalink to comment#

    Hey Chris,

    I found the code, it’s working on “iPad|iPhone|iPod|android” devices, i have use this code on my bigcommerce site “” you can see the result on it.
    This is the site where i pick the code.


  38. TC
    Permalink to comment#

    would you insert it into html like this?
    < html >
    < head >
    < style type = ” text/css ” >
    :root* > # quince { color : red }
    < /style >
    < /head >
    < body > hello world
    < /body >
    < /html >

  39. Bhaskar Chilukuri
    Permalink to comment#

    following css not working in ie 8 if any thing wrong let me know



  40. Georgi Kolev

    @media all and (-ms-high-contrast:none)
    .foo { color: green } /* IE10 /
    *::-ms-backdrop, .foo { color: red } /
    IE11 */

  41. Raphael
    Permalink to comment#

    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!

    /* non Retina display, Chrome only */
    @media only (max-resolution: 192dpi) and (-webkit-min-device-pixel-ratio:0) {
    h1{ font-weight: 400 !important; }

    at least I didn´t used it, because I took the normal Chrome and Safari Hack and overwritet the Retina Display later!

  42. Tony
    Permalink to comment#

    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.

    • Johann
      Permalink to comment#

      You need to write this:

      @media only screen (max-width: 320px) { 
                  width: 310px;
      @media only screen (min-width: 480px) and (max-width: 560px) { 
                  width: 480px;
  43. Tony
    Permalink to comment#

    Thanks for the snippet. I’m using mobile first, and em’s but I’ll try this.

  44. Nik
    Permalink to comment#

    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:

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        /* IE10+ specific styles go here */
    • Dreq
      Permalink to comment#


      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.

    • Tony

      Nice, thanks for sharing

  45. Mohamed Yahia
    Permalink to comment#

    awesome, however that is old post , but it help :)
    for me i usually use this hacks ..

    /* Chrome */
    @media screen and (-webkit-min-device-pixel-ratio:0) {    
    /* FirFox */
    @-moz-document url-prefix() {
    /* IE 10 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  46. Setek
    Permalink to comment#

    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 :)

  47. Jose Juarez

    border-color: blue \ ;

    for Internet Explorer 8 only

  48. Shah Alom
    Permalink to comment#

    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 …

  49. Paweł
    Permalink to comment#

    This page may come in handy:

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.