@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é
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. - @supports not(display:grid) { ... }
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)) { ... }
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 ) { ... }
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()
.
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
.
vw
vz
Adapter 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 > p
div & p
Prise en charge par les navigateurs (compatibilité).
@supports
.
@supports
avec selector()
.
features-opentype
,
color-colrv1
, etc.
svg
, truetype
, etc.
@supports
selector()
font-tech
font-format
Navigateurs 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.