treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Browser Specific Hacks

Last updated on:

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

View Comments

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.

Leave a Comment

Use markdown or basic HTML and be nice.