Fonction if() CSS

Définition

Fonction de valeur qui choisit entre plusieurs branches selon une condition : style() (valeur d'une propriété personnalisée), média() ou supports(), avec un else. Elle se niche dans calc() ou d'autres fonctions. Disponibilité limitée, non Baseline : toujours fournir une déclaration de repli avant.

Analogie

Un interrupteur trois positions au niveau de la valeur elle-même, sans dupliquer la règle.

Exemple de code

.card {
  --scheme: ice;
  padding: 1em; /* repli pour les navigateurs sans if() */
  background: if(
    style(--scheme: ice): linear-gradient(#caf0f8, white);
    style(--scheme: fire): linear-gradient(#ffc971, white);
    else: none
  );
  margin: if(media(width < 700px): 0 auto; else: 20px auto);
}

Cas d'usage

Composants pilotés par des tokens (data-theme, variantes) sans multiplier les sélecteurs ni les requêtes conteneur.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if