@supports

  • Raccourci de la révision : CSS/@supports
  • Titre de la révision : @supports
  • ID de la révision : 357001
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La règle @ CSS @supports associe un ensemble de déclarations imbriquées, dans un bloc CSS, entourées par des accolades, avec une condition composée de tests de déclarations CSS, qui sont des paires propriétés-valeurs, combinées à des conjonctions, des disjonctions et de négations. De telles conditions sont appelées des conditions de support.

Cela permet de faire une requête de fonctionnalité.

La règle @ @supports peut être utilisée non seulement au niveau le plus haut d'une feuille de styles CSS, mais aussi dans n'importe quel groupe conditionnel de règle @ et est accessible via l'interface de modèle objet CSS {{domxref("CSSSupportsRule")}}.

Syntaxe

@supports <supports_condition> {
  /* règles spécifiques */
}

Une condition de support consiste en une ou plusieurs déclarations combinées à différents opérateurs logiques. La précédence des opérateurs peut être outrepassée par l'usage de parenthèses.

Syntaxe d'une déclaration

L'expression la plus simple est une déclaration CSS, qui est composée du nom d'une propriété CSS suivie par une valeur, séparé par le caractère deux-points. L'expression suivante

( transform-origin: 5% 5% )

est vraie si{{ cssxref("transform-origin") }} considère la syntaxe 5% 5% comme valide.

Une déclaration CSS est toujours inclues entre parathèses.

L'opérateur not

L'opérateur not peut précéder n'importe quelle expression pour créer une nouvelle expression, résultat de la négation de l'expression d'origine. L'expression suivante

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

est vraie si {{ cssxref("transform-origin") }} n'accepte pas la syntaxe 10em 10em 10em comme valide.

Comme tout opérateur, l'opérateur not peut être appliqué à une déclaration de n'importe quelles complexité. Les exemples suivants sont des expressions valides :

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

Note : il n'est pas nécessaire d'entourer l'opérateur not par des parenthèses lorsqu'il est au niveau le plus extérieur. Mais pour le combiner ave cd'autres opérateurs comme and et or, des parenthèses sont nécessaires.

L'opérateur and

De deux expressions, l'opérateur and créé une nouvelle expression qui est la conjonction des deux expression d'origine, de telle manière que l'expression résultante est vraie seulement si les deux expressions sont vraies. Dans cet exemple, l'expression complète est vraie si et seulement si les deux expressions sont vraies en même temps :

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

De nombreuses conjonctions peuvent être juxtaposées sans avoir recours à des parenthèses supplémentaires :

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

est équivalent à :

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

L'opérateur or

De deux expressions, l'opérateur or créé une nouvelle expression consistant en la disjonction des deux expressions d'origine, de telle manière que l'expression résultante est vraie si au moins une des deux expressions la formant est vraie. Dans cet exemple, l'expression complète est vraie si au moins une des expressions est vraie :

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

De nombreuses disjonctions peuvent être juxtaposées sans avoir recours à des parenthèses supplémentaires :

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

 est équivalent à :

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

Note : lorsque les opérateurs and et or sont tous deux utilisés, les parenthèses doivent être utilisées afin de définir l'ordre dans lequel les opérateurs doivent s'appliquer. En l'absence de parenthèses, la condition est considérée invalide, menant au fait que toute la règle @ soit ignorée.

Exemples

Tester le support d'une propriété CSS ciblée

@supports (animation-name: test) {
    … /* CSS ciblé, appliqué lorsque les animations sont supportées sans les préfixes */
    @keyframes { /* @supports étant une règle @ conditionnelle de groupe, elle peut inclure d'autre règles @ */
      …
    }
}

Tester le support d'une propriété CSS ciblée ou sa version avec préfixe

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* CSS ciblé s'appliquant aux transformations 3D, potentiellement avec préfixes, sont supportées */
}

Tester le « non-support » d'une propriété CSS ciblée

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* CSS ciblé s'appliquant pour simuler text-align-last:justify */
}

Spécifications

Spécification État Commentaire
{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }} {{ Spec2('CSS3 Conditional') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base {{ CompatNo() }} {{ CompatGeckoDesktop("17") }}[*] {{ CompatNo() }} 12.1 {{ CompatNo() }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatNo() }} {{ CompatGeckoMobile("17") }}[*] {{ CompatNo() }} 12.1 {{ CompatNo() }}

[*] Du fait que préfixer cette règle @ n'a pas de sens, la règle @ @supports n'est seulement supportée que si l'utilisateur l'active en mettant la valeur de layout.css.supports-rule.enabled à true.

Voir également

  • {{ CSS_at_rules() }}
  • La class CSSOM {{ domxref("CSSSupportsRule") }}, et la méthode {{ domxref("window.supportCSS") }} qui permettent de réaliser les mêmes tests via JavaScript.

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La <a href="/fr/docs/CSS/Règles_@" title="/fr/docs/CSS/Règles_@">règle @</a> <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>@supports</code> associe un ensemble de déclarations imbriquées, dans un bloc CSS, entourées par des accolades, avec une condition composée de tests de déclarations CSS, qui sont des paires propriétés-valeurs, combinées à des conjonctions, des disjonctions et de négations. De telles conditions sont appelées des <em>conditions de support</em>.</p>
<p>Cela permet de faire une <em>requête de fonctionnalité</em>.</p>
<p>La règle @ <code>@supports</code> peut être utilisée non seulement au niveau le plus haut d'une feuille de styles CSS, mais aussi dans n'importe quel <a href="/fr/docs/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe" title="en/CSS/At-rule#Conditional_Group_Rules">groupe conditionnel de règle @</a> et est accessible via l'interface de modèle objet CSS {{domxref("CSSSupportsRule")}}.</p>
<h2 id="Syntax" name="Syntax">Syntaxe</h2>
<pre class="syntaxbox">
@supports <em>&lt;supports_condition&gt;</em> {
  /* règles spécifiques */
}
</pre>
<p>Une condition de support consiste en une ou plusieurs déclarations combinées à différents opérateurs logiques. La précédence des opérateurs peut être outrepassée par l'usage de parenthèses.</p>
<h3 id="Syntaxe_d'une_d.C3.A9claration">Syntaxe d'une déclaration</h3>
<p>L'expression la plus simple est une déclaration CSS, qui est composée du nom d'une propriété CSS suivie par une valeur, séparé par le caractère deux-points. L'expression suivante</p>
<pre class="brush:css">
( transform-origin: 5% 5% )</pre>
<p>est vraie si{{ cssxref("transform-origin") }} considère la syntaxe <code>5% 5%</code> comme valide.</p>
<p>Une déclaration CSS est toujours inclues entre parathèses.</p>
<h3 id="L'op.C3.A9rateur_not">L'opérateur <code>not</code></h3>
<p>L'opérateur <code>not</code> peut précéder n'importe quelle expression pour créer une nouvelle expression, résultat de la négation de l'expression d'origine. L'expression suivante</p>
<pre class="brush:css">
not ( transform-origin: 10em 10em 10em )</pre>
<p>est vraie si {{ cssxref("transform-origin") }} n'accepte pas la syntaxe <code>10em 10em 10em</code> comme valide.</p>
<p>Comme tout opérateur, l'opérateur <code>not</code> peut être appliqué à une déclaration de n'importe quelles complexité. Les exemples suivants sont des expressions valides :</p>
<pre class="brush:css">
not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )</pre>
<div class="note style-wrap">
  <p><strong>Note :</strong> il n'est pas nécessaire d'entourer l'opérateur <code>not</code> par des parenthèses lorsqu'il est au niveau le plus extérieur. Mais pour le combiner ave cd'autres opérateurs comme <code>and</code> et <code>or</code>, des parenthèses sont nécessaires.</p>
