There are a lot of hacks out there dealing with getting specific CSS files to load on a per browser basis. I wanted to try a different approach. I wanted a way to specify the default or standard CSS that all pages will use as well as a way to specify the browser specific override file. There are real easy ways to do this in server side programming languages like PHP, as well as client side approaches in JavaScript, but I wanted to develop a tag only client side approach that was clean.
<html>
<head>
<!--default-->
<link type="text/css" rel="stylesheet" href="style/style.css" />
<!--ie-->
<!--[if IE 6]><link type="text/css" rel="stylesheet" href="style/override/ie6.css" /><![endif]-->
<!--[if IE 7]><link type="text/css" rel="stylesheet" href="style/override/ie7.css" /><![endif]-->
<!--[if IE 8]><link type="text/css" rel="stylesheet" href="style/override/ie8.css" /><![endif]-->
<!--[if IE 9]><link type="text/css" rel="stylesheet" href="style/override/ie9.css" /><![endif]-->
<!--chrome/safari-->
<link type="text/css" rel="stylesheet" media="screen and (-webkit-min-device-pixel-ratio:0)" href="style/override/webkit.css" />
</head>
<body>
<div id="ie6">
Internet Explorer 6
</div>
<div id="ie7">
Internet Explorer 7
</div>
<div id="ie8">
Internet Explorer 8
</div>
<div id="ie9">
Internet Explorer 9
</div>
<div id="webkit">
Webkit
</div>
</body>
</html>
The approach is simple yet effective, specify the CSS standard styles in the style.css file. If there are any problems in a specific browser, modify the browser specific override CSS file.
This example has all div tags hidden in the style.css, but has them displayed in each browser override file. For example, if you are using IE8, then the ie8.css override file is used which contains:
#ie8 {display: block;}
The files used in this example are available for download and use:
0 Comments