Maison > interface Web > tutoriel CSS > Comment déterminer si le navigateur prend en charge CSS3

Comment déterminer si le navigateur prend en charge CSS3

醉折花枝作酒筹
Libérer: 2023-01-05 16:08:04
original
2774 Les gens l'ont consulté

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 }
Copier après la connexion

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;
      }
}
Copier après la connexion

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;
    }
}
Copier après la connexion

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");
Copier après la connexion

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)");
Copier après la connexion

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)){    //支持}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal