If en CSS 3 : La structure conditionnelle if

Pendant longtemps, le langage CSS a été perçu comme un outil purement déclaratif, limité à la mise en forme et à la présentation visuelle. Les développeurs web devaient jongler avec JavaScript, Sass ou Less pour introduire une logique conditionnelle et rendre les styles plus intelligents. Or, une nouveauté passionnante change la donne : l’apparition de la structure conditionnelle if() en CSS.

Cette avancée ouvre des perspectives inédites. Il devient désormais possible d’ajouter des conditions directement dans les propriétés CSS, sans passer par des langages annexes. Vous pouvez ainsi appliquer une valeur différente en fonction d’une situation précise, comme une largeur d’écran, une fonctionnalité supportée par le navigateur ou encore une variable CSS définie dans le code.

Dans ce tutoriel, nous allons explorer pas à pas ce nouveau mécanisme. Vous découvrirez ce qu’est réellement la structure conditionnelle en CSS, à quoi elle sert, ses avantages mais aussi ses limites actuelles. Nous verrons ensemble sa syntaxe complète, son degré de compatibilité avec les différents navigateurs et nous illustrerons chaque explication avec des exemples concrets.

L’objectif est simple : que vous soyez débutant ou confirmé, vous repartiez avec une compréhension claire et pratique de cette fonctionnalité.

Qu’est-ce que la structure conditionnelle if en CSS ?

Pour commencer, il est important de comprendre ce que signifie le terme structure conditionnelle. Dans les langages de programmation, une structure conditionnelle permet de tester une situation donnée et d’exécuter un bloc de code si cette condition est remplie. Par exemple, en JavaScript, on écrit souvent :

if (x > 10) {
  console.log("x est supérieur à 10");
}

Jusqu’à récemment, rien de tel n’existait en CSS. Il fallait utiliser des astuces comme les media queries, les pseudo-classes ou encore les préprocesseurs CSS (Sass, Less) pour simuler des comportements conditionnels.

Mais avec l’arrivée de la fonction if() en CSS, la donne change. Il devient possible d’écrire une condition directement dans une valeur de propriété. En d’autres termes, vous pouvez dire :

• Si telle condition est vraie, applique cette valeur.
• Sinon, applique une autre valeur.

Cela rapproche CSS d’un langage beaucoup plus intelligent et contextuel, sans le dénaturer.

À quoi sert cette nouveauté CSS ?

La structure conditionnelle if en CSS sert avant tout à adapter automatiquement le style en fonction de l’environnement ou du contexte. Concrètement, elle permet de :

1. Simplifier le code en évitant des doublons. Vous pouvez regrouper plusieurs règles dans une seule déclaration.
2. Réduire la dépendance à JavaScript pour gérer des cas simples.
3. Introduire des comportements dynamiques dans le style, sans surcharger la feuille CSS.
4. Rendre le code plus lisible et plus proche de la logique de pensée du développeur.

Imaginons un exemple : vous voulez que la taille de la police soit plus grande si l’écran est large, et plus petite sinon. Avant, vous deviez écrire une media query complète. Aujourd’hui, vous pouvez écrire la condition directement dans la propriété font-size.

Les avantages de la structure conditionnel en CSS

L’apparition de if() apporte plusieurs bénéfices clairs :

Une meilleure lisibilité du code : Au lieu de disperser les styles entre différentes sections et media queries, vous pouvez centraliser la logique conditionnelle dans une seule propriété. Cela rend la feuille CSS plus claire, plus compacte et plus facile à maintenir.

Moins de dépendances externes : De nombreux développeurs utilisaient Sass ou Less uniquement pour profiter des conditions. Désormais, une partie de cette logique est disponible directement en CSS natif.

Une puissance accrue : Le CSS devient capable de prendre des décisions. Certes, il ne s’agit pas de conditions complexes comme en programmation classique, mais c’est déjà une avancée majeure qui rapproche le style d’un comportement dynamique.

Une meilleure performance : En limitant le recours à JavaScript pour gérer des conditions de style simples, on réduit la charge côté client. Le navigateur peut interpréter directement les conditions CSS, ce qui améliore la fluidité et la rapidité du rendu.

Les limites actuelles

Il est essentiel d’être conscient que cette fonctionnalité est encore très récente. Elle n’est pas encore parfaitement supportée par tous les navigateurs. Pour l’instant :

• Chrome et les navigateurs basés sur Chromium (comme Edge) commencent à la prendre en charge.
• Safari et Firefox accusent un certain retard.
• Les anciens navigateurs ne la reconnaissent pas du tout.

