Propriétés CSS Shorthand Courantes

Un shorthand CSS définit plusieurs propriétés longhand simultanément, et toute propriété longhand omise est réinitialisée à la valeur par défaut du shorthand — ce qui remplace silencieusement tout ce que vous avez défini pour elle précédemment dans la cascade.

Si vous avez déjà défini background-size: cover pour le voir disparaître dès qu’une ligne background: ultérieure est appliquée, vous en avez fait l’expérience à vos dépens. Rien ne génère d’erreur, ce qui en fait un problème particulièrement long à identifier. Ce comportement spécifique, et non la syntaxe, est à l’origine de la plupart des bugs liés aux shorthands. Cette référence couvre les six shorthands que vous utilisez quotidiennement (margin, padding, border, font, background et flex), avec les ordres de valeurs, les valeurs requises et les pièges de réinitialisation qui font échouer chacun d’eux silencieusement.

Pourquoi un shorthand CSS réinitialise-t-il d’autres propriétés ?

Chaque shorthand CSS se développe en un ensemble fixe de propriétés longhand, et une valeur non spécifiée est définie à une valeur par défaut déterminée par le shorthand, ce qui remplace tout ce que vous avez défini pour cette propriété longhand précédemment. Écrire background: red ne se contente pas de définir la couleur ; cela réinitialise background-image, background-position, background-size et toutes les autres propriétés longhand de background à leur valeur initiale.

C’est pourquoi le bug le plus courant lié aux shorthands n’est jamais une erreur de syntaxe. Il s’agit d’un shorthand ultérieur qui réinitialise silencieusement une propriété longhand correctement définie ailleurs :

/* Bug : le shorthand réinitialise background-size à auto */
.hero {
  background-size: cover;
  background: url('hero.jpg') no-repeat center;
}

/* Correction : conserver la taille dans le shorthand */
.hero {
  background: url('hero.jpg') no-repeat center / cover;
}

Ce mode d’échec est invisible dans la déclaration elle-même et ne se manifeste souvent que dans la page rendue. Rejouer une session en production permet de reconstituer les styles calculés réels, ce qui fait apparaître le background-size écrasé qu’une vérification locale avec des ressources différentes pourrait manquer.

margin et padding : la règle du sens horaire

margin et padding acceptent de une à quatre valeurs dans le sens des aiguilles d’une montre à partir du haut : haut, droite, bas, gauche (TRBL, les consonnes de « trouble » en anglais). Le nombre de valeurs détermine quels côtés se reflètent :

.button  { padding: 12px 24px; }   /* vertical 12px, horizontal 24px */
.section { margin: 40px auto; }     /* vertical 40px, horizontal auto */

margin: 0 auto centre horizontalement un élément de type bloc en répartissant équitablement l’espace inline disponible. Cela n’a aucun effet sur les éléments inline, et les éléments flex ou grid se centrent via leurs propres propriétés d’alignement.

border : le style est obligatoire

Dans le shorthand border, les valeurs de largeur, de style et de couleur sont indépendantes de l’ordre car elles sont de types distincts : 2px solid red et solid red 2px sont équivalents. Cependant, border-style est obligatoire : sa valeur initiale est none, donc sans style, la bordure ne s’affiche pas, quelle que soit la largeur ou la couleur.

