Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

  1. Permalink to comment#

    IE8

    .classnameOrElement {
      color /*\**/: blue\9
    }
    
    html>/**/body #id { property: value; }
    .ie8only { color /*\**/: #fff\9 }
  2. /* Not IE 5.5 and below */
    line-height/**/:/**/

  3. 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. Hi there, just like Chris, I would like an explanation of what this code does?

    Thanks :)

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

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

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

  15. 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

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

  19. IE9 another hack (works for me):

    @media all and(min-width:0){
     .item{
       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!

    Greetings.

  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#

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

  23. 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. 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:

    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/

  26. SHAHUL HAMEED
    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#

    superb,

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

  29. Mark
    Permalink to comment#

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

  30. 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.

    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,

  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 “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

  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

    $(“ul.dynamic”).css(‘margin-top/*/’,’30px\9′);

    Thanks
    Bhaskar

  40. Georgi Kolev

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

  41. 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!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".