De plus, la syntaxe peut sembler encore un peu lourde pour des débutants, car elle nécessite de comprendre certains concepts comme style(), media() ou supports().

Enfin, il faut toujours prévoir une valeur de repli (fallback) au cas où la condition n’est pas supportée. C’est une bonne pratique pour garantir la compatibilité.

Comment utiliser la structure conditionnel if en CSS ?

Voyons maintenant comment mettre cette fonctionnalité en pratique.

La fonction if() s’écrit directement dans la valeur d’une propriété CSS. Elle suit une syntaxe bien définie qui permet de déclarer plusieurs conditions successives.

Syntaxe générale :

propriété: if(
  condition1: valeur1;
  condition2: valeur2;
  else: valeurParDefaut;
);

• condition1 est la première situation à tester. Si elle est vraie, la propriété prend valeur1.
• Si condition1 est fausse, on teste condition2.
• On peut enchaîner autant de conditions que nécessaire.
• Si aucune condition n’est remplie, le mot-clé else permet de définir une valeur de repli.

C’est un peu comme une cascade de choix logiques, exactement comme en programmation.

La fonction if() en CSS se présente comme une expression que vous pouvez placer directement dans une propriété. Elle n’agit pas sur un bloc de code comme dans d’autres langages (par exemple en JavaScript), mais seulement sur la valeur de la propriété où elle est utilisée.

Chaque partie a un rôle précis :

• La condition : c’est ce que CSS va tester (par exemple, si une variable est définie, si une propriété a une certaine valeur, si un media query est vrai, etc.).
• La valeur associée : c’est la valeur que prendra la propriété si la condition est remplie.
• Le else (facultatif) : c’est la valeur de secours, utilisée si aucune condition n’est vraie.

Il est possible d’utiliser plusieurs conditions à la suite. Le navigateur les teste dans l’ordre, un peu comme une cascade logique. La première qui correspond est retenue.

Les trois types de conditions disponibles

À cet instant, trois tests principaux sont possibles avec if() :

La fonction style()

Cette condition interroge la valeur d’une propriété CSS (généralement une variable personnalisée) sur l’élément courant.

Exemple :

p {
  --tailleTexte: 18px;

  font-size: if(
    style(--tailleTexte) > 16px: var(--tailleTexte);
    else: 14px;
  );
}

Explication :

• Ici, on regarde si la variable --tailleTexte est supérieure à 16px.
• Si oui, on applique sa valeur (18px).
• Sinon, on applique 14px.

C’est un peu comme dire : “utilise la taille prévue si elle est assez grande, sinon prends une valeur par défaut”.

La fonction media()

Elle permet de tester un media query directement dans la condition. C’est une grande nouveauté, car jusque-là les media queries étaient obligatoirement placées à part dans une règle @media.

Exemple :

h1 {
  font-size: if(
    media(width > 800px): 3rem;
    else: 2rem;
  );
}

Explication :

• Si la largeur de l’écran est supérieure à 800 pixels, la taille de la police sera de 3rem.
• Sinon, elle sera de 2rem.

Cela permet d’intégrer les comportements responsive directement dans les propriétés, ce qui rend le code plus compact et plus lisible.

La fonction supports()

Elle teste si le navigateur supporte une propriété ou une fonctionnalité donnée. C’est similaire à la règle @supports, mais directement utilisable dans une propriété.

Exemple :

div {
  display: if(
    supports(display: grid): grid;
    else: flex;
  );
}

Explication :

• Si le navigateur supporte la propriété display: grid, alors l’élément sera affiché en grille.
• Sinon, il retombera sur flex.

C’est particulièrement utile pour écrire du code compatible avec de vieux navigateurs sans multiplier les blocs @supports.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Exemple concret : adapter la couleur d’un bouton

Voyons un exemple pratique qui mélange logique conditionnelle et variables CSS.

button {
  --mode: "dark";

  background-color: if(
    style(--mode) = "dark": black;
    style(--mode) = "light": white;
    else: gray;
  );

  color: if(
    style(--mode) = "dark": white;
    else: black;
  );
}

Explication :

• On définit une variable --mode avec la valeur "dark".
• Si --mode est égal à "dark", alors l’arrière-plan est noir et le texte est blanc.
• Si --mode est égal à "light", alors l’arrière-plan est blanc et le texte est noir.
• Si aucune condition n’est remplie (par exemple, si la variable n’est pas définie), on applique une couleur de secours (gray pour l’arrière-plan et black pour le texte).

Ce mécanisme permet de créer facilement des thèmes clair/sombre, directement en CSS, sans recours obligatoire à JavaScript.

