PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » CSS » Browser Specific Hacks

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

Reference URL

Subscribe to The Thread

  1. IE8

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

  3. is it working properly

  4. Chris Brailsford

    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

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

  8. Sanjay Gupt

    It’s working but should be follow hierarchic.

  9. Sanjay Gupt

    /*For IE 8 Only*/

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

  10. Sanjay Gupt

    /*For IE 8 Only*/

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

  11. Sanjay Gupt

    i am not able to submit right code for IE8.

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

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

    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

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~