Quatre & Trois

Web, logiciels, langue française et divers.

jeudi, 12 avril, 2007, 04:00

Optimisations CSS

Après l’optimisation PHP, l’optimisation des feuilles de style CSS.

Les attributs peuvent être regroupés :
h1,h2,h3{color:#000}

Même chose que :
h1{color:#000}
h2{color:#000}
h3{color:#000}

L’unité de mesure des valeurs nulles est facultatif :
height:0

Même chose que :
height:0px

Le point-virgule à la fin d’un bloc de déclaration est facultatif :
body{font-family:Verdana,Arial,Helvetica,sans}

Même chose que :
body{font-family:Verdana,Arial,Helvetica,sans;}

Les valeurs inférieures à un peuvent ne pas être précédés du zéro :
font-size:.7em

Même chose que :
font-size:0.7em

Les sélecteurs universels sont facultatifs (mais conseillés) avant les classes, IDs et les sélecteurs d’attribut :
#sidebar,.sidebar,[lang=fr]{background:#000}

Même chose que :
*#sidebar,*.sidebar,*[lang=fr]{background:#000}

Les espaces blancs avant et après : les deux-points des propriétés; les valeurs importantes; les combinateurs; les URLs; les virgules entres les nom de polices; etc. sont facultatifs :

*>.class{
font-family:Verdana,Arial,Helvetica,sans!important;
background:url(test.png);
quotes:"\AB\A0""\A0\BB""\2039\A0""\A0\203A"
}

Même chose que :

* > .class {
font-family : Verdana, Arial, Helvetica, sans !important ; 
background : url( test.png ); 
quotes : "\AB\A0" "\A0\BB" "\2039\A0" "\A0\203A" 
}

Les guillemets (simples ou doubles) sont inutiles dans les noms de polices; URLs et sélecteurs d’attributs lorsqu’ils ne contiennent pas d’espace :

[lang=fr]{
font-family:Verdana,Arial,Helvetica,"Trebuchet MS",sans;
background:url(test.png)
}

Même chose que :

[lang="fr"]{
font-family:'Verdana',"Arial","Helvetica","Trebuchet MS",sans;
background:url('test.png')
}

La suite dans le prochain billet.