Conditions CSS avec la nouvelle fonction if()

Una Kravets

Publié le 1er juillet 2025

À partir de Chrome 137, vous pouvez tester les conditions CSS intégrées avec la fonction if(). if() offre une interface de développement plus claire pour les styles dynamiques tels que les requêtes de style et les requêtes multimédias, avec quelques différences clés que vous pouvez découvrir dans cet article.

La fonction CSS if() fonctionne à l'aide d'une série de paires condition-valeur, structurées comme suit :

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

Vous pouvez fournir une instruction else, qui est utilisée si aucune des autres conditions n'est remplie :

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

Pour le moment, if() fonctionne avec trois types de requêtes différents :

• style() : requêtes de style
• media() : requêtes multimédias
• supports() : compatible avec les requêtes

Prenons quelques exemples pour illustrer ce point :

Démonstration : Requêtes multimédias intégrées

L'utilisation de if() est un excellent moyen d'inclure des requêtes multimédias intégrées dans vos styles. Par exemple, vous pouvez vérifier la préférence de thématisation d'un utilisateur (clair ou sombre) ou effectuer des requêtes multimédias intégrées pour la largeur de la fenêtre d'affichage. L'exemple suivant montre la requête multimédia pour les dispositifs à pointeur. La taille par défaut du bouton est de 30 px sur un appareil doté d'un pointeur précis, comme une souris. Toutefois, pour les appareils à écran tactile, comme ceux dotés d'un pointeur grossier, la taille du bouton doit être de 44 px minimum pour un espacement approprié entre les éléments tactiles afin d'un accès plus facile.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Le code précédent donne le même résultat que la requête multimédia suivante :

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

Le format if() vous permet d'avoir la logique en ligne, sans avoir à utiliser la logique de style à deux endroits différents.

Démonstration : Requêtes d'assistance intégrées

Vous pouvez également utiliser if() pour créer des requêtes d'assistance intégrées. Par exemple, pour vérifier la compatibilité avec les couleurs à large gamme, comme OKLCH, vous pouvez utiliser :

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Avec ce code, si le navigateur est compatible avec l'espace de couleurs oklch, l'utilisateur verra la couleur la plus vive et recevra également le message "Votre navigateur est compatible avec OKLCH" dans le pseudo-contenu ::after.

Pour en savoir plus et voir la différence entre le RVB et les espaces de couleurs plus avancés, consultez le sélecteur de couleurs et les ressources sur oklch.com.

Démonstration : Visualiser l'état de l'UI

Vous pouvez également utiliser if() pour le style basé sur l'état. Par exemple, styliser les fiches de progression en fonction de leur état d'interface utilisateur (en attente ou terminées). Stockez l'état directement dans un attribut de données ou une propriété personnalisée, puis appliquez des styles intégrés à la propriété à l'aide de if().

<div class="card" data-status=>"c<ompl>ete"
  ...
/div

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Avec style() dans une fonction if(), vous pouvez styliser directement l'élément que vous ciblez, sans avoir besoin d'un élément parent comme le nécessiteraient les requêtes de style CSS.

Cette démonstration montre comment utiliser if() pour prendre en charge une nouvelle approche architecturale du CSS. L'un des avantages de l'utilisation de propriétés CSS personnalisées par rapport aux classes est la facilité de leur mise à jour en CSS. Par exemple, ils peuvent être mis à jour à l'aide de requêtes multimédias ou de pseudo-états tels que :hover.

Étape suivante

L'ajout de if() offre une nouvelle opportunité d'architecture aux développeurs CSS. À mesure que les technologies telles que les requêtes de style évoluent, les requêtes de plage seront probablement possibles dans les fonctions if(). Elles seront également utiles lorsqu'elles seront combinées à la proposition de fonctions personnalisées à venir (CSS @function).

Pour en savoir plus sur ces fonctionnalités, consultez les articles suivants :

• Tutoriel vidéo de 3 minutes sur la démonstration 3
• Article de Lea Verou