Les ajouts majeurs à CSS sont assez rares, donc l’inclusion de la fonction if() est un événement assez important pour les concepteurs web. Les styles conditionnels étaient attendus depuis longtemps, c’est une bonne chose de les voir implémentés, même s’ils ne sont pas encore supportés par tous les navigateurs. Voyons de quoi il retourne.

Vous pouvez voir tous les exemples donnés ci-dessous en contexte sur ce repo Github (démo).

Les bases

En bref, les conditionnelles CSS vous permettent de vous débarrasser du js, des préprocesseurs et autres solutions de contournement lourdes lorsque vous devez définir des propriétés CSS en fonction de conditions spécifiques.

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

En résumé, pour une propriété, il y aura une séquence de styles à appliquer pour diverses conditions. Si aucune condition n’est remplie, la valeur ‘else’ sera appliquée.

Actuellement, les conditions CSS fonctionnent avec les trois types de requêtes suivants.

1. Requêtes de style

En utilisant style(), vous pouvez adapter votre CSS à des propriétés personnalisées. Avec un seul attribut de données, vous pouvez maintenant contrôler le style à un seul endroit. Dans l’exemple ci-dessous, j’ai modifié le style (bordure et couleur de fond) en fonction du statut d’un div.

.test-box {
   border: if(
      style(--status: stop): 2px dashed #ccc;
      style(--status: ready): 2px dashed #ffcc66;
      style(--status: go): 2px dashed #bbff99;
      else: 2px dotted #aaa;
   );
   padding: 15px;
   margin: 10px 0;
   --status: attr(data-status type(<custom-ident>));
   background-color: if(
      style(--status: stop): #ff1a1a;
      style(--status: ready): #ffcc66;
      style(--status: go): #bbff99;
      else: #ddd
   );
}

Un autre bon exemple de la fonction CSS if() pour une requête média est de l’utiliser pour tester si vous êtes sur un appareil qui n’utilise pas de dispositif de pointage, comme une tablette. Pour cela, consultez notre exemple où nous changeons le padding du bouton sur les tablettes et les téléphones pour qu’il soit plus facile à presser.

.button {
   display: inline-block;
   padding: if(
      media(any-pointer: fine): 10px 20px;
      else: 20px 40px;
   );
   background: #007bff;
   color: white;
   text-decoration: none;
   border-radius: 4px;
   margin: 5px;
}

2. Requêtes média

Finis les grands blocs pour chaque requête média, qui séparent vos valeurs et rendent la maintenance désordonnée. Désormais, chaque élément peut être défini pour chaque taille d’écran à un seul endroit. Cela peut également être utilisé pour le CSS d’impression, entre autres. Dans l’exemple ci-dessous, vous pouvez voir comment je l’ai utilisé pour adapter la largeur maximale du conteneur de la page web pour différentes tailles d’écran.

.container {
   max-width: if(
      media(width >= 1200px): 800px;
      media(768px <= width < 1200px): 600px;
      media(480px <= width < 768px): 450px;
      else: 90%
   );
   margin: 0 auto;
   background: white;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

3. Requêtes de support

La condition if() vous permet également de vérifier le support de diverses fonctionnalités avant de l’utiliser, vous permettant d’avoir une version de fallback à afficher lorsqu’une propriété n’est pas supportée. Cela peut être utilisé pour le support des espaces colorimétriques, le support de la mise en page ou de l’affichage, les fonctionnalités CSS avancées, les unités typographiques, les fonctionnalités d’animation et de transformation, ou les fonctionnalités de support spécifiques au navigateur.

Dans cet exemple, nous vérifions si le navigateur peut afficher les valeurs de couleur OKLCH, sinon nous lui demandons d’utiliser la valeur HEX la plus proche pour l’arrière-plan.

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 20px;

   background-color: if(
      supports(color: oklch(0.83 0.08 94 / 10.24%)): oklch(0.83 0.08 94 / 10.24%);
      else: #e0e0e01a;
   );

}

Support des navigateurs pour la fonction CSS conditionnelle if()

Malheureusement, vous devrez peut-être attendre un peu avant de commencer à utiliser la fonction CSS if() sur des projets de production, car le support n’est pas encore suffisamment large. Les navigateurs les plus notables qui ne la supportent pas sont Firefox et Safari, qui représentent une part de marché combinée de 15 à 20 %. Cependant, vous devriez déjà essayer de jouer avec elle et voir comment elle peut vous aider dans un avenir proche pour vos projets.

Qu’est-ce qui arrive ensuite ?

L’évolution de CSS se poursuit dans les coulisses ! Le CSS Working Group ébauche déjà de nouvelles fonctionnalités puissantes pour la fonction if(). Imaginez vérifier si une propriété personnalisée se situe dans une certaine plage, combiner plusieurs vérifications logiques ou prendre des décisions basées sur la taille du conteneur d’un élément.