Utilisez la balise CSS @supports pour détecter l'analyse de compatibilité du navigateur

@supports peut être utilisé pour vérifier si le navigateur prend en charge un certain attribut CSS et peut être contrôlé via JavaScript. Ce qui suit est une description détaillée de la façon d'utiliser la balise @supports de CSS pour détecter la compatibilité du navigateur

La balise CSS @supports a une syntaxe similaire à l'instruction de requête @media dans le code CSS :

@supports(prop:value) {   
 /* 各种样式 */
}

CSS @supports permet aux programmeurs d'utiliser diverses méthodes différentes pour détecter si le navigateur actuel prend en charge certaines fonctionnalités de style CSS.

Détection des attributs de base
Vous pouvez effectuer la détection des attributs de base et des valeurs d'attribut :

@supports (display: flex) {   
 p { display: flex; }   
}

Il s'agit de l'utilisation la plus basique de la balise @supports.

mot-clé non
La balise @supports peut être combinée avec le mot-clé 'not' pour traiter les situations non prises en charge :

@supports not (display: flex) {   
 p { float: left; } /* 替换样式 */
}

Détection multiple et détection de conditions

/* or */
@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    /* use styles here */
}   

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {   

 /* something crazy here */
}   

/* and and or */
@supports ((display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex)) and (-webkit-appearance: caret) {   

    /* use styles here */
}

Javascript CSS.supports()
en Javascript En utilisant le window.CSS.supports pour détecter CSS @supports, la spécification fournit deux méthodes. Une méthode peut recevoir deux paramètres boolValue = CSS.supports(propertyName, value); l'autre peut recevoir une chaîne ( Une DOMString contenant la condition à vérifier) , boolValue = CSS.supports(supportCondition); pour une utilisation spécifique, veuillez consulter l'exemple suivant :

//测试环境，Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");   
//Outputs: false
console.log(res01);   

var res02 = CSS.supports("display", "flex");   
//Outputs: true
console.log(res02);   

var res03 = CSS.supports("( transform-origin: 5% 5% )");   
//Outputs: false
console.log(res03);   

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
//Outputs: false
console.log(res04);

@supports scénario d'utilisation

Dans la plupart des cas, @supports est utilisé pour prendre en charge les anciens navigateurs et, lorsque cela est possible, profiter des nouvelles fonctionnalités des navigateurs modernes pour améliorer l'expérience utilisateur. L'un des cas d'utilisation les plus importants de @supports est la mise en page. De nombreux navigateurs modernes prennent en charge la mise en page Web Flexbox. Dans ce cas, de nombreux navigateurs ne la prennent pas en charge, votre code peut être écrit comme ceci :

section {   
 float: left;   
}   

@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    section {   
      display: -webkit-flex;   
      display: -moz-flex;   
     display: flex;   
     float: none;   
    }   
}

Je crois que comme les programmeurs l'utilisent. et découvrez cette nouvelle fonction @supports, des scénarios d'utilisation plus nombreux et meilleurs continueront d'émerger.

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!