Une introduction à la règle CSS & # x27; s @Supports (requêtes de fonctionnalité)

Les plats clés

• La règle @Supports dans CSS permet aux développeurs d'implémenter la détection des fonctionnalités, de vérifier si un navigateur prend en charge certaines paires de propriété / valeur CSS et d'appliquer des styles en conséquence. Cela fait partie d'une approche d'amélioration progressive pour gérer le support inégal du navigateur pour les technologies avancées.
• La syntaxe de la règle @Supports comprend des opérateurs logiques comme «et», «ou», et «pas» permettant de tester plusieurs conditions à la fois. L'utilisation correcte des parenthèses est cruciale lors du regroupement des conditions.
• JavaScript peut être utilisé conjointement avec les requêtes de fonction CSS à l'aide de l'interface CSS et de la fonction supports (). Cette fonction renvoie une valeur booléenne indiquant si un navigateur prend en charge une propriété CSS spécifique.
• Alors que la plupart des navigateurs modernes prennent en charge la règle @Supports, Internet Explorer 11 et Opera Mini ne le font pas. Les développeurs doivent donc définir les styles de base que tous les navigateurs ciblés peuvent gérer, et utiliser @Supports pour remplacer et compléter ces styles dans les navigateurs qui peuvent gérer les fonctionnalités plus récentes.

Les deux approches générales pour lutter contre le soutien inégal des navigateurs aux dernières technologies sont la dégradation gracieuse et l'amélioration progressive.

La dégradation gracieuse exploite les technologies avancées pour concevoir des expériences et des fonctionnalités sophistiquées des utilisateurs. Les utilisateurs de navigateurs moins capables pourront toujours accéder au site Web, mais bénéficieront d'une diminution du niveau de fonctionnalité et d'expérience de navigation.

Avec une amélioration progressive, les développeurs établissent une base de référence en concevant un niveau d'expérience utilisateur que la plupart des navigateurs peuvent prendre en charge. Leurs applications fournissent une détection intégrée des capacités des navigateurs, qu'ils utilisent pour mettre à disposition des fonctionnalités plus avancées et des expériences de navigation plus riches en conséquence.

L'outil le plus adopté dans une approche d'amélioration progressive est la bibliothèque JavaScript modernizr.

Modernizr vérifie par programme si un navigateur prend en charge les technologies Web de nouvelle génération et renvoie en conséquence True ou Faux. Armé de ces connaissances, vous pouvez exploiter les nouvelles fonctionnalités dans les navigateurs de support et avoir toujours un moyen fiable de répondre aux navigateurs plus anciens ou non compatibles.

Aussi bien que cela puisse paraître, quelque chose de mieux se prépare depuis un certain temps. Vous pouvez effectuer la détection des fonctionnalités à l'aide de requêtes de fonctionnalité CSS natives avec la règle @Supports.

Dans ce post, je vais approfondir les @Supports et son API JavaScript associée.

Détection des fonctionnalités du navigateur avec la règle @Supports

La règle @Supports fait partie de la spécification des règles conditionnelles CSS3, qui comprend également la règle @Media plus répandue que nous utilisons tous dans notre travail de conception réactif.

Alors qu'avec les requêtes multimédias, vous pouvez détecter des fonctionnalités d'affichage comme la largeur et la hauteur de la fenêtre, @Supports vous permet de vérifier la prise en charge du navigateur pour les paires de propriétés / valeur CSS.

Pour considérer un exemple de base, disons que votre page Web affiche une œuvre d'art que vous souhaitez améliorer en utilisant le mélange CSS. C'est vrai, les modes de mélange CSS se dégradent gracieusement dans les navigateurs non supportifs. Cependant, au lieu de ce que le navigateur affiche par défaut dans de tels cas, vous voudrez peut-être ravir les utilisateurs des navigateurs non supportés en affichant quelque chose de tout aussi spécial, sinon tout aussi spectaculaire. C'est ainsi que vous effectuez le chèque pour le mélange CSS dans votre feuille de style avec @Supports:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

Pour appliquer différents styles pour les navigateurs qui n'ont pas de support en mode mélange de mix, vous utiliseriez cette syntaxe:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

quelques choses à noter:

