CSS Conditional Comments

by admin on February 2, 2009 · 2 Comments

A common practice among designers, specially when it comes to cross-browser sites, is the use of Conditional Comments (Statements).

Conditional Statements give you the control you need to select and load an given stylesheet depending merely on the browser the user is using or an specific version of it.

Although some sites say that Conditional Statements are only meant to work with IE, today Opera and Firefox reads them too.

Here is a quick example of how they work:

<!--[if IE]>

IE will do something here

<![endif]–>

Where does it go?

Conditional Statements belong in the Head of each HTML document. Normally below meta data but before the closing Head tag (’</head>’)

Example:

<HTML>

<head>

<title>Some name here </title>

<!-- [start condition]>

<link rel=”stylesheet”  type=”text/css” href=”"ilename.css”  media=”all” />

<![end condition]–>

</head>

Targeting a specific version or IE

Here is where it gets tricky. Some sites, such as quirksmode.org (which I use all the time!) describe this approach as a simple call to a version such as 5.5 or 7.0 when in really, this will not work. Even Microsoft posted an article which explains the lack of IE to identify a version while using Conditional Statements.

So it can’t be done? wait, it can. Simply add 4 decimals to your condition in order to get it to work.

Example:

<!--[if IE 5.5000]>

Only if IE is version 5.5 you will see what you put in here

<![endif]–>

Targeting If is NOT IE

Wondering how we can check if the browser is Opera or Firefox? well, is simple too.

Example:

<![if !IE]>

IE will do something here

<![endif]>

NOTE: Notice that the begging and the end of the condition is a little different, so don’t just copy and paste. When checking if the browser is not IE, is important you omit the dashes.