1. Web
  2. CSS
  3. Guides
  4. Cascade et héritage
  5. Propriétés raccourcies

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Propriétés raccourcies

Les propriétés raccourcies sont des propriétés CSS permettant de paramétrer simultanément les valeurs de plusieurs propriétés CSS. Utiliser une propriété raccourcie permet d'obtenir des feuilles de style plus concises (et souvent plus lisibles).

La spécification CSS définit des propriétés raccourcies pour regrouper la définition de propriétés courantes agissant sur le même thème. Par exemple, la propriété CSS background est une propriété raccourcie qui permet de définir les valeurs de background-color, background-image, background-repeat et background-position.

Quelques cas aux limites délicats

Il existe quelques cas aux limites qu'il convient de garder à l'esprit lorsqu'on utilise les propriétés raccourcies.

L'omission de propriétés

Une valeur qui n'est pas définie est remplacée par une valeur par défaut définie par la propriété raccourcie, qui peut différer de la valeur initiale de la propriété.

Cela signifie que la déclaration de la propriété raccourcie l'emporte sur les valeurs précédemment définies. Par exemple :

css
p {
  background-color: red;
  background: url("images/bg.gif") no-repeat left top;
}

La couleur de l'arrière-plan n'est pas rouge (red), c'est la valeur par défaut de background-color, qui est transparent.

Seules les propriétés détaillées permettent l'héritage. Comme les valeurs manquantes dans une déclaration raccourcie sont remplacées par les valeurs initiales correspondantes, il est impossible de permettre l'héritage des propriétés détaillées en les omettant. Le mot-clé inherit peut être appliqué à une propriété, mais uniquement dans son ensemble et non comme un mot-clé pour une valeur parmi d'autres. Cela signifie que la seule façon pour qu'une valeur donnée soit héritée consiste à utiliser la propriété détaillée avec le mot-clé inherit.

L'ordre des propriétés

Les propriétés raccourcies essaient de ne pas imposer un ordre spécifique pour les valeurs des propriétés qu'elles synthétisent. Cela fonctionne bien lorsque les propriétés détaillées sont de différents types, l'ordre n'ayant alors pas d'importance. En revanche, cela ne peut pas fonctionner si plusieurs des propriétés détaillées permettent d'utiliser des mêmes valeurs.

Il y a deux thèmes pour lesquels l'ordre est important :

Propriétés pour les bords d'une boîte

Les raccourcis gérant les propriétés liées aux côtés de la boîte, tels que border-style, margin ou padding, utilisent toujours une syntaxe cohérente à 1 à 4 valeurs représentant ces côtés :

  • Syntaxe à 1 valeur : border-width: 1em — Une seule valeur représente tous les côtés : Les côtés de la boîte avec une syntaxe utilisant une valeur

  • Syntaxe à 2 valeurs : border-width: 1em 2em — La première valeur représente les côtés supérieur et inférieur, et la deuxième valeur représente les côtés gauche et droit : Les côtés de la boîte avec une syntaxe utilisant deux valeurs

  • Syntaxe à 3 valeurs : border-width: 1em 2em 3em — La première valeur représente le côté supérieur, la deuxième valeur représente les côtés gauche et droit, et la troisième valeur représente le côté inférieur : Les côtés de la boîte avec une syntaxe utilisant trois valeurs

  • Syntaxe à 4 valeurs : border-width: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement les côtés supérieur, droit, inférieur et gauche, toujours dans cet ordre ; c'est-à-dire dans le sens des aiguilles d'une montre en commençant par le haut : Les côtés de la boîte avec une syntaxe utilisant quatre valeurs La première lettre de Top-Right-Bottom-Left correspond à l'ordre des consonnes du mot trouble : TRBL. Vous pouvez également vous en souvenir comme de l'ordre dans lequel les aiguilles d'une horloge tourneraient : 1em commence à la position de 12 heures, puis 2em à la position de 3 heures, puis 3em à la position de 6 heures, et 4em à la position de 9 heures.

Propriétés pour les coins d'une boîte

