La règle @supports

La règle @supports définit le style des éléments en tenant compte des fonctionnalités prises en charge par le navigateur. Dans cette règle, il est possible de créer des conditions à l'aide des opérateurs logiques not, and, or.

Syntaxe

@supports condition {
	
}

Exemple

Définissons une condition : si votre navigateur prend en charge la propriété display avec la valeur flex, alors seul le paragraphe avec le texte correspondant s'affichera, et la couleur de sa police sera bleu clair :

<p class="yes">Votre navigateur prend en charge display: flex.</p>
<p class="no">Votre navigateur ne prend pas en charge display: flex.</p>

@supports (display: flex) {
	.no {
		display: none;
	}
	p {
		color: #467CBC;
	}
}
@supports not (display: flex) {
	.yes {
		display: none;
	}
}

Voir aussi

la règle @import,
qui importe un fichier CSS
la règle @media,
qui définit le style pour un type de média
la règle !important,
qui définit la priorité du style