@supports

Definition

Feature query CSS qui teste le support d'une propriété ou valeur avant de l'appliquer. Permet l'amélioration progressive en servant des styles de fallback aux navigateurs plus anciens.

Analogie

Comme vérifier si un appareil a le bon adaptateur avant de le brancher, avec un plan B si ce n'est pas le cas.

Exemple de code

.grid {
  display: flex; /* Fallback */
}
@supports (grid-template-columns: subgrid) {
  .grid {
    display: grid;
    grid-template-columns: subgrid;
  }
}

Cas d'usage

Utiliser des fonctionnalités CSS modernes avec fallback gracieux pour les navigateurs qui ne les supportent pas.

Termes lies