Par Karsten Biedermann

Imagine pouvoir appliquer des styles CSS en fonction de conditions, directement dans ta feuille de style — sans JavaScript, sans préprocesseurs, sans hacks compliqués. C’est désormais possible grâce à la nouvelle fonction CSS if(), qui vient d’arriver dans les navigateurs compatibles.

🧠 Qu’est-ce que la fonction if() en CSS ?

La fonction if() introduit une logique conditionnelle native dans CSS. Elle permet de définir différentes valeurs pour une propriété selon que certaines conditions soient remplies ou non — très similaire à un if/else dans un langage de programmation.

La syntaxe ressemble à ceci :

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

CSS va évaluer chaque condition dans l’ordre, et appliquer la première valeur correspondante à une condition vraie. Si aucune ne l’est, c’est la valeur else qui est utilisée.

📌 Trois grandes utilisations de if()

1️⃣ Requêtes de style (style())

On peut réagir aux propriétés personnalisées CSS :

.card {
  --status: attr(data-status type(<custom-ident>));

  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    style(--status: error): crimson;
    else: gray
  );
}

Ainsi une seule data-attribute dans le HTML peut contrôler l’apparence de l’élément !

2️⃣ Requêtes média en ligne (media())

Plus besoin de blocs @media imbriqués. Tu peux définir directement des valeurs réactives :

h1 {
  font-size: if(
    media(width >= 1200px): 3rem;
    media(width >= 768px): 2.5rem;
    media(width >= 480px): 2rem;
    else: 1.75rem
  );
}

Cela rend le code plus concis et plus lisible.

3️⃣ Détection de fonctionnalités (supports())

Fini les stratégies de repli aléatoires. Tu peux vérifier si une fonctionnalité est disponible :

.element {
  border-color: if(
    supports(color: lch(0 0 0)): lch(50% 100 150);
    supports(color: lab(0 0 0)): lab(50 100 -50);
    else: rgb(200, 100, 50)
  );
}

Ainsi tu adaptes ton design selon les capacités du navigateur.

💡 Exemples concrets

🌙 Mode sombre en seulement trois lignes

body {
  --theme: "dark"; /* Peut être changé via JS ou préférence utilisateur */

  background: if(
    style(--theme: "dark"): #1a1a1a;
    else: white
  );

  color: if(
    style(--theme: "dark"): #e4e4e4;
    else: #333
  );
}

⚠️ Composants d’interface adaptatifs

.alert {
  --type: attr(data-type type(<custom-ident>));

  background: if(
    style(--type: success): #d4edda;
    style(--type: warning): #fff3cd;
    style(--type: danger): #f8d7da;
    style(--type: info): #d1ecf1;
    else: #f8f9fa
  );

  border-left: 4px solid if(
    style(--type: success): #28a745;
    style(--type: warning): #ffc107;
    style(--type: danger): #dc3545;
    style(--type: info): #17a2b8;
    else: #6c757d
  );
}

Cet exemple montre comment personnaliser l’apparence d’un composant selon son état, sans redondance ou classes CSS multiples.

📊 Support navigateurs (à ce jour)

À la date d’août 2025 :

✅ Chrome/Edge à partir de la version 137
✅ Chrome Android à partir de la version 139
❌ Firefox — en cours de développement
❌ Safari — sur la feuille de route
❌ Opera — pas encore pris en charge Medium

👉 Cela signifie que tu dois encore prévoir des valeurs de repli traditionnelles pour garantir la compatibilité avec tous les navigateurs.

🚀 Et après ?

Le groupe de travail CSS planche déjà sur des extensions :

🧠 Requêtes de plage (ex. : if(style(--value > 100): ...))
🔗 Opérateurs logiques (and, or)
📦 Intégration avec les container queries pour plus d’adaptabilité contextuelle

📌 Conclusion

La fonction if() en CSS marque une étape importante dans l’évolution du langage : elle permet d’introduire une logique déclarative directement au sein du CSS, réduisant le besoin de JavaScript ou de préprocesseurs dans de nombreux cas. Même si le support reste limité à certains navigateurs aujourd’hui, elle ouvre la porte à des styles plus expressifs et puissants. Source : Medium