Le CSS if() en 2026 : simplifier les variantes sans créer une usine à gaz
CSS if() arrive pour alléger certaines variantes d’interface. Cas utiles, limites navigateur et règles pour éviter un CSS illisible.
Utilisez CSS if() pour une variante locale qui choisit la valeur d’une seule propriété ; ne l’utilisez pas pour remplacer les media queries ou regrouper toute la logique d’un composant dans une déclaration. Prévoyez une valeur de repli et vérifiez le support dans les navigateurs que vous ciblez.
La fonction if(), définie dans le module CSS Conditional Values, choisit une valeur selon une condition directement dans une déclaration. Les conditions prévues comprennent notamment les requêtes média avec media(), les tests de prise en charge avec supports() et les requêtes de style avec style().
padding-inline: if(media(width >= 48rem): 2rem; else: 1rem);
La fonction ne crée ni nouvelle cascade ni nouveau mécanisme de sélection : elle choisit seulement une valeur pour la propriété concernée. Elle ne peut donc pas conditionner un bloc entier de sélecteurs comme le fait @media.
La syntaxe et les conditions admises évoluent avec la spécification. Consultez la documentation MDN sur CSS if() et la spécification CSS Values and Units Level 5 pour la syntaxe et l’état d’implémentation.
Choisir le bon cas d’usage
Employez if() lorsque deux ou trois valeurs restent immédiatement compréhensibles : un espacement, une taille, une couleur ou une variante portée par une custom property déjà présente. Dans cet exemple, la règle conserve une seule déclaration pour padding :
.card {
padding: if(style(--density: compact): 0.75rem; else: 1.25rem);
}
Gardez des règles explicites si la décision modifie plusieurs propriétés, plusieurs enfants ou un état important du composant. Des conditions imbriquées qui obligent à suivre plusieurs branches avant de connaître la valeur appliquée rendent aussi le CSS plus difficile à relire et à déboguer.
Conservez les media queries lorsqu’un breakpoint change un ensemble cohérent de styles, comme la grille, les colonnes, l’alignement, l’ordre ou la visibilité. Répéter if(media(...)) sur chaque propriété disperserait cette même décision dans la feuille CSS.
Prévoir le repli et tester
Le support de if() peut varier selon le navigateur et le type de condition utilisé. Ne déduisez pas de la prise en charge d’une forme que media(), supports() et style() fonctionneront de façon identique dans votre parc cible.
Placez une valeur de repli juste avant la déclaration utilisant if(). Un navigateur qui ignore la seconde déclaration conserve alors la première.
.button {
padding-inline: 1rem;
padding-inline: if(media(width >= 48rem): 1.5rem; else: 1rem);
}
Testez les largeurs et variantes concernées dans les outils développeur des navigateurs réellement supportés. if() ne modifie ni la spécificité, ni les couches CSS, ni l’héritage : la déclaration reste soumise à la cascade habituelle.
Adoptez-la d’abord sur un composant isolé, avec une condition et une propriété. Si elle ne supprime pas une duplication identifiable ou commence à concentrer les états, le responsive et les exceptions, revenez à des règles CSS explicites.