CSS Règle @supports

La règle CSS @supports

La @supports permet de vérifier si le navigateur prend en charge une propriété ou une valeur CSS spécifique, et de définir des styles de secours si la fonctionnalité n'est pas prise en charge.

Cela est utile pour appliquer des styles uniquement lorsque le navigateur peut les gérer.

Syntaxe de base 

 @supports (property: value) { /* Règles CSS à appliquer si la condition est vraie */ }

Exemple : Utiliser @supports avec grid et flex

Vous pouvez combiner @supports avec du CSS classique pour fournir un style de secours.

Ici, si le navigateur prend en charge display: flex, le CSS à l'intérieur de la règle @supports sera appliqué. Sinon, la classe .container en dehors de la règle @supports sera utilisée :

Exemple

/* utilisez ce CSS si le navigateur ne prend pas en charge display: flex */
.container {
float: left;
width: 100%;
}

/* utilisez ce CSS si le navigateur prend en charge display: flex */
@supports (display: flex) {
.container {
display: flex;
}
}
Essayez-le vous-même »

Ici, si le navigateur prend en charge display: grid, le CSS à l'intérieur de la règle @supports sera appliqué. Sinon, la classe .container en dehors de la règle @supports sera utilisée :

Exemple

/* utilisez ce CSS si le navigateur ne prend pas en charge display: grid */
.container {
display: table;
width: 90%;
background-color: #2196F3;
padding: 10px;
}

/* utilisez ce CSS si le navigateur prend en charge display: grid */
@supports (display: grid) {
.container {
display: grid;
grid: auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
}
Essayez-le vous-même »

Négation avec not

Vous pouvez utiliser not pour appliquer des styles uniquement lorsqu'une fonctionnalité n'est pas prise en charge :

Exemple

@supports not (display: grid) {
.warning {
background-color: pink;
padding: 10px;
border: 1px solid red;
}
}

Combinaison de conditions

Vous pouvez utiliser and , or , et not pour plusieurs conditions :

Exemple

@supports (display: grid) and (gap: 10px) {
.container {
display: grid;
gap: 10px;
}
}

Remarque : Fournissez toujours des styles de secours en dehors de @supports , pour les anciens navigateurs.

Référence CSS

Règle @ Description
@supports Utilisé pour tester si un navigateur prend en charge une fonctionnalité CSS