</div>
<h3 id="L'op.C3.A9rateur_and">L'opérateur <code>and</code></h3>
<p>De deux expressions, l'opérateur <code>and</code> créé une nouvelle expression qui est la conjonction des deux expression d'origine, de telle manière que l'expression résultante est vraie seulement si les deux expressions sont vraies. Dans cet exemple, l'expression complète est vraie si et seulement si les deux expressions sont vraies en même temps :</p>
<pre class="brush:css">
(display: table-cell) and (display: list-item)</pre>
<p>De nombreuses conjonctions peuvent être juxtaposées sans avoir recours à des parenthèses supplémentaires :</p>
<pre class="brush:css">
(display: table-cell) and (display: list-item) and (display:run-in)</pre>
<p>est équivalent à :</p>
<pre class="brush:css">
(display: table-cell) and ((display: list-item) and (display:run-in))</pre>
<h3 id="L'op.C3.A9rateur_or">L'opérateur <code>or</code></h3>
<p>De deux expressions, l'opérateur <code>or</code> créé une nouvelle expression consistant en la disjonction des deux expressions d'origine, de telle manière que l'expression résultante est vraie si au moins une des deux expressions la formant est vraie. Dans cet exemple, l'expression complète est vraie si au moins une des expressions est vraie :</p>
<pre class="brush:css;">
( transform-style: preserve ) or ( -moz-transform-style: preserve )</pre>
<p>De nombreuses disjonctions peuvent être juxtaposées sans avoir recours à des parenthèses supplémentaires :</p>
<pre class="brush:css">
( transform-style: preserve ) or ( -moz-transform-style: preserve ) or 
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )</pre>
<p>&nbsp;est équivalent à :</p>
<pre class="brush:css">
( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or 
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))</pre>
<div class="note style-wrap">
  <p><strong>Note </strong>: lorsque les opérateurs <code>and</code> et <code>or</code> sont tous deux utilisés, les parenthèses doivent être utilisées afin de définir l'ordre dans lequel les opérateurs doivent s'appliquer. En l'absence de parenthèses, la condition est considérée invalide, menant au fait que toute la règle @ soit ignorée.</p>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="Tester_le_support_d'une_propri.C3.A9t.C3.A9_CSS_sp.C3.A9cifique">Tester le support d'une propriété CSS ciblée</h3>
<pre class="brush:css;">
@supports (animation-name: test) {
    … /* CSS ciblé, appliqué lorsque les animations sont supportées sans les préfixes */
    @keyframes { /* @supports étant une règle @ conditionnelle de groupe, elle peut inclure d'autre règles @ */
      …
    }
}
</pre>
<h3 id="Tester_le_support_d'une_propri.C3.A9t.C3.A9_CSS_sp.C3.A9cific_ou_sa_version_avec_pr.C3.A9fixe">Tester le support d'une propriété CSS ciblée ou sa version avec préfixe</h3>
<pre class="brush:css;">
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* CSS ciblé s'appliquant aux transformations 3D, potentiellement avec préfixes, sont supportées */
}
</pre>
<h3 id="Testing_for_the_non-support_of_a_specifc_CSS_property">Tester le « non-support » d'une propriété CSS ciblée</h3>
<pre class="brush:css;">
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* CSS ciblé s'appliquant pour simuler text-align-last:justify */
}</pre>
<h2 id="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td>
      <td>{{ Spec2('CSS3 Conditional') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("17") }}[*]</td>
        <td>{{ CompatNo() }}</td>
        <td>12.1</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("17") }}[*]</td>
        <td>{{ CompatNo() }}</td>
        <td>12.1</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] Du fait que préfixer cette règle @ n'a pas de sens, la règle @ <code>@supports</code> n'est seulement supportée que si l'utilisateur l'active en mettant la valeur de <code>layout.css.supports-rule.enabled</code> à <code>true</code>.</p>
<h2 id="See_also">Voir également</h2>
<ul>
  <li>{{ CSS_at_rules() }}</li>
  <li>La class CSSOM {{ domxref("CSSSupportsRule") }}, et la méthode {{ domxref("window.supportCSS") }} qui permettent de réaliser les mêmes tests via JavaScript.</li>
</ul>
Revenir à cette révision