Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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 and associe 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 or associe 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.

Voir aussi...

Structuration du code - Directives.

  • @apply : Applique un groupe de propriétés préalablement définies.
  • @import : Importation d'une feuille de styles.
  • @media : Affectation de règles CSS en fonction du périphérique (smartphone, écran de bureau, etc...).