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 qui regroupent des propriétés courantes portant sur le même thème. Ainsi, la propriété background
est une propriété raccourcie qui permet de définir les valeurs de background-color
, background-image
, background-repeat
, et background-position
. De la même façon, la plupart des propriétés communes relatives aux polices peuvent être définies grâce à la propriété raccourcie font
, et celles portant sur les marges autour d'une boîte peuvent être paramétrées grâce à la propriété raccourcie margin
.
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
Lorsqu'une valeur n'est pas fournie dans la propriété raccourcie, la propriété correspondante utilise alors sa valeur initiale. Cela signifie que la déclaration de la propriété raccourcie l'emportera sur les valeurs des éventuelles déclarations précédentes. Prenons par exemple :
p {
background-color: red;
background: url(images/bg.gif) no-repeat left top;
}
La couleur de l'arrière-plan ne sera pas rouge (red
), ce sera la valeur par défaut de background-color
qui sera utilisée : 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 :
- Les propriétés relatives aux bords d'une boîte, comme
border-style
,margin
oupadding
. - Les propriétés relatives aux coins d'une boîte, comme
border-radius
Propriétés pour les bords d'une boîte
Les propriétés raccourcies qui portent sur les bords d'une boîte, comme border-style
, margin
ou padding
, utilisent toutes une syntaxe cohérente ayant 1 à 4 valeurs :
- Syntaxe avec une valeur
-
border-width: 1em
— la valeur représente tous les bords : - Syntaxe avec deux valeurs
-
border-width: 1em 2em
— la première valeur représente les bords sur l'axe vertical, c'est-à-dire les bords haut et bas ; la seconde représente les bords sur l'axe horizontal, c'est-à-dire les bords gauche et droit : - Syntaxe avec trois valeurs
-
border-width: 1em 2em 3em
— la première valeur représente le bord haut, la deuxième représente les bords de l'axe horizontal : gauche et droit, et la troisième représente le bord bas : - Syntaxe avec quatre valeurs
-
border-width: 1em 2em 3em 4em
— les quatre valeurs représentent respectivement les bords haut, droit, bas et gauche (et toujours dans cet ordre), soit un sens horaire à partir du haut : Un moyen mnémotechnique pour mémoriser l'ordre consiste à visualiser le mouvement des aiguilles sur une horloge : la première valeur (ici1em
) commence à midi, puis la deuxième (ici2em
) à 15h, puis la troisième (ici3em
) à 18h, et la dernière (4em
dans notre exemple) à 21h.
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 avec une valeur
-
border-radius: 1em
— la valeur unique représente tous les coins : - Syntaxe avec deux 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 : - Syntaxe avec trois 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 : - Syntaxe avec quatre 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 :
Propriétés pour l'arrière-plan
Prenons un arrière-plan déclaré comme tel :
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
On pourra synthétiser ces quatre déclarations en une :
background: #000 url(images/bg.gif) no-repeat left top;
Voir background
pour plus d'informations.
Note :
La forme raccourcie correspond plus précisément aux propriétés détaillées indiquées ici avec également, background-attachment: scroll
et d'autres propriétés supplémentaires.
Propriétés typographiques
Prenons les déclarations suivantes :
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
On pourra les raccourcir ainsi :
font:
italic bold 0.8em/1.2 Arial,
sans-serif;
Voir font
pour plus d'informations sur cette propriété.
Note :
Cette déclaration raccourcie avec font
est en réalité équivalente aux déclarations détaillées présentes ici, 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 :
border-width: 1px;
border-style: solid;
border-color: #000;
On pourra le simplifier de la façon suivante :
border: 1px solid #000;
Voir border
pour plus d'informations sur cette propriété.
Propriétés pour les marges et le remplissage (padding)
Les propriétés raccourcies pour les marges et le remplissage fonctionnent de la même façon. La propriété margin
permet une syntaxe avec une, deux, trois ou quatre valeurs. Prenons les déclarations de ce fragment :
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
On pourra les condenser en une seule déclaration équivalente (on notera l'ordre dans le sens horaire : haut, droit, bas, gauche) :
margin: 10px 5px 10px 5px;
Propriétés de position
Pour positionner un élément, plutôt que d'utiliser les propriétés détaillées top
, right
, bottom
et left
comme ceci :
top: 0;
right: 20px;
bottom: 0;
left: 20px;
On pourra utiliser la propriété inset
qui les synthétise :
inset: 0 20px 0 20px;
À l'instar des marges et du remplissage, les valeurs suivent l'ordre horaire (haut, droit, bas, puis gauche).
La propriété raccourcie universelle
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 les articles La cascade et l'héritage ou Introduction à la cascade CSS pour plus d'informations sur le fonctionnement de l'héritage en CSS.
Voir aussi
- Les concepts fondamentaux de CSS :
- Les propriétés raccourcies :
all
animation
background
border
border-block-end
border-block-start
border-bottom
border-color
border-image
border-inline-end
border-inline-start
border-left
border-radius
border-right
border-style
border-top
border-width
column-rule
columns
contain-intrinsic-size
flex
flex-flow
font
gap
grid
grid-area
grid-column
grid-row
grid-template
inset
list-style
margin
mask
offset
outline
overflow
padding
place-content
place-items
place-self
scroll-margin
scroll-padding
scroll-timeline
text-decoration
text-emphasis
transition