Universal IE 6 CSS
Take a look at the wonderful world of ‘universal IE6’.
Andy Clarke has recently caused controversy with his recent solution to ‘the IE6 problem’: Universal Internet Explorer 6 CSS. Just for a bit of fun, I thought I’d try applying it to this page to see how it might work if I were to adopt it.
Andy doesn‘t give specific details on recommended usage, but I’ve run with the assumption that his stylesheet is intended to completely replace all others in the event of an IE6 user agent. So, I’m removing my main stylesheet using javascript and using ie6.0.2.css for all browsers. Note, however, that I’ve only tested this in Firefox so far — ironically, it may look different in IE!
Overall impression
In general, the display is pretty workable, and acceptable. No-one should have any trouble reading the article or using the navigation. It looks a bit better than the default browser styling, although there’s a sense of ‘disable CSS’ about it. Going from an elastic layout to a liquid one is slightly jarring for me, but I haven’t got the perfect layout anyway, so I’ll let that one slip. The leading’s a bit ‘tight’, but the spacing and overall look is simple and readable.
How good is your markup?
This technique relies very much on your markup being ‘good’. It’s unlikely that you’ll be able to drop the CSS file in and be done with it: a few tweaks will probably be required by 99% of you who wish to use this. In the interests of full disclosure, here are the additions I’ve had to make:
.intro-drop-cap { float: left; }
label { display: block; margin-top: 1em; }
The intro-drop-cap is only required because that style currently gets applied via javascript, since it needs to move a single character around the DOM. Fair enough, with a bit more time I’d simply disable that part of the JS from IE6.
The label issue is a bit trickier: the markup in my comments form isn’t the greatest. The example universal ie6 markup encloses each label/input combination in a paragraph element, something I’ve seen before but with which I don’t entirely agree. A form element is, after all, not exactly a paragraph. Alternatives such as tables and lists are pretty common, but I’m not sure any element is really suitable.
This raises an important point though: disabling CSS or using a cut-down stylesheet can expose markup issues. Certainly, for those people without CSS, the display of my comments form should be much better than it is. The navigation could do with some improving, too.
Resets and basic styles
Note also that code elements are given a block display, which gets pretty annoying, pretty quickly! As far as I’m concerned, this is an error in Andy’s stylesheet: as per the spec ‘code’ elements are ‘phrases’ and should therefore be left inline.
The nature of the reset part of the stylesheet also bugs me, in particular:
em { font-style: inherit; }
...
em {
font-style : italic; }
There’s an argument that this is for efficiency (if you’ve looked at the stylesheet in detail, you should know what I mean) but zero’ing out the default styles, then reapplying them has always felt wrong to me.
Conclusion
I’m only dealing with the issue of Andy’s chosen styles here, not the bigger concept. To be honest, I’m still a bit sceptical as to whether or not giving IE6 users such an experience is the way to go. I’m definitely in favour of this approach over ie6update, with which I totally disagree. And I really despair over the amount of time wasted fixing IE bugs.
In general, then, the technique is probably sound, depending on your audience. And you might well wish to create your own IE6 stylesheet rather than using Andy’s. But I think the key concept — hide fancy layouts from IE6 — is probably going to be a winner in the medium-term.
Comments
Five Minute Argument said:
Kudos must go to Andy — he’s definitely done his homework on this one. I’m pretty certain that *this* page will look much better on IE6 than the rest of my site; I purposefully don’t cater for IE6 anywhere else.
Fri 22 May 2009 06:55
SvenDigital said:
| Note, however, that I've only tested this in Firefox so far — ironically, it may look different in IE!
Actually, you (or Andy) about got it right — I don’t see a real difference (on this page, anyway) between FF3, Chrome and IE8 — even compatibility view made no difference! I may actually use this on my site..