Suite à mes deux premiers billet sur les bonnes pratiques CSS j’ai décidé d’en faire un plus détaillé sur la notation courte, dite “shorthand”.

• [Webdesign] Quelques bonnes pratiques CSS
• [Webdesign] Quelques bonnes pratiques CSS #2

La notation shorthand permet de gagner de la place dans vos fichiers CSS, mais pas seulement. Je trouve que le principale intérêt de cette notation est de normaliser la rédaction les différentes propriétés, telles que margin, padding, border, font, list et background.

1/ Les couleurs

Les couleurs sont souvent renseignées en code Hexadécimal de type #XXYYZZ.

• XX étant le code Hexadécimal de la composante rouge.
• YY celui de la composante verte.
• ZZ celui de la composante bleu.

La combinaison de ces 3 composantes donne une couleur, #000000 étant du noir et #ffffff du blanc.

Il faut savoir que l’écriture d’un couleur dans le format #33ccdd peut être réduit à #3cd, le navigateur donnera exactement le même résultat.

2/ L’ordre TRouBLe

Je parlais hier dans [Webdesign] Quelques bonnes pratiques CSS #2 de l’ordre TRouBLe pour l’écriture des valeurs Top, Right, Bottom et Left de propriétés comme margin, border ou padding. Revenons un peu plus en détails sur cette notation.

Une propriété comme margin peut s’écrire de différentes manières :

• margin : Valeur1 ; /* Valeur1 sera appliqué à tous les côtés */
• margin : Valeur1 Valeur2; /* Valeur1 sera appliqué en haut et en bas, Valeur2 à gauche et à droite */
• margin : Valeur1 Valeur2 Valeur3; /* Valeur1 sera appliqué en haut, Valeur2 à gauche et à droite, Valeur3 en bas */
• margin : Valeur1 Valeur2 Valeur3 Valeur4; /* L’ordre TRouBLe soit, dans l’ordre, Haut, Droite, Bas, Gauche */

3/ Les différentes notations de bordures

La propriété border et ses dérivés border-top, border-right, border-bottom et border-left ont 3 “sous-propriétés”, width, style et color.

Ainsi au lieu d’écrire : border-width: 1px; border-style: solid; border-color:#000; ont pourra plus simplement mettre : border: 1px solid #000;

Si maintenant nous voulons définir une taille différentes par côté d’une bordure nous notterons cela comme suit : border: 1px 2px 3px 4px; Nous aurons donc la bordure du haut qui fera 1px, celle de droite 2px, celle du bas 3px et enfin celle de gauche 4px.

On applique les deux exemple ci dessus pour mettre une bordure de couleur rouge, de type solid, d’une taille de 1pixel à droite d’une div et la même bordure mais de 2 pixels en bas de cette même div :

Code source :

border: 1px solid #f00; /*on défini la bordure en type solide et de couleur rouge*/
border: 0 1px 2px 0;/*on l’applique à droite avec une taille de 1px puis en bas avec une taille de 2px*/

4/ L’arrière plan

La propriété background a aussi différentes sous propriétés :

• color : valeur par défaut transparent
• image : valeur par défaut none
• repeat : valeur par défaut repeat
• attachment : valeur par défaut scroll
• position : valeur par défaut 0% 0%

En notation shorthand on notera donc, tout comme pour les sous propriétés de border : background : #000 url(image.png) no-repeat fixed 0 0; au lieu de : background-color: #000; background-image: url(image.png); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0;

Si l’on ne renseigne pas une sous propriété, sa valeur par défaut sera alors utilisée.

5/ Les polices

Tout comme background et border, font dispose de plusieurs sous propriétés :

• style : valeur par défaut normal
• variant : valeur par défaut normal
• weight : valeur par défaut normal
• size : valeur par défaut medium
• line-height : valeur par défaut normal
• family : dépend du navigateur

Ainsi : font : italic small-caps bold 1em/140% “Lucida Grande”,sans-serif; sera équivalent à : font-style: italic; font-variant: small-caps; font-weight; bold; font-size: 1em; line-height: 140%; font-family: “Lucida Grande”,sans-serif;

6/ Les listes

Pour finir voici ce qui concerne la notation shorthand des listes. La propriété list-style dispose aussi de sous propriétés :

• type
• position
• image

on notera donc : list-style : square outside url(square.png); au lieu de : list-style-type: square; list-style-position: outside; list-style-image: url(square.png);

J’espère que cette article vous plait, n’hésiter pas à apporter vos remarques dans les commentaires.

Profil

Flickr

Le grand YAKA !

Visiteurs