Comments on: CSS Browser Hacks

By: PaulIrish

PaulIrish — Mon, 03 Aug 2009 16:22:26 +0000

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/

By: mathiasbaert

mathiasbaert — Mon, 27 Apr 2009 16:54:30 +0000

should have been

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

of course

By: mathiasbaert

mathiasbaert — Mon, 27 Apr 2009 16:52:58 +0000

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.

By: Remi

Remi — Mon, 27 Apr 2009 11:31:28 +0000

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

By: AnM8tR

AnM8tR — Sun, 26 Apr 2009 16:45:39 +0000

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

By: AnM8tR

AnM8tR — Sun, 26 Apr 2009 16:37:59 +0000

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

By: csuwldcat

csuwldcat — Sun, 26 Apr 2009 02:59:25 +0000

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…

By: naterkane

naterkane — Sat, 25 Apr 2009 15:45:34 +0000

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

By: vsync

vsync — Sat, 25 Apr 2009 09:45:59 +0000

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

By: theallan

theallan — Sat, 25 Apr 2009 06:48:28 +0000

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.

By: csuwldcat

csuwldcat — Fri, 24 Apr 2009 21:18:29 +0000

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?

By: AnM8tR

AnM8tR — Fri, 24 Apr 2009 18:35:37 +0000

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.

By: csuwldcat

csuwldcat — Fri, 24 Apr 2009 18:27:03 +0000

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!

By: csuwldcat

csuwldcat — Fri, 24 Apr 2009 18:26:10 +0000

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!