20/09/04
26Providing CSS for just Internet Explorer
(*Disclaimer* – although this didn’t turn out to be the valid replacement for the underscore hack that I hoped it was, I thought I’d leave the post here as proof of what happens when you don’t check your facts thoroughly enough. Or more specifically, when you’re so tired, that you confuse a vaild HTML result to be valid CSS – hey ho!)
Today, I had one of those little CSS accidents, which led me to discover that an easy way to provide css for only IE (PC and Mac 5, 5.5 and 6) is to simply to add a comma after the the selector, but before the opening brace:
div, {
width: 80%;
}
Mozilla, Opera and Safari ignore the rule. It validates too!). I hope this is useful to someone.
The fact that IE 5 Mac applies the rule as well, could reduce its usefulness. If you have time, please test it further and let me know your results.
Tags: css, internetexplorer, webstandards, windows
Previous
Download our vCard
Justin French said 1449 days ago:
Whoa! This may go down in history as the cleanest hack ever! But it doesn’t appear to validate (I just ran the above style through the W3’s direct input validator). I’m very happy (excited even!) to be proven wrong…Rob Mientjes said 1449 days ago:
You have some silly accidents man!If it validates, it would be one of the best hacks in CSS history. Out goes the immense box model hack, all is possible with just one comma.
Laurens Holst said 1449 days ago:
Rob: * html does pretty much the same… it’s not that ugly either.But I wonder if this is really correct CSS. Instead of just ‘trusting’ the validator, I’d rather see some rationale as to why it would be valid syntax and why browsers like Mozilla ignore the rule (no I’m too lazy to look it up myself ;p).
~Grauw
Jon Hicks said 1449 days ago:
It isn’t really valid syntax. Moz etc. are expecting a list of selectors, but IE seems to carry on regardless.OndÅ™ej KokeÅ¡ said 1449 days ago:
That’s cool&easy, thanks!Jon Hicks said 1449 days ago:
Oh well, It seems I jumped the gun with the validation. Justin’s right, it gives a parse error. Oh well…Justin French said 1449 days ago:
Interestingly, the CSS spec doesn’t (from my quick glance) strictly state that a trailing comma on grouped selectors is not allowed. Logic (and better browsers) tell us that it shouldn’t be there, but is it truly invalid?Sándor vagyok said 1449 days ago:
Arpad biztos jo munkasember!Laurens Holst said 1449 days ago:
Justin: you need to look at the grammar, that’s the thing which defines that. Like this one ...Laurens Holst said 1449 days ago:
selectors_group: selector [ ’,’ S* selector ]*
;
says selector, with zero or more additional comma-seperated other selectors. Note that the ’,’ is grouped with additional selectors (between the square brackets), so it can’t appear by itself. And a selector can’t be empty, which is expressed in the grammar as well.
~Grauw
Shaun Inman said 1449 days ago:
Don’t hack, filter! :)This is my current preferred techique:
<style type=”text/css” media=”screen”>
/* <![CDATA[ */
@import url(/css/modern.css);
/**//*/@import ”/css/iemac.css”;/**/
/* ]]> */
</style>
<!—[if IE]>
<style type=”text/css” media=”screen”>
/* <![CDATA[ */
@import url(/css/iepc.css);
/* ]]> */
</style>
<![endif]—>
<!—[if IE 5]>
<style type=”text/css” media=”screen”>
/* <![CDATA[ */
@import url(/css/iepc5x.css);
/* ]]> */
</style>
<![endif]—>
The first style is for all modern browsers. The second is only imported by IE Mac and is used to clear up the occasional float issue and correcting form element widths (especially on select menus). The third and fourth styles use IE PC conditional comments (which validates and is easier to read than the equivalent CSS filters) to target specific versions of IE. (This is probably the only time I’d use a vendor-specific feature—to correct vendor-specific bugs). The first of those is served to IE PC 5+ and usually delivers the good ol’ height: 1% fix which corrects all kinds of float, margin, positioning and background problems. The second conditional targets IE 5.x and corrects for its primitive, incorrect box model.
All those little hacks add up, this technique maintains the integrity of your CSS, it validates and the hacks are easier to find and remove in the future.
Shaun Inman said 1449 days ago:
Ah, see Doug’s article on the IE Mac filter. The comments removed the backslash hack in the source above…Justin French said 1449 days ago:
Yes, conditional comments are still my current preferred method (if a single hackless style sheet won’t cut it).Rob Mientjes said 1449 days ago:
Laurens: I know, but it does add a lot (hey, I’m a byte saver) of syntax. But yeah, * html is nice too.Anne said 1449 days ago:
Rob, then use the underscore hack, as in ’_width:100px’. That is well-formed CSS (it doesn’t validate of course) and IE applies it.Darren White said 1449 days ago:
I’ve used the _width like above but also found the following way to be the cleanest :width: 100px ! important;
width: 80px;
IE ignores the important but good browsers don’t allowing us to declare two styles for the same thing one for Firefox et el and one for IE, it does add an extra line of code etc.
I can’t take credit for it as it was on http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/
Also it does validate.
Jeff Minard said 1449 days ago:
Yeah, I just found that same underscore hack, and I really like it too.Trev Morris said 1449 days ago:
I often use the underscore hack outline above. It’s easy to remembe, and is a good way of specifing IE only code especially on width, padding and margin differences. Downside, it doesn’t validate!Dysfunksional Monkey said 1449 days ago:
My current technique is:/* General */
body {}
/* for “standards” browsers */
html>selector {}
/* IE5 Mac \*/
selector {}
/* And any IE specific tweaks */
* html selector{}
I don’t think using the underscore hack is really nice. I’ve spent days recoding someone’s CSS because they used liberal use of it only to mess up the layout.
But then again, why hack at all?
Give ‘em plain text. Stuff the styles!
Dysfunksional Monkey said 1449 days ago:
My current technique is:/* General */
body {}
/* for “standards” browsers */
html>selector {}
/* IE5 Mac */
selector {}
/* And any IE specific tweaks */
* html selector{}
I don’t think using the underscore hack is really nice. I’ve spent days recoding someone’s CSS because they used liberal use of it only to mess up the layout.
But then again, why hack at all?
Give ‘em plain text. Stuff the styles!
jheyer said 1449 days ago:
Personally I like the filters Tantek has created* High Pass Filter
* Inline High Pass Filter
* Mid Pass Filter
* IE5.0/Windows Band Pass Filter
* IE5.5/Windows Band Pass Filter
* IE5/Mac Band Pass Filter
Seems cleaner and more controlled to filter by the above methods.
Thanks Jon for another tool for initial development. I wouldn’t use it for production versions of websites.
Shaun, I like the conditional comments. I wish they would work using the standalone versions of IE that we can now run. Bummer.
Paul D said 1449 days ago:
Wow, that’s what I love about this place. Jon finds and posts a great new CSS tip, and then all kinds of knowledgeable people chime in with their own versions. Everything you need to know about the subject on one page!Hicksdesign entries are rapidly taking over my CSS bookmark folder.
Adrian Kostrubiak said 1448 days ago:
Wow I really need to hang around this place a lot more. I could really learn alot from the likes of all these greatly knowledgeable peoples.Thanks to you all!
Jon Hicks said 1448 days ago:
“all kinds of knowledgeable people chime in with their own versions”Exactly. Helps me too!
Shaun Inman said 1448 days ago:
Josh, that’s a good point. The way I test styles for IE 5.x is to add them to the general IE PC-only stylesheet for development/testing purposes and then move them over to the appropriate version-specific sheet once the desired solution is nailed down.Magnus Haugsand said 1448 days ago:
What about using IE7’s instead of alternative stylesheets, or is that “hack” excluded because of the necessary javascript-support?I will rather use an alternative stylesheet for IE (like Shaun Inman) than hacks inside the main stylesheet.
I have also used the ”!important-hack”, but that work-around will not work for IE for mac, according to tantek.