Fonction CSS if()

Syntaxe

/* Un seul <if-test> */
if(style(--schema: dark): #eeeeee;)
if(media(print): black;)
if(media(width > 700px): 0 auto;)
if(supports(color: lch(7.1% 60.23 300.16)): lch(7.1% 60.23 300.16);)

/* <if-test> avec else */
if(style(--taille: "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;
)

/* Multiple <if-test>s */
if(
  style(--schema: glace): linear-gradient(#caf0f8, white, #caf0f8);
  style(--schema: feu): linear-gradient(#ffc971, white, #ffc971);
  else: none;
)

/* <if-test> dans un raccourci */
3px yellow if(
  style(--couleur: green): dashed;
  style(--couleur: yellow): inset;
  else: solid;
)

Paramètres

Le paramètre est une liste de <if-branch> séparés par des points-virgules. Chaque <if-branch> est un <if-condition> suivi d'un deux-points et d'une <value> :

<if-branch> = <if-condition> : <value>;

<if-condition>

Un test <if-test> ou le mot-clé else.

<if-test>

Une requête de style, une requête média ou une requête de fonctionnalité.

else

Un mot-clé représentant une condition <if-condition> qui est toujours évaluée à vrai.

<value>

Une valeur de propriété.

Valeur de retour

Une valeur ou une valeur garantie invalide.

Description

La fonction CSS if() fournit une logique conditionnelle aux valeurs des propriétés CSS, et fonctionne de manière similaire aux instructions JavaScript if...else.

La fonction if() peut être utilisée à l'intérieur de la valeur de n'importe quelle propriété, et peut contenir zéro ou plusieurs <if-condition> séparés par des points-virgules. Chaque <if-condition> est soit une paire <if-test> : <value>, soit une paire else : <value>. Le point-virgule après le dernier <if-condition> est optionnel.

La valeur de retour est calculée comme suit :

1. Les expressions <if-condition> sont évaluées dans l'ordre où elles apparaissent dans la fonction.
2. La première <if-condition> qui est évaluée à true retourne sa <value> associée.
3. Si aucune <if-condition> n'est évaluée à true, la fonction retourne une <guaranteed-invalid>. Cela se comporte comme invalide ou false si la fonction if() est utilisée dans une déclaration de valeur qui a un repli, comme une propriété personnalisée ou une fonction anchor().

Par exemple :

div {
  background-image: if(
    style(--schema: glace): linear-gradient(#caf0f8, white, #caf0f8);
    style(--schema: feu): linear-gradient(#ffc971, white, #ffc971);
    else: none;
  );
}

Dans ce cas, nous définissons un linear-gradient() différent comme background-image sur les éléments HTML <div>, en fonction de la valeur de la propriété personnalisée --schema, qui peut être glace ou feu. Si --schema n'existe pas, ou s'il existe et est défini sur une autre valeur, la valeur else est utilisée, et la propriété background-image est définie sur none.

Si une seule <if-condition> ou <value> est invalide, cela n'invalide pas toute la fonction if() ; au lieu de cela, le parseur passe à la paire <if-condition> : <value> suivante. Si aucune <if-condition> ni <value> n'est valide, la fonction retourne une valeur garantie comme invalide.

Fréquence et position des paires else : <value>

Vous pouvez inclure plusieurs paires else : <value> à l'intérieur d'une fonction if(), à n'importe quelle position. Cependant, dans la plupart des cas, une seule paire else : <value> à la fin de la liste séparée par des points-virgules est utilisée pour fournir la valeur par défaut qui est toujours retournée si aucune des <if-test> n'évalue à true.

Si vous incluez une paire else : <value> avant toute paire <if-test> : <value>, les conditions qui suivent ne sont pas évaluées, car else évalue toujours à true. La fonction if() suivante retourne donc toujours none, et les deux paires <if-test> : <value> ne sont jamais évaluées :

div {
  background-image: if(
    else: none;
    style(--schema: glace): linear-gradient(#caf0f8, white, #caf0f8);
    style(--schema: feu): linear-gradient(#ffc971, white, #ffc971)
  );
}

Le débogage d'une valeur qui ne se comporte pas comme prévu est un cas où vous pouvez vouloir placer une paire else : <value> à une position autre que la fin de la liste de valeurs. Dans l'exemple suivant, nous essayons de déterminer si la première paire <if-test> : <value> fonctionne correctement. Si ce n'est pas le cas, la paire else : <value> retourne une valeur de url("debug.png") pour afficher une image indiquant que la première paire <if-test> : <value> doit être corrigée. Les deux dernières paires <if-test> : <value> ne sont à nouveau jamais évaluées.

div {
  background-image: if(
    style(--schema: glace): linear-gradient(#caf0f8, white, #caf0f8);
    else: url("debug.png");
    style(--schema: feu): linear-gradient(#ffc971, white, #ffc971);
    else: none;
  );
}

Notez qu'une fonction if() est toujours valide si elle ne contient qu'une seule paire else : <value>, ou rien du tout. Les valeurs de propriété suivantes sont toutes deux valides :

background-color: if(else: yellow);
background-image: if();

Ces fonctions ne sont pas utiles. Elles ont été incluses pour démontrer leur validité. Dans ce cas, la valeur de background-color est toujours définie sur yellow et l'image de fond est définie sur sa valeur initiale. Il convient de définir directement background-color sur yellow et background-image sur initial ou none.

Types de testes if-tests

Un <if-test> accepte l'un des trois types de requêtes. Cette section examine chacun d'eux en détail.

Requêtes de style

Une requête de style <if-test> vous permet de tester si une valeur de propriété particulière est définie sur un élément, et d'appliquer une valeur à une autre propriété en conséquence. Nous avons parcouru plusieurs exemples de requêtes de style plus tôt ; examinons un autre exemple :

background-image: if(
  style(--schema: glace): linear-gradient(#caf0f8, white, #caf0f8);
  else: none;
);

Si la propriété personnalisée --schema est définie sur une valeur de glace sur le même élément, la valeur linear-gradient() fournie est retournée. Sinon, none est retourné.

Utiliser des requêtes de style à l'intérieur des instructions if() présente un avantage par rapport aux requêtes @container — vous pouvez cibler un élément avec des styles directement, en fonction de la présence d'une propriété personnalisée, plutôt que de devoir vérifier les styles définis sur un élément parent conteneur.

Vous pouvez également utiliser la logique and, or ou not à l'intérieur des requêtes de style. Par exemple :

background-color: if(
  style((--schema: dark) or (--schema: very-dark)): black;
);

background-color: if(
  style((--schema: dark) and (--contrast: hi)): black;
);

background-color: if(
  not style(--schema: light): black;
);

Une requête @container présente cependant certains avantages — vous ne pouvez définir qu'une seule valeur de propriété à la fois avec les requêtes de style if(), tandis que les requêtes @container peuvent être utilisées pour appliquer conditionnellement des ensembles complets de règles. Les deux approches sont complémentaires et ont des utilisations différentes.

Notez que les requêtes de style de conteneur ne prennent actuellement pas en charge les propriétés CSS régulières, seulement les propriétés personnalisées CSS. Par exemple, ce qui suit ne fonctionne pas :

if(
  background-color: if(style(color: white): black;);
)

Requêtes média

Une requête média