.card { border: 1px solid #e0e0e0; }  /* s'affiche */
.card { border: 1px #e0e0e0; }        /* pas de style → rien ne s'affiche */

La largeur et la couleur sont facultatives et reviennent à leurs valeurs par défaut (medium et currentcolor). Prenez l’habitude de définir le style en premier et cette catégorie de bugs disparaîtra.

font : size et family sont obligatoires

Le shorthand font combine font-style, font-variant, font-weight, font-size, line-height et font-family, et font-size ainsi que font-family sont tous deux obligatoires. Omettre l’un ou l’autre entraîne l’ignorance de toute la déclaration. L’ordre est strict : style, variant et weight doivent précéder font-size, et line-height n’est valide qu’immédiatement après font-size, séparé par une barre oblique.

/* complet : style variant weight size/line-height family */
.text { font: italic small-caps bold 16px/1.5 'Segoe UI', sans-serif; }

/* déclaration minimale valide */
.text { font: 16px Arial, sans-serif; }

/* invalide — family avant size, silencieusement ignoré */
.text { font: Arial 16px; }

Étant donné que font réinitialise chaque composant omis à sa valeur initiale, l’appliquer après avoir défini, par exemple, font-weight ailleurs ramènera ce weight à normal.

background : la barre oblique position/size

background est le shorthand le plus sujet aux erreurs. La règle qui piège le plus les développeurs : background-size n’est valide qu’immédiatement après background-position, séparé par une barre oblique (center / cover). Ainsi, une taille sans position avant la barre oblique est invalide et est ignorée. Cela corrige les anciens guides qui traitent background-size comme nécessitant une déclaration séparée ; il appartient au shorthand.

La séquence de valeurs canonique est : image, position / size, repeat, attachment, origin, clip, color.

/* correct : position / size */
.panel { background: #000 url('bg.jpg') center / cover no-repeat fixed; }

/* incorrect : size sans position avant la barre oblique → invalide */
.panel { background: url('bg.jpg') / cover; }

/* incorrect : pas de barre oblique, donc 'cover' est interprété comme une seconde valeur de position */
.panel { background: url('bg.jpg') center cover; }

La couleur peut se placer n’importe où dans la syntaxe à couche unique, mais la garder en dernier correspond à l’ordre recommandé par MDN et assure une lecture cohérente.

flex : flex: 1 n’est pas 1 1 auto

Les navigateurs calculent flex: 1 comme flex: 1 1 0%, et non 1 1 auto. L’élément ignore donc sa propre largeur et la taille de son contenu lors de la distribution de l’espace. Les navigateurs utilisent un flex-basis de 0% lorsqu’un seul nombre est fourni, même si le texte de la spécification indique 0. Vous pouvez le confirmer dans les DevTools en ouvrant l’onglet Calculé et en lisant flex-basis.

.grow  { flex: 1; }          /* 1 1 0%  — s'étire, ignore la taille du contenu */
.auto  { flex: auto; }       /* 1 1 auto — s'étire à partir de la taille du contenu */
.fixed { flex: 0 0 200px; }  /* piste fixe de 200px, sans grow/shrink */
.none  { flex: none; }       /* 0 0 auto — dimensionné selon le contenu, rigide */

Utilisez flex: auto lorsque vous souhaitez que les éléments soient dimensionnés à partir de leur contenu, et flex: 0 0 <size> pour une piste de taille fixe.

Quelles sont les erreurs les plus courantes avec les shorthands CSS ?

Quatre schémas d’échec sont à l’origine de la plupart des bugs liés aux shorthands. Chacun est une conséquence directe d’une règle mentionnée ci-dessus :

1. Un shorthand ultérieur réinitialise une propriété longhand. Un override de thème qui applique background: efface un background-size: cover défini précédemment. Conservez la valeur dans le shorthand ou appliquez la propriété longhand après celui-ci.
2. font-family ou font-size manquant. Toute la déclaration font est ignorée, sans application partielle.
3. border-style manquant. Sans style, la valeur par défaut est none, donc rien ne s’affiche.
4. background-size sans position et barre oblique. Écrivez center / cover, jamais un cover isolé.

Les shorthands peu utilisés comme list-style, outline et place-items suivent les mêmes règles de réinitialisation mais apparaissent beaucoup moins souvent ; utilisez-les de la même manière une fois que les six shorthands quotidiens sont devenus une seconde nature.

L’habitude qui prévient presque tous ces problèmes : traitez chaque shorthand comme une réinitialisation complète de son groupe de propriétés, et non comme une modification additive. Lorsqu’un style défini ailleurs disparaît, ouvrez le panneau Calculé et vérifiez si un shorthand ultérieur l’a écrasé. C’est presque toujours la cause du problème.

FAQ

Quand utiliser un shorthand CSS plutôt que des propriétés longhand ?

Utilisez un shorthand lorsque vous souhaitez définir la plupart ou la totalité des propriétés d'un groupe à la fois et que vous acceptez de réinitialiser les valeurs omises à leurs valeurs par défaut. Utilisez une propriété longhand lorsque vous devez modifier une seule propriété sans toucher aux autres, par exemple pour ajuster uniquement background-size tout en conservant un background-image existant. Un shorthand réinitialise toujours les propriétés longhand omises, donc une modification ciblée via une propriété longhand évite cet effet de bord.

Pourquoi l'ajout d'un shorthand background casse-t-il mon background-size: cover ?

Parce qu'un shorthand background réinitialise chaque propriété longhand background que vous ne spécifiez pas à sa valeur initiale, et background-size est réinitialisé à auto. Si background-size: cover est défini dans une règle antérieure et qu'une déclaration background: ultérieure omet la taille, ce shorthand ultérieur l'écrase. Corrigez cela en écrivant la taille dans le shorthand après la position, sous la forme center / cover, ou en plaçant la propriété longhand background-size après le shorthand.

Quelle est la différence entre flex: 1 et flex: auto ?

Les navigateurs calculent flex: 1 comme 1 1 0%, donnant un flex-basis de 0% afin que l'élément ignore sa propre taille de contenu et s'étire uniquement à partir de l'espace disponible. flex: auto se développe en 1 1 auto, de sorte que l'élément part de sa taille de contenu puis s'étire. Utilisez flex: 1 pour des colonnes égales indépendamment du contenu, et flex: auto lorsque les éléments doivent être dimensionnés par rapport à ce qu'ils contiennent.

L'ordre des valeurs est-il important dans le shorthand border ?

Non, les valeurs de largeur, de style et de couleur dans le shorthand border sont indépendantes de l'ordre car elles sont de types distincts. Ainsi, 2px solid red et solid red 2px sont équivalents. La seule exigence ferme est que border-style doit être présent. Sa valeur initiale est none, donc sans mot-clé de style, la bordure ne s'affiche pas, quelle que soit la largeur ou la couleur fournie.