Hiding Stylesheets from Old Browsers

by Joe Gillespie — May 1, 2003

As I mentioned in the introduction, older browser that don't understand CSS-P are on their way out but some people hang onto them like comfortable old shoes. As they were introduced when CSS was in its infancy, they know about some style features but not others.

The rest of this site works just fine in Netscape 4.x because I've used tables for layout and the style sheet only provides the type specs. This new layout uses the more recently introduced 'positioning' possibilities of CSS and in the old browsers, falls apart because there is no 'skeleton' to hold it together.

To get around this problem, some designers use so-called 'browser sniffers' – JavaScript routines that try to identify the users' browser and then serve up appropriate style sheets or alternative pages. This technique is very unreliable, partly because it is never implemented thoroughly enough and partly because some browsers pretend to be others.

If you whip away the 'skeleton' of a well-formed CSS page, you should be left with just the content of the page without any styling or positioning, but still perfectly readable. If you removed the tables from a table layout, the order of the previous cell contents would be scrambled and it could be difficult to make any sense of the page at all.

To hide the style sheet for this page from Netscape 4.x and the like, I have added a 'filter'. The style sheet linked to from this page only contains one line:-

@import "newstyles.css";

Netscape 4.x can't make any sense of this at all and promptly gives up but newer, smarter browsers know to follow the link to another style sheet – "normalstyles.css" – which provides the 'real' information. Netscape 4.x users therefore see the unstyled content, unlovely as it is, but readable.This link provides variations on the @import directive that filter otherolder browsers.

Now, the side benefit that I alluded to in the introduction is that GoLive doesn't understand this double-hop linking either. It displays the unstyled page just like Netscape 4.x does, making the 'content' much easier to edit. Trying to edit a CSS-P page in the current version of GoLive is a frustrating experience.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float