Let's face it, all browsers are not created equal. Some are actually quite atrocious in their disregard for web standards. Unfortunately, some of those browsers are still in use today.. (you know who you are, IE6). Whether or not to support older browsers like IE6, whether to force visitors to upgrade or gracefully degrade their experience, this is a topic for another day. In any case, if you want to serve a special stylesheet for a specific browser, there are several methods to use.

Conditional Comments

A large majority of browser compatibility issues concern Internet Explorer's rendering quirks. IE6 is the biggest offender that is still in active use, but IE7 and IE8 are not without issue. Fortunately, Microsoft has given us an out- a markup technique that gives Internet Explorer (5.5 and up) special instructions that other browsers ignore (an admission of guilt?). These are conditional comments.

To properly employ conditional comments, an 'if' statement is embedded within a standard HTML comment. Internet Explorer interprets this statement while other browsers ignore it. Standard HTML markup, such as a css file link, can be placed within this conditional expression.

There are two types of conditional comments. The following syntax, called downlevel-hidden is parsed in IE, but ignored in other browsers. (this is the most common use)

<!--[if IE]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Conversely, the following syntax, called downlevel-revealed, is purposely ignored by IE, and parsed by other browsers.

<![if IE]> 
 <link href="not_ie.css" rel="stylesheet" type="text/css" />
<![endif]>

While downlevel-revealed comments are properly understood by IE, they are flagged as invalid markup by some validation services. As such, it is advisable to use downlevel-hidden only.

Fortunately, there are several valid expressions that can be evaluated. You can even use operators. Some examples are:

• [if IE] - for all versions of IE
• [if lte IE 6] - for versions less than or equal to IE 6
• [if lte IE 5.5] - for versions less than or equal to IE 5.5
• [if IE 7 - for IE 7]
• [if WindowsEdition] - for IE8 on Wndows 7
• [if !IE] for everything else but IE
• [if (IE 6)|(IE 7)] for IE6 or IE7
• [if (gt IE 5)&(lt IE 7)] for everything greater than IE5 and less than IE7

Conditional comments are probably the most widely used technique. However, if you need more complex logic, there is another way:

PHP and Browser Agent

Its possible to detect the browser type using a little bit of PHP. Every browser leaves a footprint during its visit to your server, and part of that footprint is an http header stored as 'HTTP_USER_AGENT' in the array $_SERVER. This identifies the type of browser that has made the request to view the page. We can check the value of that header, and manipulate our HTML with PHP.

For example, we could check for the string 'MSIE 6' in the user agent, and set a variable accordingly:

<?php
  if (isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)) {
    $browser='ie6';
  }
?>
 

Next we can choose to print a stylesheet link based on the above outcome:

<?php if ($browser == 'ie6'): ?>
	<link rel="stylesheet" href="ie6.css" type="text/css" />
<?php endif; ?>

This example is simple enough to accomplish with conditional comments, however if you need more information about the browser, version, operating system, etc, then examining the header may be the best method. Plus, you can use PHP logic to make a complex set of instructions around brower detection. Keep in mind, however, that the http headers are not fixed in stone- some browsers allow you to change the values in HTTP_USER_AGENT. (Anyone who is changing their user agent will probably understand why the page renders incorrectly, though!)

More information about user agent strings can be found at useragentstring.com.

And while you're on the subject, check out "History of the Browser Agent String"