• La condition que vous testez doit être à l'intérieur des parenthèses. En d'autres termes, @Supports mix-mélange-mode: superposition {...} n'est pas valide. Cependant, si vous ajoutez plus de parenthèses que nécessaire, le code ira bien. Par exemple, @Supports ((mix-mélange-mode: superposition)) est valide.
• La condition doit inclure à la fois une propriété et une valeur. Dans l'exemple ci-dessus, vous vérifiez la propriété en mode mélange de mélange et la valeur de superposition de cette propriété.
• Ajouter un suivi! Important sur une déclaration pour laquelle vous testez n'affectera pas la validité de votre code.

Adourons les exemples ci-dessus avec une petite démo. Les navigateurs avec support de mélange de mélange de mélange appliqueront les styles à l'intérieur du bloc @Supports () {...}; D'autres navigateurs appliqueront les styles à l'intérieur du bloc @Supports Not () {...}.

le html:

<span><span><span><article</span> class<span>="artwork"</span>></span>
</span>  <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></article</span>></span></span>

le CSS:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

Découvrez la démo sur codepen:

Voir la démo de la règle Pen @Supports par SitePoint (@SitePoint) sur Codepen.

Test pour plusieurs conditions à la fois

Lorsque vous effectuez des tests de fonction avec @Supports, vous n'êtes pas limité à une condition de test à tout moment. Combiner des opérateurs logiques comme et, ou, et l'opérateur déjà mentionné vous permet de tester plusieurs fonctionnalités à la fois.

le et conjonction tests de l'opérateur pour la présence de multiples requis Conditions:

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

En utilisant le mot-clé Disjunctive , vous pouvez tester la présence de plusieurs fonctionnalités alternatives pour un ensemble de styles. Ceci est particulièrement pratique si certaines de ces alternatives ont besoin de préfixes de fournisseurs pour leurs propriétés ou valeurs:

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

Vous pouvez également combiner et ou tester les conditions dans la même règle @Supports:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

Lorsque vous regroupez un certain nombre de conditions ensemble, l'utilisation correcte des parenthèses est cruciale. Avoir et, ou, et non les mots clés mélangés ensemble ne fonctionnera pas. De plus, la façon dont vous regroupez les conditions à l'intérieur des parenthèses établit l'ordre dans lequel ils sont évalués. Dans l'extrait ci-dessus, les conditions disjonctives ou les conditions sont d'abord évaluées, puis la réponse résultante est évaluée par rapport à une condition encore requise introduite par le mot-clé.

Le mot-clé Not vous permet de tester une condition à la fois. Par exemple, le code ci-dessous n'est pas valide:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

Au lieu de cela, vous devez regrouper toutes les conditions que vous annulez avec le mot-clé non dans les parenthèses. Voici la version corrigée de l'extrait ci-dessus:

<span><span><span><article</span> class<span>="artwork"</span>></span>
</span>  <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></article</span>></span></span>

Enfin, assurez-vous de quitter l'espace blanc après un non et des deux côtés d'un et ou.

Les opérateurs en action

Vous pouvez appliquer un ensemble de styles si le navigateur prend en charge les gradients et les modes de mélange en utilisant la syntaxe suivante (j'ai divisé le code ci-dessous en plusieurs lignes à des fins d'affichage):

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

Étant donné que certains navigateurs Android plus anciens nécessitent le préfixe -webkit pour les gradients linéaires, vérifions la prise en charge du navigateur en incorporant cette condition supplémentaire dans le bloc @Supports:

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

Disons que votre site Web utilise des modes de mélange de luminosité et de saturation qui, au moment de la rédaction, ne sont pas pris en charge dans Safari. Vous souhaitez toujours fournir des styles alternatifs pour ces navigateurs, alors voici comment vous pouvez configurer la condition conjonctive appropriée en utilisant @Supports pas avec et:

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

Toutes les démos de cette section sont disponibles sur Codepen:

Voir les démos de stylo sur plusieurs tests de fonctionnalités avec @Supports par SitePoint (@SitePoint) sur codepen.

JavaScript avec CSS Fonctionne les requêtes

Vous pouvez profiter des requêtes de fonctionnalité CSS à l'aide de l'interface JavaScript CSS et de la fonction supports (). Vous pouvez écrire la fonction CSS.Supports () de deux manières.

