Ajouter un commentaire

CSS : vive le if()

Par:
francoistonic

mer, 05/11/2025 - 16:16
CSS

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;)

if(media(print): white; else: black;)
if(media(width < 700px): 0 auto; else: 20px auto)
if(
supports(color: lch(7.1% 60.23 300.16)): lch(7.1% 60.23 300.16);
else: #03045e;
)
if(
supports(color: lch(75% 0 0)): 3px solid lch(75% 0 0);
else: 3px solid silver;
)

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

Plus d'information sur les formats de texte

Filtered HTML

Plain text

CAPTCHA
Cette question permet de vérifier que vous n'êtes pas un robot spammeur :-) 
 L         J  BBBB   L     U   U 
 L         J  B   B  L     U   U 
 L         J  BBBB   L     U   U 
 L     J   J  B   B  L     U   U 
 LLLL   JJJ   BBBB   LLLL   UUU