Wulin.com (www.vevb.com) Introduction de l'article: Modernizr et HTML5.
OK, HTML5 est populaire maintenant, donc j'ajouterai HTML5 à son titre :)
En fait, Modernizr est né pour HTML5 - c'est une bibliothèque JS qui détecte la prise en charge des navigateurs pour les fonctionnalités HTML5 et CSS3. Le célèbre site Web de compatibilité HTML5 / CSS3 HTML5 / CSS3 est basé sur ce cadre.
Vous pouvez voir qu'il existe un lien vers Modernizr sur le bouton vert dans le coin inférieur droit.
Caractéristiques de ModernizrLa fonction de Modernizr est en fait très simple. Il s'agit d'utiliser JS pour détecter la prise en charge du navigateur pour les fonctionnalités HTML5 / CSS3. S'il prend en charge un certain attribut, ajoutez une classe correspondante à la balise <html> de la page. S'il ne le prend pas en charge, ajoutez une classe sans préfixe. Par exemple, si le navigateur détecté prend en charge la balise vidéo, Modernizr ajoutera une classe vidéo à la balise <html>, sinon, ajoutera une classe sans vidéo.
Vérifiez le code source de FindmeByip ou utilisez un outil comme Firebug pour afficher le code de page, et vous pouvez voir la classe dans la balise <HTML>.
De plus, Modernizr fournit également une autre utilisation, qui est de détecter le support du navigateur pour une certaine fonctionnalité seule, telle que:
Il est relativement sûr de détecter le support du navigateur pour HTML5 via des interfaces similaires.
Détection du navigateur: fonctionnalités UA vsEn fait, tout le monde utilise généralement UA pour détecter un navigateur. Bien sûr, UA fournit également des informations plus riches. L'UA n'est pas omnipotent, et il a également quelques faiblesses, telles que le déguisement UA du navigateur de l'utilisateur et le manque d'informations UA fournies par certains navigateurs arriérés affecteront le jugement des informations du navigateur. Plus important encore, pour les fonctionnalités HTML5, en utilisant UA pour déterminer si un navigateur prend en charge une certaine fonctionnalité est trop complexe et peu fiable.
Bien sûr, il y a toujours eu des débats sur l'UA et la détection des fonctionnalités. Ce que je veux dire ici, c'est que l'analyse spécifique de problèmes spécifiques, l'utilisation de HTML5 pour détecter la prise en charge des fonctionnalités sur le site Web est plus fiable et pratique que UA ~~
Utilisation de ModernizrL'utilisation de Modernizr est très simple, introduisez simplement le fichier JS de la bibliothèque dans la page:
> / script>
Modernizr est open source, mais pour une raison quelconque, il a été bloqué par G-FW.
Modernizr @ gitLe projet Modernizr est hébergé dans GIT, vous pouvez l'obtenir à l'adresse suivante:
L'auteur fournit également une page de sortie simple dans GIT:
Et une page de test détaillée:
Lecture prolongée:détection des fonctionnalités HTML5
Déploiement en toute sécurité HTML5 et CSS3 avec Modernizr