La syntaxe antérieure et la plus largement prise en charge prend deux arguments, c'est-à-dire Propriété et valeur , et renvoie une valeur booléenne vraie ou fausse:

<span><span>@supports ((property1: value1) or 
</span></span><span>          <span>(-webkit-property1: value1)) and 
</span></span><span>          <span>(property2: value2)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

Assurez-vous de placer la propriété et sa valeur correspondante à l'intérieur des devis. La spécification indique clairement que la fonction ci-dessus renvoie True s'il remplit les deux conditions suivantes:

• La propriété est une «correspondance littérale pour le nom d'une propriété CSS» que le navigateur prend en charge;
• La valeur serait «analysée avec succès comme une valeur prise en charge pour cette propriété».

par Match littéral La spécification signifie que les échappements CSS ne sont pas traités et que l'espace blanc n'est pas coupé. Par conséquent, n'échappez pas les caractères et ne laissez pas d'espace blanc traînant, sinon le test reviendra faux.

La syntaxe alternative et plus récente ne prend qu'un seul argument à l'intérieur des parenthèses:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

L'utilisation de cette syntaxe rend pratique à tester plusieurs conditions avec les mots clés et / ou.

Voici un exemple rapide. Disons que vous souhaitez tester si le navigateur prend en charge le mode de mélange de luminosité. Si c'est le cas, votre JavaScript ajoutera dynamiquement une classe de mélange de luminosité à l'élément cible, sinon il ajoutera une classe de noluminosité. Votre CSS sera ensuite stylisé l'élément en conséquence.

Voici le CSS:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

Si vous suivez la syntaxe à deux arguments, l'extrait JavaScript pourrait être le suivant:

<span><span><span><article</span> class<span>="artwork"</span>></span>
</span>  <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></article</span>></span></span>

Si vous préférez la plus récente syntaxe à argument unique, remplacez simplement la ligne de code correspondante ci-dessus par celle ci-dessous:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

N'hésitez pas à consulter la démo:

Voir l'API JavaScript Pen pour CSS Fonctionnal Queries by SitePoint (@SitePoint) sur Codepen.

Prise en charge du navigateur

Toutes les dernières versions des principaux navigateurs ont une prise en charge de la règle @Supports, sauf pour Internet Explorer 11 et Opera Mini. @Supports est-il prêt pour le monde réel? J'ai trouvé la meilleure réponse à cette question dans les mots de Tiffany Brown:

… Méfiez-vous de définir les styles critiques de mission dans @Supports…
Définissez vos styles de base - les styles que chacun de vos
ciblés> Les navigateurs peuvent gérer. Ensuite, utilisez @Supports… pour remplacer et compléter
ces styles dans les navigateurs qui peuvent gérer les fonctionnalités plus récentes.

CSS Master, p.303

Conclusion

Dans cet article, j'ai exploré la détection des fonctionnalités du navigateur CSS natif avec la règle @Supports (a.k.a requêtes de fonctionnalité). J'ai également parcouru l'API JavaScript correspondant, qui vous permet de vérifier l'état actuel de la prise en charge du navigateur pour les dernières propriétés CSS en utilisant la méthode flexible CSS.Supports ().

La prise en charge du navigateur pour les requêtes de fonctionnalité CSS est bonne mais ne couvre pas toutes vos bases. Cependant, si vous souhaitez utiliser @Supports dans vos projets, le placement stratégique des styles dans votre document CSS, comme le suggère Tiffany Brown, et le CSS-Supports.js Polyfill par Han Lin Yap peut vous aider.

Si vous avez essayé les démos dans cet article ou si vous avez eu une expérience du monde réel en utilisant @Supports, j'aimerais avoir de vos nouvelles.

Les questions fréquemment posées sur la règle CSS @Supports

Quelle est la règle CSS @Supports et comment fonctionne-t-elle?

La règle CSS @Supports, également connue sous le nom de requêtes de fonctionnalité, est une règle conditionnelle qui vérifie si un navigateur prend en charge une fonctionnalité CSS spécifique. Si la fonctionnalité est prise en charge, le navigateur appliquera les styles dans la règle @Supports. Sinon, cela les ignorera. Cela permet aux développeurs d'utiliser de nouvelles fonctionnalités CSS tout en maintenant la compatibilité avec les navigateurs plus anciens. La syntaxe est @Supports suivie de la fonctionnalité et de sa valeur entre parenthèses, comme celle-ci: @Supports (affichage: grille) {/ * Styles à appliquer si la grille est prise en charge * /}.

