@supports vérifie si un navigateur reconnaît une déclaration CSS. Utilisez cette règle pour ajouter une amélioration à une mise en page qui reste utilisable même sans cette fonctionnalité récente.

.card {
  display: block;
}

@supports (display: grid) {
  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

Détection des fonctionnalités, pas des noms de navigateur

  • Testez la propriété exacte et évaluez les besoins d’amélioration.
  • Gardez la solution de secours significative plutôt que de masquer le contenu important.
  • Utilisez et/ou/pour ne pas combiner les vérifications lorsqu'une fonctionnalité dépend de plusieurs déclarations.

N'oubliez pas que la prise en charge de la syntaxe n'est pas tout.

Une vérification de support réussie vous indique que le navigateur analyse une déclaration ; cela ne prouve pas que chaque détail fonctionne parfaitement ou que la fonctionnalité est adaptée à la page. Testez l’interaction réelle et conservez une solution de repli raisonnable.

Utilisez les requêtes de fonctionnalités pour des améliorations, et non comme un substitut à la vérification de la prise en charge du navigateur ou au test d'une mise en page réelle.