CSS if() : La logique conditionnelle native change la donne

Pendant des années, nous avons traité le CSS comme un langage purement déclaratif, en déléguant toute logique conditionnelle soit à JavaScript (manipulation de classes), soit aux préprocesseurs comme Sass.

L'article de Karsten Biedermann soulève un point crucial sur l'évolution actuelle des spécifications : l'arrivée imminente de la fonction if() native en CSS.

Ne nous y trompez pas : il ne s'agit pas de la directive @if de Sass qui est compilée statiquement. Il s'agit d'une évaluation conditionnelle au runtime, directement dans le navigateur. C'est un changement de paradigme fondamental pour l'architecture de nos feuilles de styles.

Pourquoi c'est une révolution technique

Jusqu'à présent, pour simuler une logique conditionnelle en CSS pur (sans JS), nous devions utiliser des hacks ingénieux mais peu lisibles, comme le "Space Toggle Hack" basé sur des variables CSS vides ou non vides, ou des calculs mathématiques complexes avec calc() et clamp().

La fonction if() vient abstraire cette complexité avec une syntaxe qui ressemble enfin à de la programmation moderne.

Elle s'intègre dans la spécification CSS Values and Units Module Level 5. Son but est simple : permettre de choisir une valeur de propriété en fonction d'une condition.

La syntaxe : Simple et Efficace

La signature de la fonction est celle d'un ternaire classique :

$$if( <condition>, <valeur-si-vrai>, <valeur-si-faux> )$$

Voici un exemple concret. Imaginons un composant de carte qui doit changer de padding et de couleur de fond selon une variable de configuration --variant, sans avoir à ajouter une classe .card--compact dans le HTML.

Avant (L'approche Sass ou BEM chargée) : Nous aurions dû gérer cela via une classe additionnelle ou des mixins complexes.
Avec CSS if() :

.card {
  /* Définition de la variable locale ou héritée */
  --variant: "compact";

  /* Logique conditionnelle inline */
  padding: if(style(--variant: "compact"), 1rem, 2rem);
  background-color: if(style(--variant: "highlight"), var(--color-primary), var(--color-surface));
  
  border-radius: 8px;
}

Notez l'utilisation de style(). La condition évalue si la propriété personnalisée --variant correspond à une valeur spécifique. Si oui, la première valeur est appliquée. Sinon, la seconde.

Le cas d'usage avancé : Style Queries

La véritable puissance de if() se révèle lorsqu'elle est couplée aux Style Queries (@container style(...)). Cela permet aux composants enfants de réagir dynamiquement aux valeurs des propriétés personnalisées de leurs parents, sans sélecteurs descendants fragiles.

Imaginons un bouton qui doit s'adapter si son conteneur parent est en mode "dark" ou "light" défini via une variable CSS, et non une classe globale sur le body.

.button {
  /* Si le conteneur parent a --theme défini sur dark */
  color: if(style(--theme: dark), #ffffff, #000000);
  background: if(style(--theme: dark), #333333, #eeeeee);

  /* On peut même imbriquer les conditions pour des logiques 'else-if' */
  border: 1px solid if(
    style(--importance: high), 
    red, 
    if(style(--importance: medium), orange, gray)
  );
}

Ceci permet une encapsulation totale du style. Le composant n'a plus besoin de connaître le contexte global, il réagit simplement aux variables exposées dans son scope.

Différence fondamentale avec Sass

Il est crucial de comprendre la distinction technique pour ne pas confondre les usages :

• Sass @if : Évalué à la compilation. Le CSS généré est statique. Impossible de changer la valeur sans recompiler ou changer de classe via JS.

• CSS if() : Évalué par le moteur de rendu du navigateur. Si vous changez la valeur de --variant en JavaScript ou via les DevTools, le style se met à jour instantanément. C'est réactif.

État du support et mise en garde

Comme le souligne Biedermann, nous sommes ici sur du "bleeding edge". Au moment où j'écris ces lignes, cette fonctionnalité est expérimentale (disponible derrière des flags dans Chrome Canary).

Cependant, en tant que développeurs, nous devons anticiper cette syntaxe. Elle va drastiquement réduire notre dépendance aux classes utilitaires pour la gestion d'état visuel et rendre nos systèmes de design beaucoup plus flexibles.

Mon conseil : Commencez à expérimenter avec cette syntaxe sur des projets personnels via Chrome Canary pour comprendre comment la logique conditionnelle inline peut simplifier votre CSS, mais ne l'intégrez pas encore dans vos environnements de production sans polyfill ou fallback solide.