Exemple concret : un texte qui s’adapte à la largeur de l’écran

p {
  font-size: if(
    media(width > 1000px): 20px;
    media(width > 600px): 16px;
    else: 12px;
  );
}

Explication :

• Si l’écran est très large (plus de 1000px), la police sera grande (20px).
• Si l’écran est moyen (plus de 600px), la police sera normale (16px).
• Sinon, elle sera petite (12px).

On obtient donc un responsive fluide directement intégré dans une seule déclaration.

Cas d’usage réels de la structure conditionnel en CSS

La fonction if() ouvre de nombreuses possibilités pratiques. Au-delà des exemples simples déjà évoqués, voyons comment elle peut s’appliquer dans des situations du quotidien pour améliorer vos interfaces.

Création d’un design responsive simplifié

Traditionnellement, vous auriez besoin de plusieurs règles @media pour adapter une mise en page. Avec if(), vous pouvez centraliser la logique directement dans vos propriétés.

.container {
  padding: if(
    media(width > 1200px): 4rem;
    media(width > 800px): 2rem;
    else: 1rem;
  );
}

Ici, le conteneur ajuste automatiquement ses marges internes selon la largeur de l’écran, en une seule déclaration.

Gestion de thèmes clair et sombre

Le changement de thème est une pratique courante. Avec if(), vous pouvez basculer entre des couleurs selon une variable CSS définie au préalable.

body {
  --theme: "light";

  background: if(
    style(--theme) = "dark": #111;
    else: #fff;
  );

  color: if(
    style(--theme) = "dark": #eee;
    else: #000;
  );
}

Il suffit de modifier la variable --theme dans le code pour que tout le style s’adapte.

Fallback en cas de fonctionnalités manquantes

Vous pouvez anticiper des situations où certains navigateurs ne supportent pas une propriété moderne.

.grid {
  display: if(
    supports(display: masonry): masonry;
    else: grid;
  );
}

Ainsi, vos utilisateurs profitent d’une mise en page moderne si possible, et conservent un affichage correct sinon.

Imbrication de conditions if en CSS

Il est tout à fait possible d’imbriquer plusieurs if() à l’intérieur d’une même déclaration. Cela permet d’écrire des conditions plus fines.

.card {
  font-size: if(
    media(width > 1200px): if(
      style(--mode) = "dark": 22px;
      else: 20px;
    );
    media(width > 800px): 18px;
    else: 14px;
  );
}

Dans cet exemple :

• Si l’écran est très large et que le thème est sombre, la taille sera 22px.
• Si l’écran est très large mais le thème est clair, la taille sera 20px.
• Si l’écran est moyen, la taille sera 18px.
• Sinon, elle sera 14px.

Cela permet une finesse de contrôle sans multiplier les sélecteurs et les blocs CSS.

Compatibilité avec les navigateurs

C’est probablement l’aspect le plus important à maîtriser avant d’utiliser if() en production.

Support actuel (Septembre 2025)

• Chrome : pris en charge depuis la version 137.
• Edge (basé sur Chromium) : suit le même rythme que Chrome.
• Safari : prise en charge partielle en cours de développement.
• Firefox : pas encore implémenté au moment de la rédaction.
• Navigateurs anciens (Internet Explorer, anciennes versions de Chrome/Firefox/Safari) : pas de support du tout.

Conséquences pratiques

Si vous utilisez if() aujourd’hui, vous devez absolument prévoir un fallback pour que le rendu reste correct sur les navigateurs non compatibles. En pratique, cela signifie écrire d’abord une valeur par défaut, puis surcharger avec une déclaration if().

Exemple :

h1 {
  font-size: 16px; /* Fallback pour les anciens navigateurs */

  font-size: if(
    media(width > 1000px): 24px;
    media(width > 600px): 20px;
    else: 16px;
  );
}

Ainsi, les navigateurs récents appliqueront les conditions, tandis que les autres conserveront la valeur fixe.

Bonnes pratiques pour utiliser if() en CSS

1. Toujours fournir un fallback. C’est la clé pour éviter les mauvaises surprises.
2. Limiter les imbrications. Même si elles sont possibles, trop d’if() imbriqués rendent le code difficile à lire.
3. Utiliser else intelligemment. Cela garantit que la propriété ne reste pas vide si aucune condition n’est remplie.
4. Tester sur plusieurs navigateurs avant de déployer. Ce mécanisme est encore jeune, et il vaut mieux s’assurer du rendu sur Chrome, Safari et Firefox.
5. Préférer if() pour des ajustements simples. Pour des logiques complexes, les media queries classiques et les préprocesseurs restent parfois plus clairs.

