frenchdev

Utiliser if dans du... CSS

Le CSS n'en finit plus de se transformer et d'incorporer de nouvelles fonctionnalités qui requéraient auparavant de passer par des pré-processeurs type Sass ou Less.

C'est encore le cas avec l'arrivée de la très attendue (et inespérée !) fonction if() qui permet d'exprimer directement dans notre feuille de style une logique conditionnelle sans les moyens détournés habituels : media ou container queries, sélecteurs d'attributs ou fonctions css calc() et clamp().

Prenons un cas d'usage assez banal avec ces badges reflétant un statut :

pending
success
error
warning
info

Sans if()

Jusqu'à présent, j'avais pour habitude de créer des variables CSS pour contrôler les propriétés qui m'intéressent (border, background-color) et d'en modifier ensuite les valeurs dans chaque sous-sélecteur de type [data-status="XXX"]. Ce qui donnait :

1.badge {
2  --color: #0ea5e9; /* default fallback color */
3  --background-color: #cffafe; /* default fallback background color */
4
5  border: 1px solid var(--color);
6  background-color: var(--background-color);
7  color: var(--color);
8
9  /* ... */
10}

pending
1.badge[data-status="pending"] {
2    --color: #9333ea;
3    --border-color: #f5f3ff;
4}

success
1.badge[data-status="success"] {
2    --color: #16a34a;
3    --background-color: #dcfce7;
4}

error
1.badge[data-status="error"] {
2    --color: #ef4444;
3    --background-color: #fee2e2;
4}

L'inconvénient de cette approche est que la logique conditionnelle ne ressort pas explicitement au premier coup d'oeil. Surtout elle reste très verbeuse puisqu'elle nécessite plusieurs sélecteurs CSS afin de cibler tous les états possibles du badge.

Avec if()

Grâce à cette nouvelle fonction if(), on peut dorénavant centraliser toutes ces variations au sein d'un même sélecteur !

On commence par définir une variable CSS custom --status qui récupère automatiquement la valeur de [data-status] à l'aide de la fonction attr() :

1.badge {
2  --status: attr(data-status type(<custom-indent>));
3
4  /* ... */
5}

Puis on appelle la fonction if() pour tester différentes valeurs de --status :

1.badge {
2  --status: attr(data-status type(<custom-indent>));
3
4  color: if(
5     style(--status: pending): #9333ea;
6     style(--status: success): #16a34a;
7     style(--status: error): #ef4444;
8     else: #0ea5e9
9  );
10}

Certes il aurait été plus intuitif d'écrire --status == pending mais la bonne syntaxe est bien style(--status: pending).

Quelle que soit la condition testée, la syntaxe générale du if() en css restera la même :

property : if(condition1: value; condition2: value; ... else: value);

Au final, c'est un poil moins long 🤏 et surtout bien plus clair dans l'intention.

Compatibilité avec les navigateurs

Comme souvent, c'est Chrome qui a pris les devants en termes de support en embarquant le if() dès la version 137 (sortie fin mai 2025). La plupart des autres navigateurs non basés sur Chromium sont encore aux fraises sur le sujet, la prudence reste de mise avant d'envoyer ça en production.

Est-ce une si bonne idée ?

Plutôt, dans la mesure où on peut régler de façon bien plus élégante et maintenable certains problèmes traditionnels de layout et de style.

L'exemple proposé par Una Kravets pour classer des tickets dans différentes colonnes est particulièrement ingénieux et permet bien de sentir l'intérêt de cette nouvelle fonctionnalité 👇

Le revers de la médaille avec ces syntaxes plus complexes et logiques est qu'elles tendent à éloigner le CSS de sa nature très déclarative et à le rapprocher d'un langage de programmation avec un coût d'entrée et de maîtrise de plus en plus élevé.

Or c'est précisément cet aspect déclaratif commun à HTML et CSS qui permet de limiter la casse lorsqu'on envoie du CSS trop récent à des navigateurs trop anciens : il suffit à l'interpréteur de sauter les lignes aux propriétés ou valeurs inconnues. Du CSS pris dans des syntaxes très imbriquées devient plus beaucoup plus difficile à faire fonctionner car tout ce bloc logique sera ignoré par un moteur de rendu trop ancien.

À voir donc si cette complexification du CSS ne va pas amoindrir sa portabilité, même si des outils comme PostCSS permettent généralement de mitiger cette difficulté en transpilant le CSS moderne pour le rendre compatible avec d'anciennes versions de navigateur.

Liens additionnels