CSS: conditional statement

Tweet

I usually write my CSS style sheets and check them with Firefox. It is probably due to fact that I use the Web Developer toolbar to check the resulting effects. When everything is exactly the way I want it, I start checking the result with IE, Chrome and Safari. Normally, there is no problems, however some times I find glitches, especially with IE 7 or IE 6.

The golden rule
First of all, let me tell you a thing that developers think it is some sort of golden rule. Every web site must look the same with any browser. That is not true anymore. Or, let me put this way, that principle is not an absolute rule anymore. With the introduction of CSS3 and HTML 5, developers have concluded that it is not a sacrilege to have different looks with different browsers. Do not jump to strange conclusion: I am not saying that we will have completely different sites for different browsers. However, we might accept that some particular effects (generated by CSS styles) would be visible only to users with updated browsers. For example, you may already know that IE9 will be available only for Vista and Windows 7. Win XP users will stay with IE8. Those users will eventually upgrade to a newer operating system, but in the mean time, they might not enjoy CSS3 or HTML5 new features. We will have to cope with that, it is a fact.

Different browser and different style sheets

Those considerations lead us to a simple conclusion. And this is not a good news. Developers will have to reconsider the structure of their web sites. In the past, it was quite common to have only one style sheet. Now that's not a good solution. Let me say that it was not a good solution in the past as well, however now it is almost to be avoided. Having more than one style sheet will help us in keeping the correct control on things, making upgrades and changes more easy to implement.
At the same time, if we need to deal with different browsers (and different interpretation of CSS styles), we will have the opportunity to use different style sheets.

Now the trick!

We all know that mainly the problem is with IE, specifically IE6 and IE7. To achieve our goal we can use Internet Explorer conditional comments. Now, what's that? You should know that if you put a condition inside a comment, Internet Explorer will - somehow - understand it, while other browsers just ignore it. Internet Explorer will recognize the syntax and so we can use those conditions to include different style sheets for different browsers.
As an example, we will assume you have different style sheets for different purposes. Then, you create a style sheet exclusively for IE6 and name it ie6.css. You can put the following code to conditionally load the style sheet:

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

The same you could do for IE7, just adding:

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

The above code will keep your style sheets separated. You will know where to put your hands when dealing with older browsers. In addition, it will make your page faster, in some situation where you do not need to include all the styles, but only what is really understandable by the target browser.

A note on conditional comments

I would like to point out a few things on conditional comments. First of all, they only work with Internet Explorer on Windows. Secondly, they work for Internet Explorer 5.0 onwards.
The easiest way to use conditional comments is:

<!--[if IE]>
  your code
<![endif]-->

The condition will exclude any browser other than Internet Explorer from the statement.
If you add the version after "IE", you can then use the condition filtering the browser version.

<!--[if IE 5]>
  your code
<![endif]-->

Then you can use two additional syntax to target different versions.
With lt(e) and gt(e) we can achieve different goals:
lt = less than
lte = less than or equal
gt = greater than
gte = greater than or equal

For example:

<!--[if gte IE 7]>
  your code
<![endif]--> 

The conditional comment will detect Internet Explorer 7 or greater versions.
Other operators that can be used with conditional comments are:
! = the NOT operator ([if !IE] means "If not IE")
( ) = Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& = the AND operator. Returns true if all subexpressions evaluate to true.
| = the OR operator. Returns true if any of the subexpressions evaluates to true.

And that is all. Happy coding!