Règle @supports CSS

Définition et utilisation

CSS @supports La règle est utilisée pour tester si le navigateur prend en charge une certaine fonctionnalité CSS et définit des styles de remplacement si ce n'est pas le cas.

Exemple

Si le navigateur prend en charge display: grid, appliquez @supports CSS à l'intérieur de la règle. S'il ne prend pas en charge, appliquez @supports Styles de la classe .container en dehors de la règle :

/* Si le navigateur ne prend pas en charge display: grid, utilisez ce CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Si le navigateur prend en charge display: grid, utilisez ce CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Essayez-le vous-même

syntaxe CSS

@supports (supports-condition) {
  /* Si la condition est vraie, appliquez ce CSS */
}

Valeur de l'attribut

Valeur Description
supports-condition

Définissez les conditions sous forme de paires nom-valeur (property: value) ou de syntaxe function().

Les conditions peuvent être combinées par and, or ou not.
selector()

est une syntaxe function(). Vérifiez si le navigateur prend en charge la syntaxe de sélecteur spécifiée.

Par exemple, @supports selector(h2 > p) si le navigateur prend en charge les sélecteurs enfants, il renvoie true et applique le style CSS.
font-tech()

est une syntaxe function(). Vérifiez si le navigateur prend en charge la technologie de police spécifiée.

Par exemple, @supports font-tech(color-svg) si le navigateur prend en charge les tableaux SVG multicolores, il renvoie true et applique le style CSS.
font-format()

est une syntaxe function(). Vérifiez si le navigateur prend en charge le format de police spécifié.

Par exemple, @supports font-format(woff) si le navigateur prend en charge WOFF 1.0, il renvoie true et applique le style CSS.

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge la règle @ pour la première fois.

@ règle Chrome Edge Firefox Safari Opera
@supports 28 12 22 9 12.1
font-format() 108 108 106 17 94
font-tech() 108 108 106 17 94
selector() 83 83 69 14.1 69