Conditional CSS with symfony 1.4

. lecture : 1 minute

Sometimes when you create a website, you want to serve to older browsers a different style sheet (CSS). The way to do so is the following :

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

The syntax is included in HTML's comment tags, <!-- … -->, this way even older browsers will just ignore them.

Other browsers, on the other hand, will read the if conditions, and use the CSS file you've indicated. Using the same format, you can switch IE with Gecko (for Firefox), Opera, Webkit (Chrome & Safari), etc. You can also use different comparators, such as gte (greater than or equal, ≥), eq (equals, =), or even ! (not, ≠).

Anyway ! How do you do that with symfony, which handles itself the inclusion of the style sheets ? Well I just found out, you can add conditions right in view.yml :

stylesheets: [normal, ie6: { condition: eq IE 6 }]

This is nice, even though I do not use conditions, every browser receives the same style sheet, and people still on IE 6 don't deserve my site, so there.