Practical advice for building websites with web standards
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:
_width: 100%
). This style-rule is seen by IE6, but not IE7.*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:
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).
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.
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.
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”.
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).
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.
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.
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.
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.