Conditions CSS avec la nouvelle fonction if()

Una Kravets

Publication : 1er juillet 2025

À partir de Chrome 137, vous pouvez essayer les conditions CSS intégrées avec la fonction if(). if() permet d'obtenir une interface de développement plus propre pour les styles dynamiques tels que les requêtes de style et les requêtes média, 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 :

• style() : requêtes de style
• media() : requêtes média
• supports() : compatible avec les requêtes

Voici quelques exemples pour illustrer ce concept :

Démo : Requêtes média intégrées

L'utilisation de if() est un excellent moyen d'inclure des requêtes média intégrées dans vos styles. Par exemple, vous pouvez vérifier la préférence de thème d'un utilisateur (clair ou sombre) ou effectuer des requêtes média intégrées pour la largeur de la fenêtre d'affichage. L'exemple suivant montre la requête média pour les périphériques de pointage. La taille par défaut du bouton serait de 30 px sur un appareil doté d'un pointeur précis, comme une souris. En revanche, pour les appareils à écran tactile, tels que ceux dotés d'un pointeur imprécis, la taille du bouton serait de 44 px, soit la taille minimale recommandée pour un espacement tactile approprié et 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 média suivante :

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

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

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

Démo : 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 le code suivant :

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 colorimétrique 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 modèle RVB et les espaces colorimétriques 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, vous pouvez styliser les cartes de progression en fonction de leur état d'UI (en attente ou terminé). 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="complete">
  ...
</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() à l'intérieur d'une fonction if(), vous pouvez styliser directement l'élément que vous ciblez, sans avoir besoin d'un élément parent comme le feraient les requêtes de style CSS.

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

Étape suivante

L'ajout de if() offre une nouvelle opportunité architecturale aux développeurs CSS. À mesure que des technologies telles que les requêtes de style évoluent, il sera probablement possible d'effectuer des requêtes de plage dans les fonctions if(). Elles seront également utiles lorsqu'elles seront combinées avec la prochaine proposition de fonctions personnalisées (CSS @function).

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

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