Les raccourcis d'écriture CSS

Vous êtes un pro, ou un novice du CSS... Mais saviez-vous qu'il était possible d'utiliser certains raccourcis d'écriture ? En voici quelques uns qui vous seront bien utiles pour réduire la taille de votre fichier CSS !

Les couleurs

La façon la plus commune de spécifier une couleur dans une feuille de style CSS est d'utiliser la notation hexadécimale : un # suivi de six caractères. Vous pouvez aussi utiliser des mots-clés (ex : white) ou la notation RGB mais celles-ci ne sont pas concernées. Un fabuleux raccourci, dont peu de personnes connaissent l'existence, permet de raccourcir la notation à 6 caractères en une notation à 3 caractères seulement. C'est simple, il suffit d'enlever 1 caractère de chacune des 3 paires de caractères de votre code couleur :

Ainsi #00000 devient #000 ; #336699 devient #369.

Bien entendu, celà ne fonctionne que si les caractères de chacune des paires sont identiques.

Les dimensions des blocs

Les propriétés qui affectent les dimensions partagent une même syntaxe : la propriété parente suivie par une à quatre valeurs séparées.

• propriété:valeur1;
• propriété:valeur1 valeur2;
• propriété:valeur1 valeur2 valeur3;
• propriété:valeur1 valeur2 valeur3 valeur4;

Le côté du bloc que la valeur concerne dépend du nombre de valeurs spécifiées :

• Une valeur : tous les côtés
• Deux valeurs : top and bottom, right and left
• Trois valeurs : top, right and left, bottom
• Quatre valeurs : top, right, bottom, left

Afin de vous en rappeler facilement, voici un petit moyen mnémotechnique : penser à une horloge ! Le 12 correspond à la valeur du haut, le 3 à droite, le 6 au bas, et le 9 à gauche. Thinking of the face of a clock is an easy way of remembering which side each valeur affects. Start at 12 o’clock (top), then 3 (right), 6 (bottom), and 9 (left).

Les marges : Margin et padding

Utiliser un raccourci de ces deux propriétés peut vous permettre de gagner un espace non négligeable. Par exemple, pour spécifier différentes marges pour un bloc vous pouvez utiliser ça :

1. margin-top:1em;
2. margin-right:0;
3. margin-bottom:2em;
4. margin-left:0.5em;

Mais il est plus efficace d'utiliser celà :

1. margin:1em 0 2em 0.5em;

Cette syntawe est aussi utilisable avec la propriété padding

Bordures

Les bordures sont devenues plus complexes depuis qu'elles peuvent avoir un style et une couleur. Afin de donner à un élément une bordure noire solide tout autour, vous utiliserez les propriétés suivantes :

1. border-width:1px;
2. border-style:solid;
3. border-color:#000;

Vous pouvez donc plus efficacement utiliser la propriété parente border ainsi :

1. border:1px solid #000;

Vous devez toujours spécifier les bordures de cette façon :

1. border:width style color;

La plupart des navigateurs ne s'inquiètent pas de l'ordre et conformément aux spécifications ils ne devraient pas. Mais rien ne vous empêche de respecter la spécification du W3C ;et il y a toujours une chance pour qu'un navigateur soit très strict quant à l'interprétation de la propriété border.

Une syntaxe similaire peut-être utilisée avec les propriétés border-top, border-right, border-bottom, and border-left afin de définir chaque côté d'un bloc. Vous n'avez pas à spécifier les 3 valeurs. Chaque valeur omise est réglé sur sa valeur par défaut. Les valeurs par défaut sont medium pour la largeur (dépend du navigateur), none pour le style (à changer si vous souhaitez qu'elle soit visible), et la même valeur de couleur du bloc pour la couleur.

Les propriétés border-width, border-style, et border-color sont utilisés dans l'exemple plus haut peuvent être aussi utilisées en tant que propriétés raccourcies.properties used in the first border example above are themselves shorthand properties.

Arrière Plan (Background)

Une autre propriété raccourcie très utile : background. Au lieu d'utiliser background-color, background-image, background-repeat, background-attachment, et background-position pour spécifier le fond d'un élément vous pouvez n'utiliser que background. Ainsi les propriétés :

1. background-color:#f00;
2. background-image:url(background.gif);
3. background-repeat:no-repeat;
4. background-attachment:fixed;
5. background-position:0 0;

Peuvent être condensées en une seule :

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

Comme la propriété border, l'ordre de valeurs n'est pas supposé poser problème. Ainsi il est préférable de respecter les spécifications du W3C :

1. background:color image repeat attachment position;

Rappelez vous que lorsque vous donnez deux valeurs à une position elles doivent apparaître ensemble. Lorsque vous utilisez des dimensions ou des valeurs relatives, déclarez toujours la valeur horizontale en premier.

Tout comme les bordures, vous n'avez pas à spécifier toutes les valeurs. Si une valeur est omise elles prendront automatiquement les valeurs suivantes :

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

Polices de caractères (Fonts)

Comme la propriété background, la propriété font peut-être utilisée pour en combiner plusieurs telles que :

1. font-style:italic;
2. font-variant:small-caps;
3. font-weight:bold;
4. font-size:1em;
5. line-height:140%;
6. font-family:"Lucida Grande",sans-serif;

En une seule :

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

	Web www.nouky.net