Propriétés raccourcies

Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via un seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité.

La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété background est une propriété raccourcie qui permettra de définir background-color, background-image, background-repeat et background-position. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (font) peuvent être définies via la propriété raccourcie font et celles qui concernent la marge avec la propriété raccourcie margin.

Quelques cas aux limites épineux

Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :

1. Une valeur qui n'est pas définie pour la propriété raccourcie sera réinitialisée avec sa valeur initiale. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi :

   background-color: red;
   background: url(images/bg.gif) no-repeat top right;
   

   ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de background-color transparent car la deuxième déclaration prend le pas sur la première.
2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé inherit pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé inherit.
3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes :
   1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que border-style, margin ou padding. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :

      	1 valeur : border-width: 1em — La valeur unique s'adresse à tous les côtés.
      	2 valeurs : border-width: 1em 2em — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.
      	3 valeurs : border-width: 1em 2em 3em — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.
      	4 valeurs : border-width: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).

   2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme border-radius utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :

      	1 valeur : border-radius: 1em — La valeur s'applique à tous les coins.
      	2 valeurs : border-radius: 1em 2em — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.
      	3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.
      	4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).

Les propriétés concernant l'arrière-plan

Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :

background: #000 url(images/bg.gif) no-repeat top right;

Les propriétés liées à la police (font)

Les déclarations suivantes :

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :

font: italic bold .8em/1.2 Arial, sans-serif;

Les propriétés liées aux bordures

Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,

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

peut être écrit ainsi :

border: 1px solid #000;

Les propriétés liées à la marge et au remplissage (padding)

Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (padding) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à trouble) :

margin: 10px 5px 10px 5px;

Voir aussi

• La référence CSS
• Les propriétés raccourcies :
  • background,
  • font,
  • margin,
  • border,
  • border-top,
  • border-right,
  • border-bottom,
  • border-left,
  • border-width,
  • border-color,
  • border-style,
  • transition,
  • animation,
  • transform,
  • padding,
  • list-style,
  • border-radius.