CSS conditionels avec symfony 1.4

. lecture : 1 minute

Quand on crée un site internet, il arrive de vouloir fournir aux anciens navigateurs une feuille de style (CSS) particuliére. La syntaxe est alors la suivante :

<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]-->

La syntaxe est incluse dans des balises HTML de commentaire, <!-- … -->, ainsi les navigateurs encore plus vieux ignoreront ces commandes.

Les autres navigateurs, en revanche, vont lire les conditions if, et appliquer le fichier CSS demandé. En utilisant ce format, vous pouvez remplacer IE par Gecko (pour Firefox), Opera, Webkit (Chrome & Safari), etc. Vous pouvez aussi utiliser différents comparateurs, tels que gte (greater than or equal, ≥), eq (equals, =), ou même ! (not, ≠).

Bref ! Comment faire ça dans symfony, qui gère lui-même l'inclusion des feuilles de style ? Et bien je viens de le découvrir, on peut ajouter des conditions directement dans view.yml :

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

Voilà qui est sympathique, même si personellement je n'utilise pas de conditions, tous les navigateurs reçoivent la même feuille de style, et les gens encore sur IE 6 ne méritent pas de voir mon site, na.