Raccourcis d'écriture

Les raccourcis peuvent être utilisés pour définir plusieurs propriétés en une seule déclaration, au lieu d’utiliser plusieurs déclarations séparées pour chaque propriété individuellement. Comme vous allez le voir, les raccourcis d’écriture permettent de réduire considérablement la taille des fichiers CSS.

Assez peu de raccourcis sont disponibles – les spécifications CSS du W3C concernant background, border, font, list, margin, outline et padding apportent des précisions à ce propos.

Couleurs

La manière le plus courante de spécifier une couleur est d’utiliser la notation hexadécimale : un dièse (#) suivit de six digits. Vous pouvez aussi utiliser la notation RVB, qui est légèrement plus compréhensible, mais nettement plus lourde. Un sympathique raccourci, que beaucoup ne connaissent pas, vous permet d’omettre le second digit de chaque paire hexadécimale :

css
color: #66ff00;

Devient :

css
color: #6f0;

La précision apportée par ces seconds digits est bien souvent dérisoire étant donné la multiplicité des rendus graphiques.

Contours (border, margin & padding)

Les propriétés qui définissent les contours(border, margin, padding) ont tous la même syntaxe.

css
propriete:valeur1;                           /* tous les cotés */
propriete:valeur1 valeur2;                   /* haut & bas | droite & gauche */
propriete:valeur1 valeur2 valeur3;           /* haut | droite & gauche | bas */
propriete:valeur1 valeur2 valeur3 valeur4;   /* haut | droite | bas | gauche */

Par exemple, le code suivant applique une marge de 30 pixel en haut, une marge automatique sur les côtés, et aucune marge en bas.

css
margin:30px auto 0;

Notez que 0 n’a pas besoin d’unité, puisque 0em = 0px = 0% = 0.

Bordures (border)

Les bordures sont plus compliquées depuis qu’on peut leur appliquer un style et une couleur. Pour définir une bordure noire de 1 pixel en trait plein, vous pouvez utiliser le code CSS suivant :

css
/* à éviter */
border-width:1px;
border-style:solid;
border-color:#000000;

Et de manière plus compacte, en utilisant un raccourci :

css
border:1px solid #000;

La syntaxe suivante est à privilégier :

css
border:width style color;

Pour définir une taille différent pour chaque coté, il suffit de spécifier plusieurs valeurs pour border-width :

css
border-width:1px 2px 3px 4px;

Remplace parfaitement :

css
/* à éviter */
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

Si vous souhaitez appliquer des styles différents pour chaque coté, vous pouvez utiliser le même raccourci comme ceci :

css
border-right:1px solid #000;
border-bottom:1px solid #000;

Ou encore :

css
border:1px solid #000;
border-width:0 1px 1px 0;

Arrière-plans (background)

Un autre raccourci très pratique concerne l’utilisation de background. Au lieu d’indiquer séparément les propriétés background-color, background-image, background-repeat, background-attachment et background-position pour indiquer le style de l’arrière plan, vous pouvez toutes les condenser avec background :

css
/* à éviter */
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

Peut être réduit à :

css
background:#f00 url(background.gif) no-repeat fixed 0 0;

Comme pour les propriétés de border, l’ordre des valeurs de devrait pas poser de soucis. Néanmoins, il semble que certaines versions de Safari aient des problèmes lorsque les valeurs ne sont pas écrites dans le bon ordre. Il est donc préférable d’utiliser le même ordre que dans les spécifications du W3C :

css
background:color image repeat attachment position;

Comme pour border, vous n’êtes pas obligés d’indiquer toutes les propriétés ; si des valeurs sont absentes, les valeurs par défaut du navigateur sont utilisées.

Polices (font)

Comme pour background, font permet de combiner plusieurs propriétés en une seule ligne :

css
/* à éviter */
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

Peut être condensé en :

css
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Lorsque vous utilisez le raccourci font, vous pouvez ommettre toutes les propriétés à l’exception de font-size et font-family – vous devez toujours indiquer la valeur de celles-ci et dans l’ordre suivant :

css
font:style variant weight size/height familly;

Listes (list)

Le raccourci pour les listes ordonnées et non-ordonnées est list-style. Pour supprimer les puces, il faut normalement utiliser list-style-type, mais on peut faire comme ceci :

css
list-style:none;

Au lieu de :

css
/* à éviter */
list-style-type:none;

Mais vous pouvez aussi définir les propriétés list-style-position et list-style-image :

css
list-style:square inside url(image.gif);

Est un raccourci de :

css
/* à éviter */
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

Outline

La propriété ouline est très rarement utilisée parce qu’elle set mal supportée par les navigateurs actuels. Comme pour les propriétés précédentes, vous pouvez utiliser un raccourci d’écriture et remplacer

css
/* à éviter */
outline-color:#f00;
outline-style:solid;
outline-width:2px;

Par le code condencé :

css
outline:#f00 solid 2px;

Fichier réduit + Maintenance simplifiée

Tous ces raccourcis d’écriture sont compatibles CSS2. Si vous êtes en train d’écrire les feuilles CSS d’un site, et que vous faites une version sans les raccourcis et une version avec les raccourcis, vous remarquerez l’énorme différence de taille entre les deux fichiers (divisée par trois pour certains fichier !). Moins de code à taper veut dire aussi plus rapide à modifier.