Comment déterminer si le navigateur prend en charge CSS3

Méthode de jugement : 1. Utilisez la règle "@supports" pour juger, le format de syntaxe est "@supports (attribut : valeur) {nom de l'étiquette {attribut : valeur}}" 2. Utilisez le "CSS. supports()" fonction Jugement, le format de syntaxe est "CSS.supports("property","value")". .

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Méthode pour déterminer si le navigateur prend en charge CSS3 :

CSS @supporte les règles :

Syntaxe :

@supports (rule)[operator (rule)]* { sRules }

Description :

rule : Spécifiez une règle CSS spécifique, qui doit être placée entre parenthèses.
opérateur : utilisez des opérateurs tels que ou | et | pour ne pas spécifier plusieurs règles.

1. Utilisation de base :

@supports ( display: flex ) {
    body {
        display: flex;
      }
     #main {
         flex: auto;
      }
}

signifie que le navigateur prend en charge la norme flex et que les règles qu'il contient sont utilisées. S'il n'est pas pris en charge, il peut être implémenté comme suit.

2. pas de mot clé :

@supports not ( display: flex ) {
    #main{
        float: left;
    }
}

Fonction Js CSS.supports

Identique à la balise @supports en css, elle est également fournie en js Window.CSS.supports()Méthode, utilisée pour vérifier si le navigateur prend en charge les attributs CSS3. Cette fonction fournit 2 méthodes d'appel :

La première méthode consiste à utiliser deux paramètres : l'un est le nom de l'attribut et l'autre est la valeur de l'attribut.

var supportsFlex = CSS.supports("display", "flex");

La deuxième utilisation consiste simplement à fournir la chaîne de style complète qui doit être analysée.

var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");

La fonction CSS.supports renvoie une valeur booléenne Si elle est vraie, cela signifie que l'attribut est pris en charge. Bien entendu, avant d'utiliser cette fonction, nous devons d'abord déterminer si le navigateur prend en charge CSS.supports. . La méthode est la suivante :

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){    //支持}

Apprentissage recommandé : tutoriel vidéo css

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!