jetboy_70 - 11:19 am on Sep 10, 2004 (gmt 0)

Link style sheets in like this:

<script src="/js/function.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/lo.css" type="text/css" />
<style type="text/css">
@import "/css/hi.css";
</style>
<!--[if IE]>
<style type="text/css">
@import "/css/ie.css";
</style>
<![endif]-->

If you link in your CSS after your JavaScript (or any other script) you can avoid a 'flash of unstyled content'.

lo.css will be applied to all browsers, including pre-version 5 ones like Netscape 4 and Internet Explorer 4.

hi.css will be applied to version 5 and later browsers only.

ie.css will be applied to PC flavours of IE5, 5.5 and 6 only.

The only browser that this system won't pick up correctly is IE4.5 on the Mac, which will read the hi.css styles. This browser is as good as extinct though.

Having multiple stylesheets like this becomes more important when you're working with floats layouts, where a lot of stuff just will not work in pre-version 5 browsers. lo.css allows you to produce a minimally styled 'text only' version of your site for backwards compatibility. These style declarations can be overwritten in hi.css for current browsers.

The conditional comment around ie.css can be changed to <!--[if IE 5]> or <!--[if IE 6]> if needed, but will allow you to apply styles just to specific IE versions with having to resort to hacks.

[edited by: SuzyUK at 10:11 am (utc) on Sep. 13, 2004]