created: October 08, 2004 - modified: June 10, 2008

Problems addressed

  • How to Use Different CSS Style Sheets For Different Browsers
  • Dealing with Inconsistencies in how Cascading Stylesheets are rendered by different browsers
  • Older browsers crashing when trying to load and render modern stylesheets

Solution

I have used conditional comments and avoided CSS hacks as much as possible to prevent future compatible issues.

I have found that the majority of browsers support font, colour, and absolute positioning fairly consistently, so I created a shared.css that contains features that will work with all browsers, with style sheets below extending the shared stylesheet as required (@include:url...).

00 <style type="text/css">
	@import url('/_site/basic.css'); // must be single quotes
	</style>
01 <!-- WIN IE Style Sheets -->
02 <!--[if IE]>
03  <![if gte IE 5.5]>
04   <![if gte IE 7]><link rel="stylesheet" 
	type="text/css" media="screen,projection" 
	href="/_site/ie_win_7x.css" />
	<![endif]>
05   <![if lt IE 7]><link rel="stylesheet" 
	type="text/css" media="screen,projection" 
	href="/_site/ie_win_5.5x_6x.css" />
	<![endif]>
06  <![endif]>
07  <![if lt IE 5.5]>
08   <link rel="stylesheet"
	type="text/css" media="screen,projection" 
	href="/_site/ie_win.css" />
    <![endif]>
09 <![endif]-->
10 <!-- Everything else -->
11 <!--[if IE]><![if !IE]><![endif]-->
12  <!-- standard : Sam Foster's comment hack (hide from MAC IE) -->
	<style type="text/css" media="screen,projection"> 
	/*\*/ @import url("/_site/standard.css") all; /**/
	</style>
13  <!-- MAC IE : Tantek Çelik comment hack (only for MAC IE) -->	
	<style type="text/css" media="screen,projection">
	/*\*//*/ @import url("/_site/ie_mac.css"); /**/
	</style>
14 <!--[if IE]><![endif]><![endif]-->
15 <!-- Netscape 4.x Style Sheets (because I can) -->
	<script type="text/javascript">
	<!--//--><![CDATA[//><!-- 
16 if(document.layers) { 
	document.write(unescape('%3CLINK%20href%3D%22
	/_site/netscape-4x.css%22%20rel%3D%22
	stylesheet%22%20type%3D%22text/css%22%20/%3E')); }	
17 //--><!]]></script>
  • Basic CSS: line 0
    • uses the @import to hide the style sheet from Netscape 4.x browsers
    • this is the only stylesheet loaded by WIN IE 4.x and MAC IE 4.x
  • Windows IE: lines 1 to 9
    • used downlevel-hidden conditional comments to hide WIN IE style sheets from non-WIN IE browsers and WIN IE 4.x or less
    • used link instead of @import to prevent the IE rendering issue (annoying flash of unformatted content)
    • Lines 3 to 5. I like to use PNGs with alpha transparencies in my layouts and support for PNGs in WIN IE has be 'unique' to put it mildly. Before WIN IE 5.5 there was no support, WIN IE 5.5 and 6.x provided support using proprietary 'filters', and WIN 7.x finally provided native support, so I had to create seperate stylesheets for these 3 ranges, e.g. pre 5.5, 5.5 to 6.x, and 7.x
  • Other Browsers: lines 10 to 14
    • used downlevel-revealed conditional comments to hide all non-WIN IE stylesheets from WIN IE 5.x + browsers. (lines 11 to 14)
    • used CSS hacks to filter for MAC IE 4.x/5.x and WIN IE 4.x, luckily these are dead browsers, so this isn't going to be fixed, but there may be an issue with one of these hacks if a new browser is release with the same bug, but the risk is low
  • Standard: line 12
    • used Sam Foster's comment hack to hide my standard style sheet from IE Mac,
    • used the media 'all' hack to hide from WIN IE 4.x.
    • used the url double quote bug to hide from IE MAC 4.x.
  • MAC IE: line 13
    • used Tantek Çelik comment hack to hide IE Mac stylesheets from all other browsers.
    • used the url double quote bug to hide from IE MAC 4.x.
  • Netscape 4.x: line 15 to 17
    • used @import to hide non-WIN IE stylesheets from Netscape 4.x
    • used Javascript to load the stylesheet for Netscape 4.x (Netscape 4.x only renders stylesheets when Javascript is turned on).

Background

Fortunately browsers are moving to more consistent implimentation of standards (e.g. IE 7), unfortunately not everone has updated to the latest versions.

The browser wars are ending, but there are still the old browsers of the 90s and early 2000s that some people still use, and the bane of my existence IE for the Mac (come on Mac people, switch to Safari or Firefox already).

This all started when for the weatheroffice website I had to find a way to use CSS for layouts, avoid javascript, provide static pages (no server side detection of browsers allowed due to load on the servers), and pass W3C CSS, and XHTML strict verification.

The end result is that my standard.css stylesheet is the default stylesheet for my site, with the other non-standards browsers recieving what they need to deal with their 'quirks'.