Feature query.

@supports.

@supports permet de vérifier si le code utilisé est supporté ou pas. S'il l'est, le code se trouvant entre les accolades d'@supports sera appliqué sinon il sera ignoré. Il faut donc prévoir un code de remplacement. Le code compris dans '@supports' peut écraser un style par défaut.

@supports (display: flex) {
	.bloc { display: flex;}
}

@supports not (display: flex) {
	.bloc { display: block; }
}
									

L'opérateur 'and' permet de vérifier si toutes les propriétés sont supportées.

@supports (display: flex) and (transform: scaleX(2)) {
	.bloc {
		display: flex;
		transform: scaleX(2);
}

@supports not (display: flex) {
	.bloc { display: block; }
}
									

l'opérateur 'or' permet de savoir si au moins l'une des propriétés est supportée.

@supports (display: flex) or (transform: scaleX(2)) {
	.bloc {
		display: flex;
		transform: scaleX(2);
}

@supports not (display: flex) {
	.bloc { display: block; }
}
									

Il est aussi possible de vérifier si les variables sont supportées.

@supports (--color-text: black) {
	.p {
		color: var(--color-text);
}
									


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 04/01/2021