@supports - Directive CSS
Résumé des caractéristiques de la directive @supports
Description de la 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,
tout en permettant un basculement automatique vers les nouvelles syntaxes au fur et à mesure que les
navigateurs les reconnaissent.
Dans l'exemple ci-dessous on teste si le navigateur connaît 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 de la directive @supports
.
- @supports (display:grid) { ... }
Tester l'existence d'une propriété et d'une valeur.
Notre exemple teste si le navigateur est capable de reconnaître la propriété
display
et de lui affecter la valeurgrid
.Attention à ne pas écrire de point-virgule dans la syntaxe de
@supports
, cela perturbe de nombreux navigateurs et fausse le résultat.Pour tester la prise en charge d'une propriété sans spécifier de valeur, il est possible d'écrire :
@supports (xxx:initial)
. La valeurinitial
est en effet commune à toutes les propriétés. - @supports not(display:grid) { ... }
Inversion du test.
La fonction
not()
inverse le résultat. Autrement dit teste si le navigateur ne reconnaît pas la propriétédisplay
ou la valeurgrid
. - @supports (filter:blur(5px)) or (-ms-filter:blur(5px)) { ... }
Combinaison de plusieurs tests.
Les mots-clé
or
etand
peuvent être utilisés pour combiner des expressions. Chacune des conditions doit être entre parenthèses. C'est particulièrement utile, comme sur cet exemple, pour tester une propriété standard et les variantes spécifiques aux navigateurs.Lorsque l'expression fait apparaître à la fois
and
etor
, des parenthèses doivent obligatoirement indiquer l'ordre de préséance.@supports (prop1:value1) and (prop2:value2) or (prop3:value3) // Incorrect @supports ( (prop1:value1) and (prop2:value2) ) or (prop3:value3) // Correct @supports (prop1:value1) and ( (prop2:value2) or (prop3:value3) ) // Correct
- @supports selector( expr ) { ... }
Test d'un sélecteur.
Teste si le navigateur reconnaît l'expression
expr
indiquée comme un sélecteur valide. Le test ne s'effectue pas sur l'orthographe des mots eux mêmes, mais plutôt sur la syntaxe utilisée pour combiner plusieurs sélecteurs.selector(div)
⟵ Indiquera un sélecteur valide. selector(zorglub)
⟵ Indiquera un sélecteur valide.
En effet un document XML peut très bien comporter des balises zorglub.selector(!div)
⟵ Indiquera un sélecteur invalide à cause du caractère !
qui n'est pas reconnu.selector(div,p)
⟵ Indiquera un sélecteur invalide car en fait on essaie de tester ici deux sélecteurs à la fois. selector(:is(h1,h2,h3))
⟵ Indiquera un sélecteur valide si le navigateur traite la fonction :is()
. - @supports font-format( svg ) { ... }
Test d'un format de police de caractères.
Les principaux formats de police sont :
opentype
,embedded-opentype
,truetype
,svg
,woff
,woff2
... - @supports font-tech( features-opentype ) { ... }
Test d'une technologie relative aux polices de caractères.
Les principales technologies sont :
features-opentype
,features-aat
,features-graphite
,
color-COLRv0
,color-COLRv1
,color-svg
,color-sbix
,color-CBDT
,
variations
,palettes
,incremental-patch
,incremental-range
,incremental-auto
...
Exemples d'utilisation de la directive @supports
.
Tester la reconnaissance d'une unité.
Dans cet exemple, on teste si les unités vw
(largeur du viewport) et vz
(inexistante)
sont reconnues. Pour cela on choisit une propriété au hasard parmi celles qui acceptent une valeur du type dimension.
Nous avons pris width
.
vw
vz
Adapter le code CSS en fonction des syntaxes reconnues.
Dans cet exemple, la directive @supports
est utilisée pour tester la prise en charge d'une unité. La largeur du bloc ci-dessous est dimensionnée
à 50%
ou 50vw
en fonction des possibilités du navigateur.
Tester un sélecteur.
Dans ce troisième exemple, la directive @supports
est utilisée avec la fonction selector()
pour évaluer
si des expressions sont valides en tant que sélecteur.
La première expression est valide bien sûr : elle désigne les balise p incluses dans une balise div.
La deuxième, qui utilise un opérateur -
, est par contre totalement fantaisiste.
div > p
div - p
Compatibilité des navigateurs avec la directive @supports
.
@supports
permettant de tester si une syntaxe est acceptée.selectors()
utilisée avec la directive @supports
, pour tester la validité d'un sélecteur.font-tech()
, pour tester la validité d'une technologie relative aux polices de caractères : features-opentype
, color-colr-colrv1
, etc.font-format()
pour tester le support d'un format police de caractères : SVG
, woff
, etc.@supports
selector()
font-tech()
font-format()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini
Évolution de la directive @supports
.
-
Module CSS - Règles conditionnelles - Niveau 3
Première introduction de la directive@supports
, permettant de tester si un ensemble propriété/valeur est reconnu par le navigateur.01 Septembre 2011Document de travail.04 Avril 2013Candidat à la recommandation. -
Module CSS - Règles conditionnelles - Niveau 4
La directive@supports
s'enrichit pour permettre le test de sélecteurs ou de combinaisons de sélecteurs.03 Mars 2020Document de travail.17 Février 2022Candidat à la recommandation. -
Module CSS - Règles conditionnelles - Niveau 5
La directive@supports
est une nouvelle fois complétée pour permettre le test de la reconnaissance de formats de polices de caractères ou de technologies en rapport avec les polices.21 Décembre 2021Document de travail.
Voir aussi : règles CSS conditionnelles.
Toutes ces directives sont décrites dans la spécification "module CSS - Règles conditionnelles" (CSS Conditional Rules Module).