@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 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 (display:grid) { ... }
Teste si le navigateur est capable de reconnaître la propriété
displayet 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. - @supports not(display:grid) { ... }
La fonction
not()inverse le résultat. Autrement dit teste si le navigateur ne reconnaît pas la propriétédisplayou la valeurgrid. - @supports (filter:blur(5px)) or (-ms-filter:blur(5px)) { ... }
Les mots-clé
oretandpeuvent ê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
andetor, 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 ) { ... }
Teste si le navigateur reconnaît l'expression
exprindiqué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().
Exemples d'utilisation de @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.
vwvzAdapter le code CSS en fonction des syntaxes reconnues.
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 > pdiv & pPrise en charge par les navigateurs (compatibilité).
@supports.
@supports avec selector().
features-opentype,
color-colrv1, etc.
svg, truetype, etc.
@supportsselector()font-techfont-formatNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que @supports.
Les spécifications CSS éditées par le W3C sont organisées en modules. @supports fait partie du Module CSS - Règles conditionnelles (CSS Conditional Rules Module). Les définitions suivantes sont également décrites dans ce même module.