@supports

La règle @ @supports est associée à un ensemble d'instructions imbriquées dans un bloc CSS (délimité par des accolades) et à une condition de test pour appliquer ou non ces déclarations. Cette condition est définie par un ensemble de paires de propriété/valeur qui forment une combinaison de conjonctions, disjonctions, négations. Une telle condition est appelée « condition de prise en charge » (ou supports condition).

@supports permet ainsi au moteur de rendu de tester la présence d'une fonctionnalité (on parle de feature query).

La règle @ @supports peut être utilisée au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règle conditionnel. Cette règle @ peut être manipulée via le modèle d'objets CSS et notamment via l'interface CSSSupportsRule.

Syntaxe

Une condition de prise en charge se compose d'une ou plusieurs déclarations combinées entre elles par des opérateurs logiques. La précédence des opérateurs peut être surchargée en utilisant des parenthèses autour des déclarations.

La syntaxe d'une déclaration

La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante :

( transform-origin: 5% 5% )

renvoie VRAI si la propriété transform-origin implémente une syntaxe qui considère que la valeur 5% 5% est valide.

Une déclaration CSS est toujours encadrée par des parenthèses.

L'opérateur not

L'opérateur not peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante :

not ( transform-origin: 10em 10em 10em )

renvoie VRAI si transform-origin n'implémente aucune syntaxe qui considère que la valeur 10em 10em 10em est valide.

Comme pour les autres opérateurs, on peut appliquer l'opérateur not à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides :

not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )

L'opérateur and

L'opérateur and peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées :

(display: table-cell) and (display: list-item)

On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif).

(display: table-cell) and (display: list-item) and (display:run-in)

sera équivalente à :

(display: table-cell) and ((display: list-item) and (display:run-in))

L'opérateur or

L'opérateur or peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée :

( transform-style: preserve ) or ( -moz-transform-style: preserve )

On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses.

( transform-style: preserve ) or ( -moz-transform-style: preserve ) or 
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )

sera ainsi équivalente à :

( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or 
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))

Syntaxe formelle

@supports <supports-condition> {
  <group-rule-body>
}

Exemples

Tester la prise en charge d'une propriété CSS donnée

@supports (animation-name: test) {
    … /* Du code CSS spécifique, appliqué quand les animations sont prises en charge sans préfixe */
    @keyframes { /* @supports est une règle @ qui peut inclure d'autres règles @ */
      …
    }
}

Tester la prise en charge d'une propriété CSS donnée ou d'une version préfixée

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* Du code CSS spécifique, appliqué lorsque les transformations 3D,
         sont prises en charge, éventuellement avec un préfixe */
}

Tester l'absence de prise en charge d'une propriété CSS

@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* Du code CSS spécifique, appliqué pour simuler text-align-last:justify */
}

Tester la prise en charge des propriétés personnalisées

@supports (--toto: green) {
  body {
    color: green;
  }
}

Spécifications

Compatibilité des navigateurs

[1] Entre Gecko 17 et Gecko 21, cette fonctionnalité n'était prise en charge que si l'utilisateur activait la préférence layout.css.supports-rule.enabled dans about:config.

Voir aussi

• La classe CSSOM CSSSupportsRule
• La méthode CSS.supports qui permet d'effectuer les mêmes vérifications via JavaScript.