Puis-je utiliser plusieurs conditions Dans une règle CSS @Supports?

Oui, vous pouvez utiliser plusieurs conditions dans une règle CSS @Supports en utilisant des opérateurs logiques. L'opérateur «et» vous permet de vérifier si plusieurs fonctionnalités sont prises en charge, tandis que l'opérateur «ou» vérifie si au moins une des fonctionnalités est prise en charge. L'opérateur «non» vérifie si une fonctionnalité n'est pas prise en charge. Par exemple, @Supports (affichage: grille) et (affichage: flex) {/ * styles à appliquer si la grille et le flex sont pris en charge * /}.

comment puis-je vérifier si un navigateur ne prend pas en charge Une fonctionnalité CSS?

Vous pouvez vérifier si un navigateur ne prend pas en charge une fonctionnalité CSS en utilisant l'opérateur 'non' dans la règle @Supports. Par exemple, @Supports Not (affichage: grid) {/ * Styles à appliquer si la grille n'est pas prise en charge * /}. Cela appliquera les styles si le navigateur ne prend pas en charge la grille CSS.

Que se passe-t-il si un navigateur ne prend pas en charge la règle @Supports?

Si un navigateur ne prend pas en charge le @ @ Prend en charge la règle, il ignorera toute la règle, y compris les styles en son sein. Cela signifie que vous pouvez utiliser @Supports sans vous soucier de casser votre site Web sur des navigateurs plus anciens. Cependant, il est toujours important de fournir des styles de secours pour les navigateurs qui ne prennent pas en charge les fonctionnalités que vous testez avec @Supports.

Puis-je nidifier les règles @Supports?

Oui, vous pouvez nicher @Supports Rules, tout comme vous pouvez nicher d'autres règles CSS. Cela vous permet de tester la prise en charge de plusieurs fonctionnalités de manière plus complexe. Par exemple, vous pouvez utiliser une règle @Supports imbriquée pour appliquer des styles uniquement si le navigateur prend en charge la grille CSS et Flexbox.

À quel point la règle @Supports est fiable pour la détection des fonctionnalités?

Le @ est fiable Soutien La règle est une méthode fiable pour la détection des fonctionnalités dans CSS, mais elle n'est pas parfaite. Certains navigateurs plus âgés ne prennent pas en charge @Supports, et certains navigateurs peuvent signaler les faux positifs ou négatifs. C'est toujours une bonne idée de tester votre site Web dans plusieurs navigateurs pour s'assurer qu'il fonctionne comme prévu.

Puis-je utiliser JavaScript avec la règle @Supports?

Oui, vous pouvez utiliser JavaScript pour tester pour CSS Fonctionne la prise en charge avec la méthode CSS.Supports (). Cette méthode fonctionne de manière similaire à la règle @Supports, mais vous permet de tester dynamiquement la prise en charge des fonctionnalités dans votre code JavaScript.

Y a-t-il des outils pour vérifier la prise en charge du navigateur pour les fonctionnalités CSS?

Oui, il existe plusieurs outils qui peuvent vous aider à vérifier la prise en charge du navigateur pour les fonctionnalités CSS. L'une des plus populaires est que je peux utiliser, qui fournit des informations à jour sur la prise en charge du navigateur pour une large gamme de fonctionnalités CSS.

Puis-je utiliser @Supports avec des requêtes multimédias?

Oui, vous pouvez utiliser @Supports en combinaison avec les requêtes multimédias pour appliquer des styles en fonction de la prise en charge des fonctionnalités et de la taille de la fenêtre. Cela peut être très utile pour créer des conceptions réactives qui profitent également des nouvelles fonctionnalités CSS.

Quels sont les cas d'utilisation courants pour la règle @Supports?

La règle @Supports est couramment utilisée pour Améliorez progressivement un site Web en appliquant des fonctionnalités CSS avancées uniquement si elles sont prises en charge par le navigateur. Cela peut inclure des choses comme la grille CSS, Flexbox, les propriétés personnalisées, etc. Il est également utilisé pour fournir des styles de secours aux navigateurs qui ne prennent pas en charge ces fonctionnalités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!