mozilla
Vos résultats de recherche

    @supports

    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 CSSSupportsRule.

    Syntaxe

    @supports <condition_de_support> {
      /* 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 sitransform-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 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 Statut Commentaire
    CSS Conditional Rules Module Level 3 Candidate Recommendation  

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base 28.0 22 (22)[1] Pas de support 12.1 Pas de support
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base 28.0 22.0 (22)[1] Pas de support 12.1 Pas de support

    [1] Dans les versions de Firefox 17 à 21, cette fonction n'est active que si l'utilisateur a configuré layout.css.supports-rule.enabled à true.

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale