Friday, April 24th, 2009

CSS Browser Hacks

Category: CSS, Tip

<p>Paul Irish tries not to use CSS browser hacks anymore and instead “uses IE’s conditional comments to apply classes to the body tag, but he put up a concise list of browser specific hacks he has used:

  1. /***** Selector Hacks ******/
  2.  
  3. /* IE 6 and below */
  4. * html #uno  { color: red }
  5.  
  6. /* IE 7 and below */
  7. *:first-child+html #dos { color: red }
  8.  
  9. /* IE 7 and modern browsers */
  10. html>body #tres { color: red }
  11.  
  12. /* Modern browsers (not IE 7) */
  13. html>/**/body #cuatro { color: red }
  14.  
  15. /* Opera 9.27 and below */
  16. html:first-child #cinco { color: red }
  17.  
  18. /* Safari */
  19. html[xmlns*=""] body:last-child #seis { color: red }
  20.  
  21. /*safari 3+, chrome 1+, opera9+, ff 3.5+ */
  22. body:nth-of-type(1) #siete { color: red }
  23.  
  24. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  25. body:first-of-type #ocho {  color: red }
  26.  
  27. /* saf3, chrome1+ */
  28. @media screen and (-webkit-min-device-pixel-ratio:0) {
  29.  #diez  { background: #FFDECE; border: 2px solid #ff0000  }
  30. }
  31.  
  32. /***** Attribute Hacks ******/
  33.  
  34. /* ie6 and below */
  35. #once { _color:blue }
  36.  
  37. /* ie7 and below */
  38. #doce { *color: blue } /* or #color:blue */
  39.  
  40. /* 'Modern Browsers' includes IE8, whether you agree or not.. :) */

He has included a test page and you can view the different browsers via browsershots.

Finally, he links to another concise list… of JavaScript sniffs.

Related Content:

14 Comments »

Comments feed TrackBack URI

You forgot a couple reallllllly helpful ones:

ALL IE VERSIONS:

#somediv{
width: 100px\9;
}

IE8 STANDARDS MODE ONLY:

#somediv{
width /*\**/: 100px\9;
}

I hate to say it but I have a little internal rule about these things, if there is only one or two, i use them and heavily comment the css file where they reside. Don’t hate!

Comment by csuwldcat — April 24, 2009

I found that code on a couple sites, this is one:
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

I don’t want to take credit for what is not mine!

Comment by csuwldcat — April 24, 2009

Dare I say… just use Dojo?

It adds helpful classes to to the HTML tag, like dj_ie dj_ie6 or dj_gecko dj_ff, etc.

Then you add just add a definition that starts with one of those classes.

I think this is not only brilliant, but very readable too.

Comment by AnM8tR — April 24, 2009

so you are saying dojo parses those classes by grabbing the tag name arrays and then normalizes across browsers? While that certainly would seem another way, what happens if the lib or any js hangs or blocks for the user? I am guessing they get an unpleasant page snap from f*ed to fixed, depending on the css that originally renders that can be pretty jarring if it is a super bad float issue or something that has the page noticeably tweaked. You know what I mean?

Comment by csuwldcat — April 24, 2009

Nice collection of hacks. Another option is to use server-side processing with something like Conditional-CSS, which allows IE style conditions inline with your script: http://www.conditional-css.com .

I remember hearing that Chris Wilson had actually originally wanted conditional comments to go into style sheets (perhaps in the Tech Luminaries interview?) – this way you can.

Comment by theallan — April 25, 2009

Well, some of these are hacks which will not be validated..like the underscore hack.. for the past 3 years I have been using this wonderful website: http://www.webdevout.net/css-hacks

very helpful back in the days..

Comment by vsync — April 25, 2009

IIRC *:first-child+html is IE7 only.

Comment by naterkane — April 25, 2009

just putting a asterisk in front of the property alone is an IE7 only targeted hack, no need for all that first-child+html stuff…

Comment by csuwldcat — April 25, 2009

@csuwldcat:
The classes are inserted before the dom loads (but after the html tag and body tag load). If the page “snapped” it wouldn’t be acceptable.

Comment by AnM8tR — April 26, 2009

@csuwldcat:
I’m not sure that was clear. Here’s what happens:
document loads.
html tag loads
css loads (if the were included first)
scripts load (typically dojo.js first)
dojo sniffs the browser
dojo inserts special dj_ie (etc) classes in the html tag
dojo parses widgets
onDomContent loads (page displays)
css styles are applied (by CSS, not dojo)

The targets work just like any other CSS.
.myDiv{display:block;}
.dj_ie .myDiv{display:none;}

I should note its actually Dijit doing this, not Dojo Base. I’d like to see it moved to Dojo Base though.

The designers on our staff love this feature. It works great.

Comment by AnM8tR — April 26, 2009

@AnM8tR : Just a very quick note on client-side performances : if you include your JS file just after your stylesheet, your browser (whatever it is) won’t be able to parallelize tasks. I’ve done a few tests and, depending on the browser, I have been able to save between 1% (FF3) and 40% (Chrome) on page rendering with a very good 20% on IE7. Important note : my CSS is pretty huge but is served everywhere on my site :)

So, if your JS don’t rely on your CSS (in your case, it seems it does), do not hesitate to swap their position and insert JS before CSS :)

Comment by Remi — April 27, 2009

Pro-tip: don’t use hacks.

When I really need to add something for legacy browsers I add the browsername and browername+majorversion serverside.

1. It makes stylesheets much better readable. When I see a syntax error in a stylesheet I don’t like guessing what browser this piece of line noise is targetting and whether it was intentional at all.
2. The general styles and the exceptions are together in the same file at the same location: better readability than including another file with only the exceptions via conditional comments.
3. Adding it clientside with js (the dojo solution as suggested above) displays the wrong style until the page has loaded, asuming you’re waiting for onload or documentready.
4. Doesn’t break when the next browser comes out.
5. Browsers that lie in their browserstring get what they ask for, not my problem.

example

div.stuff {
general:rules;
}
body.ie {
specific:exception;
}

Please let the hacks just die.
I don’t remember where I picked up this technique but while still not perfect it’s the most elegant solution I’ve seen.

Comment by mathiasbaert — April 27, 2009

should have been

div.stuff {
general:rules;
}
body.ie div.stuff {
specific:exception;
}

of course

Comment by mathiasbaert — April 27, 2009

I have updated my list with compatibility for new browsers (saf4, chrome2, ie8) as well as added some new ones:

http://paulirish.com/2009/browser-specific-css-hacks/

Comment by PaulIrish — August 3, 2009

Leave a comment

You must be logged in to post a comment.