[Biffy]

It is quite common to send different CSS to different browsers because of various bugs. On rare occasion, especially very complex jobs, I need to target different styles to many different browsers. Sometimes it's just too time-consuming to work out fully cross-browser code in a single stylesheet. In some cases it's a lot faster to just write another stylesheet.

I don't want to send 4 stylesheets to all browsers and use the rules of precedence, the way it's done with IE conditional statements. Here's my solution.

In Miva global head tag put this stylesheet link:

<link rel="stylesheet" href="lost.css" type="text/css" />

This is a link to a stylesheet named "lost.css". It is named that because it doesn't exist! Someone lost it! There is no stylesheet called lost. Some of you probably think I'm an idiot for doing something so ridiculous. But wait! It gets worse! Meaning it gets better, if you catch my drift.

What we want to do is have some other stylesheet sent that is determined by browser and operating system. I do that with my trusty sidekick, htaccess. This is a server-side script so it works for all browsers.

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} Safari 
RewriteCond %{HTTP_USER_AGENT} "Win" 
RewriteRule lost.css safari.css [L] 
RewriteCond %{HTTP_USER_AGENT} Safari 
RewriteCond %{HTTP_USER_AGENT} "Mac" 
RewriteRule lost.css safari.css [L] 
RewriteCond %{HTTP_USER_AGENT} Gecko 
RewriteCond %{HTTP_USER_AGENT} "Win" 
RewriteRule lost.css compliant.css [L] 
RewriteCond %{HTTP_USER_AGENT} Gecko 
RewriteCond %{HTTP_USER_AGENT} "Mac" 
RewriteRule lost.css compliant.css [L] 
RewriteCond %{HTTP_USER_AGENT} Gecko 
RewriteRule lost.css compliant.css [L] 
RewriteCond %{HTTP_USER_AGENT} "MSIE 7" 
RewriteCond %{HTTP_USER_AGENT} "Win" 
RewriteRule lost.css ie7.css [L]
RewriteCond %{HTTP_USER_AGENT} "MSIE 6" 
RewriteCond %{HTTP_USER_AGENT} "Win" 
RewriteRule lost.css ie6.css [L] 
RewriteCond %{HTTP_USER_AGENT} "MSIE 5.5" 
RewriteCond %{HTTP_USER_AGENT} "Win" 
RewriteRule lost.css ie6win.css [L] 
RewriteCond %{HTTP_USER_AGENT} "MSIE 5" 
RewriteCond %{HTTP_USER_AGENT} "Win" 
RewriteRule lost.css ie6.css [L] 
RewriteCond %{HTTP_USER_AGENT} "MSIE 5" 
RewriteCond %{HTTP_USER_AGENT} "Mac" 
RewriteRule lost.css ie6.css [L] 
# older browsers 
RewriteCond %{HTTP_USER_AGENT} "Win" 
RewriteRule lost.css ie6.css [L] 
RewriteCond %{HTTP_USER_AGENT} "Mac" 
RewriteRule lost.css compliant.css [L] 
# anything that we do not pickup 
RewriteRule lost.css compliant.css [L]

Put .htaccess in the same directory with all the stylesheets and give it 755 permissions. Don't forget the leading period.

In this example I am sending 4 different stylesheets to various browsers. I could add more browsers and stylesheets if I needed to. There's even a default for browsers I'm not targeting.

Hope this helps on those really tough CSS jobs.