As I explained in this article, the current web browser situation is a mess. Here’s the problem in a nutshell: Different browsers offer varying levels of support for modern HTML and CSS standards. In some cases, browsers may support certain standards, but in a different way than other browsers.
What does this mean to application developers? It means that your applications might look different across different browsers. It might look great in Chrome, decent in Firefox, but horrible in Internet Explorer 8. Since you can’t control your user’s browser choice, you’re faced with a daunting task: You must make your applications usable in all major browsers. Right now, that list includes:
- Internet Explorer 9
- Internet Explorer 8
- Internet Explorer 7 (still widely used, but on the way out)
I know, that seems scary at first glance. We have to build for 7 different browsers?! It’s not as bad as it looks. The top 4 browsers on that list are actually pretty similar. Chances are, your web apps will look nearly identical across each one. Of course, there are some exceptions, so it’s important that you test your applications across each one.
The problems lie in the bottom three browsers. Each version of Internet Explorer is frustratingly different, offering varying levels of support for HTML/CSS standards. To make matters worse, certain rules are rendered differently across each version. In other words, while each browser may offer support for a specific element, that element may appear different in each browser. If you’ve ever dealt with this problem, you know how frustrating it is to have 3 different browsers display a single element in 3 different ways.
How can you address this issue? I’ve already explained one approach (the CSS PIE method) in a previous article, which you can read right here. Today, I’d like to explain another method: Conditional Style Sheets.
What are Conditional Style Sheets?
Conditional style sheets are separate style sheets designed specifically for older Internet Explorer browsers. They are added to your web page/app using comment tags that are only readable by IE browsers. In other words, modern browsers will ignore them.
Why use Conditional Style Sheets?
As I mentioned earlier, older Internet Explorer browsers implement certain CSS elements differently than other browsers. While you can use any number of hacks to fix the problem, these hacks create messy code and could cause compatibility issues in future browsers. By creating conditional style sheets, you can set different rules for different versions of IE, without affecting any other browser. Additionally, when it’s finally time to stop supporting an older browser, you don’t have to go through your style sheet and remove all of the hacks. You only need to delete the conditional style sheet.
How do you create Conditional Style Sheets?
You create a conditional style sheet just like any other style sheet. I always create a main style sheet (main.css) along with an IE7 (main-msie7.css) and an IE8 (main-msie8.css) style sheet. What goes into those style sheets? When you come across a CSS rule that’s rendering differently in a certain version of IE, you add that rule to the IE-specific style sheet. To better understand this concept, take a look at the example below:
As you see in the example above, the “.tooltip” class has two different sets of styles: One for all browsers and one for the Internet Explorer 7 browser. The main style sheet is used by every browser, while the IE7 style sheet is only used when a user accesses the page using the IE7 browser. Let’s quickly run through the IE7-specific styles:
- You’ll notice that the IE7 style sheet uses a different background image. Technically, it’s the same image, only a different image type. IE7 browsers don’t handle “.PNG” images very well, so I had to make a “.GIF” version of that image for use on older browsers.
- You’ll notice that the IE7 style sheet has a different z-index. The z-index controls element stacking order. In other words, if two elements overlap, z-index specifies which element should be in front, and which should be in back. Without getting into all the details, IE7 often handles z-index differently than other browsers…which necessitates the IE7-specific z-index style.
- You’ll notice that the IE7 style sheet has a larger left-margin. This style is in place to ensure that IE7 displays the element in the same place that other browsers display the element. IE7 handles margins and padding differently than other browsers, which means you’ll frequently have to set an IE7-specific margin.
You might be wondering why the “.tooltip” element on the IE7 style sheet only has three rules on it, while the main style sheet has many. Here’s why: IE7 still pulls styles from the main style sheet, but uses the IE7-specific style sheet to override any duplicates. That way, I don’t have to duplicate everything onto the IE7 style sheet. The only styles I need to list on that sheet are those that differ from the main sheet.
How do you add a conditional style sheet to a web app?
Now that you know how to create a conditional style sheet, let’s get to the final point: How do you call a conditional style sheet in a web page or web app? It’s really quite simple. You call your conditional style sheets in the same place you call your main style sheet–the “head” section of your page. The only difference is, you must put them inside of comment tags and specify which version of IE each sheet applies to. Here’s an example:
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/main-msie7.css" /><![endif]--> <!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/main-msie8.css" /><![endif]-->
As you probably guessed, the bottom two sheets are for IE7 and IE8. Modern browsers will ignore those styles because they’re placed inside of a comment tag. However, older IE browsers (up to IE8) can read this syntax. In this way, we can tell older IE browsers to use a specific style sheet.
That’s it! Conditional style sheets really aren’t that hard to use, but will save you from hours of frustration. Using this method, you can take advantage of HTML5 and CSS3 styles in modern browsers, yet specify different styles for older browsers. Because conditional style sheets keep these styles separate, dropping support for an older browser is simple. For these reasons, conditional style sheets are (in my opinion) the best way to address browser differences and take advantage of modern standards.