jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Constructeur de fonction CSS if()

Creez des conditionnelles CSS if() utilisant les conditions style(), media() et supports() pour des valeurs responsives sans requetes @media.

Chargement de l'outil...

Qu'est-ce que Constructeur de fonction CSS if() ?

La fonction CSS if() permet d'ecrire des valeurs conditionnelles directement a l'interieur d'une declaration de propriete. Au lieu d'envelopper une valeur dans des regles @media, @container ou @supports, vous utilisez if() en ligne : width: if(style(--variant: large): 300px else 150px). Elle prend en charge trois types de conditions : style() pour verifier une valeur de propriete personnalisee CSS, media() pour tester des fonctionnalites media comme min-width ou prefers-color-scheme, et supports() pour detecter si le navigateur prend en charge une fonctionnalite CSS specifique.

Réponse rapide

La fonction CSS if() permet d'ecrire des valeurs conditionnelles en ligne a l'interieur d'une declaration de propriete. Utilisez if(style()) pour bifurquer sur une propriete personnalisee CSS, if(media()) pour bifurquer sur une fonctionnalite media comme la largeur de la fenetre, ou if(supports()) pour bifurquer sur la prise en charge d'une fonctionnalite par le navigateur.

Last updated: 2026-05-30

Limites

  • La fonction if() n'est disponible que dans Chrome 137+ (style()) et Chrome 142+ (media(), supports()). Firefox et Safari ne prennent pas encore en charge CSS if() en mai 2026.
  • if() evalue une seule condition pour une seule valeur -- elle ne peut pas remplacer les regles @media ou @container pour des blocs de regles complexes avec plusieurs changements de declaration.
  • if(style()) ne fonctionne que sur les proprietes personnalisees definies explicitement ou enregistrees. Les proprietes personnalisees heritees d'un ancetre sans valeur explicite sur l'element cible sont traitees comme non correspondantes.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez le type de condition : style() pour verifier les valeurs de proprietes personnalisees CSS, media() pour les fonctionnalites media de fenetre ou de preference utilisateur, ou supports() pour la detection de fonctionnalites.
  2. Saisissez l'expression de condition et la valeur a utiliser lorsque la condition est vraie.
  3. Ajoutez éventuellement une valeur else qui s'applique lorsque la condition est fausse.
  4. Copiez la declaration if() generee et placez-la directement dans la valeur de votre propriete CSS.

A quoi il sert

  • Definir une largeur différente en fonction d'une valeur de propriete personnalisee CSS sans regle @container enveloppant l'ensemble de la regle.
  • Appliquer une valeur de schema de couleurs conditionnellement basee sur prefers-color-scheme a l'interieur d'une seule declaration de propriete.
  • Fournir une valeur de repli lorsque le navigateur ne prend pas en charge une fonctionnalite CSS specifique en utilisant supports().

Cas d'usage

Exemples concrets

Exemple

Largeur de composant basee sur une variable de variante

Un composant de carte utilise style(--variant: featured) pour definir une largeur de 400px sur les cartes en vedette et 300px sur les cartes standard : width: if(style(--variant: featured): 400px else 300px). Aucune regle @container necessaire.

Exemple

Taille de police responsive utilisant media() en ligne

Definissez la taille de police conditionnellement en fonction de la largeur de la fenetre a l'interieur d'une seule declaration : font-size: if(media(min-width: 768px): 1.25rem else 1rem). Evite d'ecrire des blocs @media separes pour des valeurs responsives simples.

Erreurs frequentes

  • Utiliser if(media()) pour des mises en page complexes a conditions multiples -- if() est conçu pour des valeurs conditionnelles uniques, pas pour remplacer toutes les requetes media.
  • Oublier que la branche else est optionnelle -- l'omettre lorsque la condition est fausse fait que la propriete revient a sa valeur initiale ou a une declaration precedente.
  • Appliquer if(style()) a une propriete personnalisee qui n'est pas definie sur l'element ou ses ancetres -- style() n'evalue que les proprietes personnalisees enregistrees ou definies explicitement.

Vérification

  1. Ouvrez Chrome DevTools et inspectez l'element avec la declaration if(). Verifiez que la valeur calculee change lorsque la variable de condition ou la fonctionnalite media change.
  2. Testez la page dans un navigateur non compatible (Firefox ou Safari) pour confirmer que la valeur else ou la declaration de repli s'applique correctement sans casser la mise en page.

FAQ

Questions sur Constructeur de fonction CSS if()

Quelle est la difference entre if(style()) et les requetes @container style() ?

Les requetes @container style() enveloppent un bloc de regles entier et appliquent toutes les declarations a l'interieur lorsque la condition est vraie. La fonction if(style()) applique une seule valeur conditionnelle en ligne dans une declaration de propriete.

Quelle version de Chrome prend en charge chaque type de condition if() ?

Chrome 137 prend en charge if(style()) pour interroger les valeurs de proprietes personnalisees CSS. Chrome 142 ajoute if(media()) pour les requetes de fonctionnalites media et if(supports()) pour la detection de fonctionnalites. Firefox et Safari n'ont pas encore implemente if() dans une version stable.

if(style()) peut-il verifier l'absence d'une propriete personnalisee ?

Non. La condition style() verifie la valeur calculee d'une propriete personnalisee et peut tester une valeur specifique ou simplement verifier que la propriete est definie. Elle ne peut pas tester l'absence d'une propriete.

En quoi if(media()) diffère-t-il d'une regle @media standard ?

if(media()) evalue la condition media en ligne dans une seule declaration de propriete, gardant la valeur conditionnelle co-localisee avec sa valeur de repli. Une regle @media duplique l'ensemble du bloc de regles.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi