Utiliser la fonction CSS if() pour le style conditionnel

Le style conditionnel CSS s’est traditionnellement appuyé sur les media queries, les container queries et les contournements avec les propriétés personnalisées. La nouvelle fonction CSS if() change la donne en apportant une logique conditionnelle inline directement aux valeurs de propriétés. Depuis août 2025, cette fonctionnalité est disponible dans Chrome 137+, Edge 137+, Chrome pour Android et Android Browser, offrant aux développeurs une approche plus propre du style dynamique.

Cet article explore la syntaxe de la fonction if(), ses trois types de requêtes, et des applications pratiques qui démontrent pourquoi elle devient un outil essentiel pour le développement CSS moderne.

Comprendre la syntaxe de la fonction CSS if()

La fonction CSS if() suit un modèle spécifique qui la distingue des autres fonctions CSS :

property: if(condition: value; else: fallback);

Notez le point-virgule qui sépare les paires condition-valeur—pas des virgules comme les autres fonctions CSS. Vous pouvez également chaîner plusieurs conditions :

property: if(
  condition-1: value-1;
  condition-2: value-2;
  condition-3: value-3;
  else: fallback
);

La fonction ne nécessite aucun espace entre if et la parenthèse ouvrante. Cette syntaxe stricte aide l’analyseur CSS à distinguer entre plusieurs conditions au sein d’un seul appel de fonction.

Trois types de requêtes conditionnelles

Requêtes style()

La requête style() vérifie les valeurs de propriétés personnalisées sur l’élément courant :

.button {
  background: if(
    style(--variant: primary): #0066cc;
    else: transparent
  );
}

Contrairement aux container style queries, style() dans if() s’applique directement à l’élément stylé—aucun conteneur parent nécessaire.

Requêtes media()

Les media queries fonctionnent inline, éliminant le besoin de blocs de règles séparés :

.nav-item {
  padding: if(
    media(min-width: 768px): 16px 24px;
    else: 8px 12px
  );
}

Requêtes supports()

Testez le support des fonctionnalités CSS directement dans les valeurs de propriétés :

.container {
  display: if(
    supports(display: grid): grid;
    else: flex
  );
}

Exemple concret : dimensionnement adaptatif de boutons

Créons un bouton qui adapte sa taille en fonction de la méthode de saisie de l’utilisateur—une exigence d’accessibilité courante :

button {
  /* Dimensionnement tactile pour les pointeurs grossiers */
  width: if(media(any-pointer: coarse): 44px; else: 30px);
  height: if(media(any-pointer: coarse): 44px; else: 30px);
  
  /* Ajuster le padding en conséquence */
  padding: if(
    media(any-pointer: coarse): 12px 16px;
    else: 8px 12px
  );
  
  /* Maintenir un style cohérent */
  border-radius: 6px;
  transition: all 0.2s ease;
}

Cette approche maintient toute la logique responsive inline avec chaque propriété, rendant le comportement du composant immédiatement clair sans naviguer entre les blocs de règles.

Changement de thème avec le style conditionnel

Les design systems nécessitent souvent plusieurs thèmes. La fonction if() excelle dans ce modèle :

:root {
  --theme: ocean; /* ou forest ou sunset */
}

.card {
  background: if(
    style(--theme: ocean): #e3f2fd;
    style(--theme: forest): #e8f5e9;
    style(--theme: sunset): #fff3e0;
    else: #ffffff
  );
  
  color: if(
    style(--theme: ocean): #0d47a1;
    style(--theme: forest): #1b5e20;
    style(--theme: sunset): #e65100;
    else: #333333
  );
  
  border: 2px solid if(
    style(--theme: ocean): #1976d2;
    style(--theme: forest): #388e3c;
    style(--theme: sunset): #f57c00;
    else: #cccccc
  );
}

Pour changer de thème, mettez simplement à jour la propriété personnalisée :

.ocean-theme { --theme: ocean; }
.forest-theme { --theme: forest; }
.sunset-theme { --theme: sunset; }

Comparer if() aux approches traditionnelles

La fonction if() offre des avantages par rapport aux modèles CSS conditionnels existants :

vs. Media Queries :

• Maintient la logique inline plutôt que dispersée dans des blocs de règles
• Réduit la duplication de code
• Rend le comportement des composants plus transparent

vs. Basculeurs de propriétés personnalisées :

• Plus lisible et explicite
• Pas besoin de contournements complexes avec calc()
• Code auto-documenté

vs. Container Style Queries :

• S’applique directement aux éléments sans dépendances parent
• Syntaxe plus simple pour les conditions à propriété unique
• Meilleur pour le style au niveau composant

Support navigateur et implémentation

Actuellement, la fonction CSS if() est supportée dans :

• Chrome 137+
• Edge 137+
• Chrome pour Android
• Android Browser

Pour les navigateurs non supportés, continuez à utiliser les approches traditionnelles comme fallbacks. Le support limité signifie que l’usage en production nécessite une considération attentive de votre base d’utilisateurs.

Pour les spécifications détaillées et les mises à jour, référez-vous à la documentation MDN Web Docs pour la fonction CSS if().

Conclusion

La fonction CSS if() représente un pas significatif en avant dans le style conditionnel. En apportant la logique inline avec les déclarations de propriétés, elle crée des feuilles de style plus maintenables et compréhensibles. Bien que le support navigateur reste limité, le potentiel de la fonction pour un thème plus propre, un design responsive, et un style basé sur les états la rend digne d’exploration pour les projets futurs.

À mesure que l’adoption navigateur grandit, attendez-vous à ce que la fonction if() devienne un outil standard pour gérer le CSS conditionnel, remplaçant de nombreux contournements actuels par une syntaxe plus propre et plus intuitive.

FAQ