@supports - Directive CSS

@supports

Résumé des caractéristiques de la directive @supports

Description rapide
Teste la compatibilité du navigateur avec la syntaxe indiquée.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Règles conditionnelles
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

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 valeur grid.

    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 valeur initial 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 valeur grid.

  • @supports (filter:blur(5px)) or (-ms-filter:blur(5px)) { ... }

    Combinaison de plusieurs tests.

    Les mots-clé or et and 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 et or, 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 :

    font-format(...)Format de police de caractères
    collectionCollection OpenType
    embedded-opentypeOpen Type encapsulé
    opentypeOpenType
    truetypePolice True Type
    woffPolice WOFF version 1.
    woff2Police WOFF version 2.
    svg✗ Police SVG (obsolète)
  • @supports font-tech( features-opentype ) { ... }

    Test d'une technologie relative aux polices de caractères.

    Les principales technologies sont :

    font-tech(...)Technologie
    color-COLRv0Glyphes multicolores via la table COLR version 0.
    color-COLRv1Glyphes multicolores via la table COLR version 1.
    color-svgTables multicolores SVG.
    color-sbixTables de graphiques bitmap standard.
    Tables multicolores SVGTables de données bitmap en couleur.
    features-opentypeTables OpenType GSUB et GPOS.
    features-aatTables True Type morx et kerx.
    features-graphiteLes tables Silf, Glat, Gloc, Feat et Sill.
    incremental-patchChargement de polices incrémental en utilisant la méthode du sous-ensemble de patch.
    incremental-rangeChargement de polices incrémentiel en utilisant la méthode de demande de plage.
    incremental-autoChargement de police incrémental en utilisant la négociation de méthode.
    variationsVariations de police dans les polices TrueType et OpenType pour contrôler l'axe de la police, le poids, les glyphes, etc.
    palettesPalettes de polices par le biais de font-palette pour sélectionner l'une des nombreuses palettes de couleurs dans la police.

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.

Test de l'unité vw
Test de l'unité 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.

Test du sélecteur div > p
Test du sélecteur div - p

Compatibilité des navigateurs avec la directive @supports.

Colonne 1
Prise en charge par les navigateurs de la directive @supports permettant de tester si une syntaxe est acceptée.
Colonne 2
Prise en charge par les navigateurs de la fonction selectors() utilisée avec la directive @supports, pour tester la validité d'un sélecteur.
Colonne 3
Prise en charge par les navigateurs de la fonction font-tech(), pour tester la validité d'une technologie relative aux polices de caractères : features-opentype, color-colr-colrv1, etc.
Colonne 4
Prise en charge par les navigateurs de font-format() pour tester le support d'un format police de caractères : SVG, woff, etc.
1
Directive
@supports
2
Fonction
selector()
3
Fonction
font-tech()
4
Fonction
font-format()
Estimation de la prise en charge globale.
96%
93%
91%
91%

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse
Caniuse

Évolution de la directive @supports.

  • Module CSS - Règles conditionnelles - Niveau 3

    Concernant @supports. Première introduction de la directive @supports, permettant de tester si un ensemble propriété/valeur est reconnu par le navigateur.
    WD
    01 Septembre 2011
    Document de travail.
    CR
    04 Avril 2013
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Règles conditionnelles - Niveau 4

    Concernant @supports. La directive @supports s'enrichit pour permettre le test de sélecteurs ou de combinaisons de sélecteurs.
    WD
    03 Mars 2020
    Document de travail.
    CR
    17 Février 2022
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Règles conditionnelles - Niveau 5

    Concernant @supports. 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.
    WD
    21 Décembre 2021
    Document de travail.
    CR
    PR
    REC

Voir aussi : règles CSS conditionnelles.

Toutes ces directives sont décrites dans la spécification "module CSS - Règles conditionnelles" (module CSS - Règles conditionnelles).

Directives :

⚠
@else
Complète la directive @when. Définit des règles CSS qui ne seront traitées que sous certaines conditions.
@supports
Teste la compatibilité du navigateur avec la syntaxe indiquée.
⚠
@when
Définit des règles CSS conditionnelles, qui ne seront traitées que sous certaines conditions.