CSS
Requêtes sur les fonctionnalités

Syntaxe

• @supports [condition] {/ * Règles CSS à appliquer * /}

Paramètres

Remarques

Utilisation de base @supports

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

En termes de syntaxe, @supports est très similaire à @media , mais au lieu de détecter la taille et l'orientation de l'écran, @supports détecte si le navigateur peut gérer une règle CSS donnée.

Plutôt que de faire quelque chose comme @supports (flex) , notez que la règle est @supports (display: flex) .

Détection des fonctions de chaînage

Pour détecter plusieurs fonctionnalités à la fois, utilisez l'opérateur and .

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

Il y a aussi un opérateur or un opérateur et un opérateur not :

@supports (display: flex) or (display: table-cell) {
  /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
  /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

Pour l'expérience ultime @supports , essayez de regrouper les expressions logiques avec des parenthèses:

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

Cela fonctionnera si le navigateur

1. Supporte l' display: block ET zoom: 1 ou
2. Prend en charge l' display: flex ET pas display: table-cell , ou
3. Prend en charge la transform: translateX(1px) .