CSS - Directive @supports
@supports est une directive du langage CSS dont le
rôle est de tester la prise en charge d'une expression par le navigateur. Elle facilite le travail du
développeur en lui permettant de proposer des syntaxes alternatives pour les navigateurs non compatibles.
Description de la directive @supports.
Permet de tester la compatibilité du navigateur avant d'appliquer des règles qui pourraient avoir un effet désastreux.
Dans l'exemple ci-dessous on teste si le navigateur connait la propriété font-variant-caps
avec la valeur small-caps.
Dans l'affirmative on utilise cette propriété.
Dans le cas contraire on fait appel à l'ancienne syntaxe de CSS2,
qui utilise la propriété font-variant.
@supports (font-variant-caps:small-caps) {
#exemple1 {font-variant-caps:small-caps;}
}
@supports not (font-variant-caps:small-caps) {
#exemple1 {font-variant:small-caps;}
}
Syntaxes pour @supports.
@supports (propriété:valeur)Teste si le navigateur est capable de reconnaître cette propriété et de lui affecter cette valeur.
@supports not(propriété:valeur)La fonction
not()inverse le résultat. Autrement dit teste si le navigateur ne reconnaît pas la propriété ou la valeur indiquée.@supports selector(sélecteur) ⚠Teste si le navigateur reconnait le sélecteur indiqué. Bien sûr cela fonctionne aussi pour les pseudo-classes et les pseudo-éléments. Mais la fonction
selector()est encore mal reconnue.@supports (prop1:val1) and (prop2:val2)L'opérateur
andassocie deux tests. Les tests doivent être positifs tous les deux pour que l'expresson dans son sensemble soit validée.@supports (prop1:val1) and (prop2:val2)L'opérateur
orassocie deux tests. Les tests doivent être positifs tous les deux. Il suffit que l'un des deux tests soit positif pour que l'expression soit validée (ils peuvent aussi être tous les deux positifs).
Exemples.
Dans cet exemple, on teste si l'unité vw
(largeur du viewport) est reconnue, auquel cas on l'utilise pour définir la largeur de l'élément.
Dans le cas contraire (par défaut) on utilise des pourcentages.
On change également la couleur pour qu'on puisse voir du premier coup d'œil quelles sont les règles
prises en compte.