De la même manière, les propriétés raccourcies qui portent sur les coins d'une boîte (par exemple border-radius) utilisent toutes une syntaxe cohérente ayant 1 à 4 valeurs :

  • Syntaxe à 1 valeur : border-radius: 1em — Une seule valeur représente tous les coins : Les coins de la boîte avec une syntaxe utilisant une valeur

  • Syntaxe à 2 valeurs : border-radius: 1em 2em — La première valeur porte sur les coins supérieur gauche et inférieur droit, la seconde porte sur les coins supérieur droit et inférieur gauche : Les coins de la boîte avec une syntaxe utilisant deux valeurs

  • Syntaxe à 3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin supérieur gauche, la deuxième les coins supérieur droit et inférieur gauche, la troisième le coin inférieur droit : Les coins de la boîte avec une syntaxe utilisant trois valeurs

  • Syntaxe à 4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement les coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche (et toujours dans cet ordre), soit un sens horaire à partir du coin supérieur gauche : Les coins de la boîte avec une syntaxe utilisant quatre valeurs

Propriétés pour l'arrière-plan

Prenons un arrière-plan déclaré comme tel :

css
background-color: black;
background-image: url("images/bg.gif");
background-repeat: no-repeat;
background-position: left top;

On peut synthétiser ces quatre déclarations en une :

css
background: black url("images/bg.gif") no-repeat left top;

(La forme raccourcie est en fait l'équivalent des propriétés détaillées ci-dessus, auxquelles s'ajoutent background-attachment: scroll et, en CSS3, quelques propriétés supplémentaires.)

Voir background pour plus d'informations détaillées, y compris les propriétés CSS3.

Propriétés typographiques

Prenons les déclarations suivantes :

css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: "Arial", sans-serif;

Ces 5 déclarations peuvent être raccourcies de la manière suivante :

css
font:
  italic bold 0.8em/1.2 "Arial",
  sans-serif;

Cette déclaration raccourcie est en réalité équivalente aux déclarations détaillées ci-dessus, avec en plus font-variant: normal, font-size-adjust: none et font-stretch: normal.

Propriétés pour les bordures

Les épaisseurs, couleurs et styles d'une bordure peuvent être exprimés avec une seule déclaration. Si on part du fragment de CSS suivant :

css
border-width: 1px;
border-style: solid;
border-color: black;

On peut le simplifier de la façon suivante :

css
border: 1px solid black;

Propriétés pour les marges et le remplissage

Les versions raccourcies des valeurs de marge (margin en anglais) et de remplissage (padding en anglais) fonctionnent de manière similaire ; la propriété margin permet de définir des valeurs raccourcies en utilisant une, deux, trois ou quatre valeurs. Considérons les déclarations CSS suivantes :

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

Elles sont équivalentes à la déclaration suivante utilisant la syntaxe raccourcie à quatre valeurs. Notez que les valeurs sont dans l'ordre horaire, en commençant par le haut : haut, droite, bas, puis gauche (TRBL, les consonnes de « trouble »).

css
margin: 10px 5px 10px 5px;

Les règles de raccourci pour les marges avec une, deux, trois et quatre valeurs sont les suivantes :

  • Lorsque une valeur est définie, elle s'applique à tous les côtés.
  • Lorsque deux valeurs sont définies, la première marge s'applique au haut et au bas, la seconde au gauche et à droite.
  • Lorsque trois valeurs sont définies, la première marge s'applique au haut, la seconde au gauche et à droite, la troisième au bas.
  • Lorsque quatre valeurs sont définies, les marges s'appliquent au haut, droite, bas et gauche dans cet ordre (dans le sens des aiguilles d'une montre).

Propriétés de position

Avec la position, les versions raccourcies de top, right, bottom et left peuvent être simplifiées en une seule déclaration. Par exemple, considérons le CSS suivant :

css
top: 0;
right: 20px;
bottom: 0;
left: 20px;

Il peut être simplifié comme suit :

css
inset: 0 20px 0 20px;

Commes pour les marges et les remplissages, les valeurs d'encart sont ordonnées dans le sens des aiguilles d'une montre — haut, droite, bas, puis gauche (TRBL).

La propriété raccourcie universelle

Le CSS fournit une propriété raccourcie universelle, all, qui applique sa valeur à toutes les propriétés du document. Elle permet ainsi de changer le modèle d'héritage des propriétés.

Voir la gestion des conflits ou l'introduction à la cascade CSS pour plus d'informations sur le fonctionnement de l'héritage en CSS.

Propriétés raccourcies

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu