Web Standards Tips

Practical advice for building websites with web standards

CSS hacks for IE-only style rules

By Isofarro on November 18th, 2008 - 8 comments

The bane of CSS is IE6 and IE7 support, and most of the times they need a few extra styles to make things work. But those additional styles can mess up other browsers. Ideally we would want to have those styles only given to Internet Explorer.

There are two hacks I typically use to filter style rules just for IE. The choice between them depends on whether a style rule needs to be seen by IE7 or not. Both hacks are CSS rule prefix hacks – just tack it on the start of the property in each case. These two hacks are:

  • The underscore prefix (_width: 100%). This style-rule is seen by IE6, but not IE7.
  • The star/asterisk prefix (*width: 100%). This style-rule is seeen by both IE6 and IE7.

The judicious use of the underscore and star prefixes is sufficient to deal with most IE6 and IE7 issues. So:

  • To target just IE6, use just the underscore.
  • To target both IE6 and IE7, use the star/asterisk.
  • To target only IE7, use the star/asterisk to set the IE7 specific style, and use the underscore to undo that style in IE6.

This is fine when all that’s needed is the odd IE fix here and there. As the number of IE-specific style-rules increases it is worth using conditional comments to bring in IE specific stylerules, either as an additional stylesheet, or a full stylesheet with the IE-specific rules appended (created via a build process).

8 Responses to “CSS hacks for IE-only style rules”

  1. Given that this site has the tag line “Practical advice for building web standards compliant websites”, this seems like a odd post to see here.

    The moment you use either the underscore or star hack, you are producing invalid CSS and making the site non-compliant.

  2. David, yes, the CSS is invalid, yet the practical benefits of this technique far outweights the costs of it. And while we are stuck with Internet Explorer 6 and 7, we are stuck in a world where CSS isn’t as well supported in browsers as we’d like or expect.

    Hence the tag line of site begins with “Practical advice”, rather than “Specification perfect”, our sites live and die on the Web with the browsers that our visitors use. There are times when validation needs to be broken for practical, and even accessibility considerations.

  3. While there are times when deviating from standards is *practical*, it isn’t *compliant*, and the tag line isn’t “Practical advice for building partially web standards compliant websites”.

  4. David – in my opinion, the “practical” part of web standards compliance is knowing when and why to break rules to achieve web sites (the primary goal).

  5. 5 Andrew Smith says: December 5th, 2008 at 1:50 pm

    Folks, it’s worth remembering that if “star” hacks (or any other hacks) are put inside an IE-only stylesheet, and referenced via conditional comments in the mark-up, the issue of compliancy does not apply. They are effectively off the radar.

    And remember too that the “star” selector actually validates correctly against the w3c css 2.1 standard.

  6. I’m pretty certain that after much spec searching, the conclusion we came to at work was that while _{property} and *{property} are not valid property names, the error handling part of the CSS specification means that standards-compliant browsers will ignore these properties.

    In my opinion use of the star and underscore hacks is relatively safe, and there’s are performance and maintenance benefits to keeping all related styles together rather than separating IE stuff out into a conditionally-linked stylesheet.

  7. Andrew, your approach would result in an extra HTTP request for IE-browsers, pulling in two external stylesheets. That adds to the perceived page-load times, plus a needless extra request on your webservers. For what? For the sake of having one CSS file pass a validation test, while another one still fails?

    Sure, you can refactor the conditional comments approach so that there are two complete stylesheets, one with and one without the IE stylesheet hacks. That only then affects the success rate of caching a stylesheet. (That too can be refactored into one single stylesheet that also contains the IE stylesheet hacks – which is back to where we started)

    In the long run, it would be better to have an invalid stylesheet that’s invalid in known, documented and accepted ways. Validation is a nice milestone in the destination for delivering a high quality site. It does need to be weighed with other factors, and determine the most effective compromise.

  8. 8 Jared - Regina Web Design says: February 20th, 2012 at 4:14 am

    Thanks for the tip. I’ve made it to 2012 without having to use hacks, and on the very last site that we’re doing IE7 support for I needed one. Too bad.

Add a comment or reply





Copyright © 2007 - 2009, isolani