Serving CSS to Appropriate Browsers
One of the questions that gets asked less often now is how do we handle those browsers which are so old and sad, the one’s our grandmother’s have perched on their crocheted tablecloths? Don’t they screw up when they come across a complex CSS layout? And, if that’s so, then what do we do to incorporate these users into our larger plan for a better, more accessible and practical web experience? This is particularly important for government websites and anyone having to provide usable content to very old browsers, either by law, necessity or policy. In common speak, Netscape 4 and other old browsers crap up your fantastic layout! No big surprise.
The short answer is we create a base case stylesheet that older browsers can understand. Something unstrikingly acceptable to even the most outdated browsers out there. And, we hide our advanced stylesheet behind a variant of the @import stylesheet rule.
Rather than explaining the everything and the all of @import I’ll simply refer to the CSS-Discuss Wiki’s page on @import and let you do the general reading yourself (because I’m lazy - coders are lazy by nature). Depending on the syntax you use to import your stylesheet various browsers will be excluded from displaying your more complex layout.
So the trick really is simple. Older browsers get the first “basic.css” stylesheet and the newer browsers get both. Voila. Progressive enhancement and graceful degradation at work. The more advanced stylesheet overrides any unwanted style rules from the basic.css file.
<link rel="stylesheet" type="text/css" href="basic.css" />
<style type="text/css"> @import url("advanced.css"); </style>
[Note: 5 July, 2008. Oops apologies for having typos in that original code snippet, shows never to post and run. Bugger. Fixed now. Apologies.]
Importing stylesheets gets a lot more interesting than this example but its a good strategic jumping off point for your CSS strategy. The BBC.co.uk has a page on Cascading Style Sheets (CSS) Standards v1.1 which offers an overview of how they approach the responsible use of Cascading Stylesheets. All organisations might think of producing similar documents for distribution and guidance internally. BBC.co.uk seem to do this well. If you search their site they have all sorts of design policy and guidance documents of a particularly high quality.
July 5th, 2008 at 1:10 pm
Steven (me): Why was there a typo in the code snippet?
Steven (other_me): Because I’m dumb, was tired and was required to rush into the loungeroom (Friday night).
Steven (me): But it was just a plain stupid typo in the snippet to put a closing style tag after a link tag. Doesn’t this make you a bit embarrassed?
Steven (me): Aww its the weekend, Stevie.
[inspired by Stevie and Stevie and Stevie and Stevie and Stevie and of course a special pat on the back for Stevie from the Clone House]
August 2nd, 2008 at 3:42 pm
[...] use @import to call your main stylesheet (sitewide.css) for more advanced browsers using the screen media [...]