@supports

Exemple interactif

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

<ul class="flex-container">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">À propos de moi</a></li>
  <li><a href="#">Contact</a></li>
</ul>

En JavaScript, @supports peut être accédée via le modèle d'objet CSS et l'interface CSSSupportsRule.

Syntaxe

@supports (<supports-condition>) {
  /* Si la condition est vraie, le CSS de ce bloc est utilisé. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* Si les deux conditions sont vraies, le CSS de ce bloc est utilisé. */
}

La règle @supports consiste en un bloc d'instructions avec une condition de support. Les conditions peuvent être combinées par conjonctions (and), disjonctions (or) et/ou négations (not). La priorité des opérateurs peut être définie avec des parenthèses.

Les conditions de support peuvent utiliser soit la syntaxe de déclaration <property>: <value>, soit la syntaxe de fonction <function()>. Les sections suivantes décrivent l'utilisation de chaque type de condition de support.

Syntaxe déclarative

La syntaxe de déclaration vérifie si le navigateur prend en charge la déclaration <property>: <value> définie. La déclaration doit être entourée de parenthèses. L'exemple suivant retourne vrai si le navigateur prend en charge l'expression transform-origin: 5% 5% :

@supports (transform-origin: 5% 5%) {
}

Syntaxe fonctionnelle

Cette fonction évalue si le navigateur prend en charge la syntaxe de sélecteur définie. L'exemple suivant retourne vrai et applique le style CSS si le navigateur prend en charge le combinateur d'enfant :

@supports selector(h2 > p) {
}

font-tech()

Cette fonction vérifie si le navigateur prend en charge la technologie de police définie pour la mise en page et le rendu. L'exemple suivant retourne vrai et applique le style CSS si le navigateur prend en charge la technologie de police COLRv1 :

@supports font-tech(color-COLRv1) {
}

Le tableau ci-dessous décrit les technologies de police (<font-tech>), y compris les technologies de police couleur (<color-font-tech>), les technologies de fonctionnalités de police (<font-features-tech>) et d'autres technologies disponibles pouvant être interrogées avec la fonction font-tech() :

font-format()

Cette fonction vérifie si le navigateur prend en charge le format de police définit pour la mise en page et le rendu. L'exemple suivant renvoie vrai et applique le style CSS si le navigateur prend en charge le format de police opentype :

@supports font-format(opentype) {
}

Le tableau suivant décrit les formats disponibles (valeurs <font-format>) pouvant être interrogés avec cette fonction :

L'opérateur not

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

@supports not (transform-origin: 10em 10em 10em) {
}

renvoie VRAI si la propriété transform-origin du navigateur ne considère pas la valeur 10em 10em 10em comme 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 :

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) 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 :

@supports (display: table-cell) and (display: list-item) {
}

Plusieurs conjonctions peuvent être juxtaposées sans nécessiter plus de parenthèses. Les deux exemples suivants sont équivalents :

@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
  ((display: list-item) and (display: contents)) {
}

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 :

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}

Plusieurs disjonctions peuvent être juxtaposées sans nécessiter plus de parenthèses. Les deux exemples suivants sont équivalents :

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
  (-webkit-transform-style: preserve) {
}

@supports (transform-style: preserve-3d) or
  (
    (-moz-transform-style: preserve-3d) or
      (-webkit-transform-style: preserve-3d)
  ) {
}

Syntaxe formelle

@supports = 
  @supports <supports-condition> { <rule-list> }  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-selector-fn>     |
  <supports-font-tech-fn>    |
  <supports-font-format-fn>  |
  <supports-at-rule-fn>      |
  <supports-decl>            

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-decl> = 
  ( <declaration> )  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<wq-name> = 
  <ns-prefix>? <ident-token>  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

Exemples

Tester le support d'une propriété CSS

@supports (animation-name: test) {
  /* CSS appliqué lorsque les animations sont supportées sans préfixe */
  @keyframes {
    /* D'autres at-rules peuvent être imbriquées */
  }
}

Tester le support d'une propriété CSS ou d'une version préfixée

@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /* CSS appliqué lorsque text-stroke, préfixé ou non, est supporté */
}

Tester la non prise en charge d'une propriété CSS spécifique

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /* CSS pour fournir une alternative de repli à text-align-last: justify */
}

Tester le support d'un sélecteur

Les règles conditionnelles CSS permettent de tester le support d'un sélecteur comme :has().

/* Cette règle ne sera pas appliquée dans les navigateurs qui ne supportent pas :has() */
ul:has(> li li) {
  /* Le CSS est appliqué lorsque la pseudo-classe :has(…) est supportée */
}

@supports not selector(:has(a, b)) {
  /* Repli pour le cas où :has() n'est pas supporté */
  ul > li,
  ol > li {
    /* Ci-dessus développé pour les navigateurs qui ne supportent pas :has(…) */
  }
}

/* Remarque : à ce jour, aucun navigateur ne supporte l'argument `of` de :nth-child(…) */
@supports selector(:nth-child(1n of a, b)) {
  /* Cette règle doit être dans le bloc @supports, sinon
     elle sera partiellement appliquée dans les navigateurs qui ne supportent pas
     l'argument `of` de :nth-child(…) */
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /* CSS appliqué lorsque le sélecteur :is(…) et
       l'argument `of` de :nth-child(…) sont tous deux supportés */
  }
}

Tester le support d'une technologie de police

L'exemple suivant applique le style CSS si le navigateur prend en charge la technologie de police COLRv1 :

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";

@supports font-tech(color-COLRv1) {
  p {
    font-family: "Bungee Spice", fantasy;
  }
}

Il est aussi possible de tester le support d'une technologie de police en utilisant la fonction tech dans la règle @font-face. Si le navigateur ne prend pas en charge la technologie de police, une police de repli (Bungee-fallback.otf) peut être utilisée à la place.

@font-face {
  font-family: "Bungee Spice";
  src:
    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
      tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}

Tester le support d'un format de police

L'exemple suivant applique le style CSS si le navigateur prend en charge le format de police woff2 :

@supports font-format(woff2) {
  p {
    font-family: "Open Sans", sans-serif;
    src: url("open-sans.woff2") format("woff2");
  }
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utiliser les requêtes de fonctionnalité
• Fonctions des règles @ CSS
• CSSSupportsRule
• La méthode CSS.supports()