Exemples avancés et créatifs d’utilisation de la structure conditionnel

Maintenant que nous avons vu les bases et les cas classiques, découvrons des situations un peu plus originales où if() peut rendre votre code plus élégant.

Exemple 1 : Animer une interface selon un mode défini

Imaginons une carte produit qui doit changer d’effet visuel selon le thème du site.

.card {
  --theme: "dark";

  box-shadow: if(
    style(--theme) = "dark": 0 4px 10px rgba(255, 255, 255, 0.2);
    else: 0 4px 10px rgba(0, 0, 0, 0.2);
  );

  transition: if(
    style(--theme) = "dark": transform 0.3s ease-in;
    else: transform 0.3s ease-out;
  );
}

Explication :
Le mode sombre affiche une ombre claire et une transition plus douce, tandis que le mode clair utilise une ombre foncée et une animation plus vive. Une logique conditionnelle gère le tout dans la même déclaration.

Exemple 2 : Gérer plusieurs résolutions en une seule propriété

Un site e-commerce veut que ses images de produits soient carrées sur mobile, mais rectangulaires sur écran large.

.product-image {
  aspect-ratio: if(
    media(width > 1200px): 16/9;
    media(width > 800px): 4/3;
    else: 1/1;
  );
}

Explication :
Avec une seule propriété, l’image adopte automatiquement un ratio adapté à la taille de l’écran, sans multiplier les blocs @media.

Exemple 3 : Choisir une unité selon la prise en charge du navigateur

Certains navigateurs gèrent mal les nouvelles unités comme lvh. Avec if(), vous pouvez basculer automatiquement.

.section {
  height: if(
    supports(height: 100lvh): 100lvh;
    else: 100vh;
  );
}

Explication :
Si le navigateur supporte l’unité lvh, on l’utilise. Sinon, on retombe sur vh. Cela garantit un affichage cohérent pour tous les utilisateurs.

Comparaison entre if() et les méthodes traditionnelles

Vous pourriez vous demander : pourquoi utiliser if() alors que nous avons déjà les media queries et @supports ? La réponse tient en trois points.

Media queries classiques

• Avantage : elles sont très largement supportées et permettent de cibler des blocs entiers de style.
• Limite : elles dispersent le code et obligent à répéter certaines propriétés.

Avec if(), vous pouvez intégrer directement le responsive à l’intérieur d’une propriété unique, ce qui simplifie la lecture.

@supports classique

• Avantage : permet de gérer la compatibilité entre navigateurs.
• Limite : oblige à écrire des blocs séparés, ce qui augmente la taille du CSS.

Avec if(), vous centralisez la logique de compatibilité directement dans la propriété concernée.

Variables CSS

• Avantage : introduisent déjà une forme de logique dynamique.
• Limite : elles ne permettent pas de tester des conditions sans aide externe.

if() comble cette lacune en rendant possible la prise de décision en fonction de la valeur d’une variable.

Quand utiliser if() en CSS ?

La structure conditionnel doit être utilisée avec discernement. Voici les cas où elle est particulièrement pertinente :

• Pour gérer des valeurs différentes selon l’écran, sans vouloir écrire plusieurs media queries.
• Pour introduire un thème clair/sombre ou toute autre logique basée sur une variable CSS.
• Pour fournir des fallbacks intelligents quand une fonctionnalité CSS n’est pas supportée par tous les navigateurs.
• Pour simplifier du code qui serait autrement répétitif et éparpillé.

En revanche, pour des projets qui doivent absolument rester compatibles avec des navigateurs anciens, il est préférable de continuer à s’appuyer sur les méthodes classiques.

La structure conditionnel if en CSS marque une étape importante dans l’évolution de ce langage. Elle introduit une logique jusqu’ici réservée aux langages de programmation, en permettant aux propriétés CSS de prendre des décisions en fonction de conditions.

Grâce à if(), vous pouvez :

• écrire des styles plus compacts et lisibles,
• gérer facilement le responsive et les thèmes,
• offrir une compatibilité renforcée grâce aux tests supports(),
• réduire le recours à JavaScript pour des ajustements simples.

Toutefois, comme toute nouveauté, son usage doit être accompagné de précautions. La compatibilité entre navigateurs reste inégale, et il est indispensable de fournir des fallbacks.

En résumé, la structure conditionnel apporte une nouvelle dimension au CSS. Elle ne remplace pas totalement les media queries ou les blocs @supports, mais elle les complète de manière élégante. En l’adoptant progressivement et intelligemment, vous rendrez vos feuilles de style plus puissantes et plus modernes.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr