CSS : vive le if()
mer, 05/11/2025 - 16:16
Depuis quelques mois, le CSS conditionnel existe bel et bien avec la fonction if(). Sur Chrome, le if est apparu avec la version 137. Cette fonction apporte une souplesse dans les conditions et les interfaces pour rendre plus dynamique les zones et les objets. Typiquement, if() fonctionne avec 3 types de requêtes : style(), media() et supports(). La fonction permet d'attribuer des valeurs à une propriété en fonction du résultat d'un test conditionnel.
La fonction if vérifie que les conditions soient remplies, si aucune condition n'est correcte, le else s'applique s'il est prévu.
Il est possible d'utiliser le else dans un if :
if(style(--size: "2xl"): 1em; else: 0.25em;)
Pour le moment if() est partiellement supporté, malheureusement :
- Chrome : à partir de la version 137
- Safari, Firefox : pas de support
- Opera : à partir de la version 121
Pour en savoir plus : https://developer.mozilla.org/en-US/docs/Web/CSS/if

