Avec le développement rapide de HTML5 et CSS3, de plus en plus de balises sémantiques et de fonctionnalités intéressantes ont été appliquées au développement d'applications Web. Les principaux fabricants de navigateurs ont commencé à prendre en charge ces nouvelles fonctionnalités, et les développeurs Web sont également intéressés à essayer ces nouvelles fonctionnalités pour développer des applications plus colorées et intéressantes. Cependant, les problèmes de compatibilité des versions causés par le support inégal de ces nouvelles fonctionnalités (en particulier les maux de tête IE) sont toujours un cauchemar qui persiste dans l'esprit des développeurs. Les habitudes d'utilisation traditionnelles nous rendent difficile l'abandon de vieilles versions de navigateurs, et les développeurs ne peuvent choisir que des tests manuels ennuyeux, des tests, puis des tests.
Afin de résoudre ce problème, Modernizr a vu le jour. Son nom ressemble un peu à la modernisation, et en effet, le nom provient du but de rendre l'expérience de développement plus moderne, mais ce n'est pas une tentative de modernisation de l'ancien navigateur, c'est-à-dire qu'il prend en charge ces nouvelles fonctionnalités (bien que vous puissiez effectivement faire en sorte que le navigateur prenne en charge certaines nouvelles fonctionnalités qui ne sont pas prises en charge en ajoutant des scripts Shion / Polyfill, comme nous le verrons plus tard).
Modernizr est une bibliothèque JS open source 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. Nous pouvons l'utiliser pour détecter si le navigateur prend en charge une nouvelle fonctionnalité, et même charger des scripts en plus pour répondre à vos besoins pour charger dynamiquement différents fichiers JS en fonction de différentes situations pour réduire les téléchargements et améliorer les performances.
Modernizr fournit deux versions: le développement et la production. La version de développement comprend la détection de toutes les nouvelles fonctionnalités HTML5 et CSS3, adaptées à l'apprentissage et aux tests. Pour les débutants qui commencent à utiliser Modernizr, Bella vous recommande d'utiliser cette version. Une fois que vous êtes familier avec le principe de travail de Modernizr, vous pouvez utiliser la version personnalisée de la production. Vous ne pouvez télécharger que autant de fonctionnalités que vous devez détecter pour réduire considérablement le nombre de téléchargements, ce qui peut légèrement améliorer les performances de votre programme dans une certaine mesure. Vous pouvez télécharger ces deux versions sur http://modernizr.com/download/, cliquez sur le lien de version de développement sur la page pour télécharger la version de développement, ou vous avez vu la page d'affichage de fonctionnalité suivante
Vous pouvez vérifier toute fonctionnalité HTML5 ou CSS3 que vous souhaitez tester, mais par défaut, la catégorie supplémentaire sera sélectionnée comme suit:
A) HTML5 SHIV V3.6: Il ajoute un script - HTML5 SHIM It force IE6-8 pour concevoir et imprimer correctement les éléments HTML5. Si vous prévoyez d'utiliser de nouvelles balises sémantiques HTML5, telles que <Sider>, <SoETER>, <AV>, <Section>, <Reticle>, etc., vous devez sélectionner cette option.
b) modernizr.load (yepnope.js): il ajoute un chargeur de script en option qui n'est pas inclus dans la version de développement. Il augmente 3 Ko de téléchargements, donc si vous n'en avez pas besoin, vous pouvez abandonner le choix.
c) Ajouter des classes CSS: il ajoute la classe Modernizr à la balise de départ. Si vous souhaitez détecter la prise en charge des fonctionnalités CSS3, vous devez sélectionner cette option.
La méthode d'utilisation de Modernizr est très simple. Après avoir téléchargé la version de développement, vous n'avez qu'à introduire le fichier de bibliothèque JS dans la page, comme:
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
Après avoir ajouté la référence Modernizr, lorsque le programme JS s'exécute, il ajoutera un lot de noms de classe CSS à l'élément HTML. Ces noms de classe marquent les fonctionnalités de prise en charge et quelles fonctionnalités ne prennent pas en charge dans le navigateur actuel. S'il le prend en charge, le nom de fonctionnalité correspondant sera affiché. S'il ne le prend pas en charge, le nom de non-fonctionnement sera affiché. Par exemple, si le navigateur détecté prend en charge la propriété CSS3 Boxshadow, Modernizr ajoutera la classe Boxshadow à la balise, sinon, la classe No-Boxshadow sera ajoutée. La figure ci-dessous montre la prise en charge des nouvelles fonctionnalités HTML5 et CSS3 sur Chrome 23.0.1271.64.
Ensuite, il vous suffit de définir les informations de style correspondantes dans votre feuille de style CSS, vous pouvez la définir comme ci-dessous:
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px black solid ; |
8 | } |
Étant donné que le navigateur ignore la fonctionnalité CSS3 non prise en charge, si la version actuelle du navigateur ne prend pas en charge la propriété Boxshadow, elle ignorera la classe Boxshadow et se référera plutôt aux styles définis dans la classe sans Boxshadow, vous économisant la logique difficile de détecter le nom du navigateur dans le programme JS.
Bien sûr, lorsque votre scénario d'application vous oblige à déterminer si une nouvelle fonctionnalité est prise en charge dans le programme et donner une logique de traitement différente, vous pouvez également utiliser Modernizr pour porter facilement des jugements. Pour le moment, vous devez utiliser un objet global nommé Modernizr créé par Modernizr. Le contenu est une liste des résultats booléens donnés pour chaque fonctionnalité détectée. Si le navigateur prend en charge la propriété Boxshadow, alors la valeur de modernizr.boxshadow est vraie, sinon elle est fausse. Par conséquent, après avoir introduit le fichier de bibliothèque, vous pouvez également utiliser cette méthode pour détecter la prise en charge du navigateur pour cette fonctionnalité. Cet objet JS contient également des informations plus détaillées pour certaines fonctions. Par exemple, Modernizr.video.h264 vous dira si le navigateur prend en charge ce codec spécial, et Modernizr.InutTypes.Search vous dira si le navigateur actuel prend en charge le nouveau type d'entrée de recherche.
De plus, si Modernizr ne contient pas les fonctionnalités que vous devez détecter, vous pouvez appeler la fonction AddTest encapsulée modernizr à tester. Pour différentes fonctionnalités HTML5 et CSS3, nous pouvons trouver de nombreuses fonctions d'addition déjà écrites sur GitHub (pour une raison quelconque, Modernizr est bloqué et le projet est maintenant hébergé sur GitHub). Jetons un coup d'œil à un exemple simple. Si vous souhaitez tester si le navigateur prend en charge l'API GetUserMedia (API dans la nouvelle technologie WebBrTC), vous pouvez écrire la fonction AddTest suivante pour tester:
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
Je crois qu'après une brève introduction, vous avez déjà vécu la commodité que Modernizr peut apporter au développement. Après avoir compris les fonctions de Modernizr et comment utiliser Modernizr, vous pouvez également apprendre beaucoup de nouvelles connaissances en examinant son code source et en vous familiarisant avec ses principes de mise en œuvre. Bien que Bella soit une recrue à cet égard, elle partage toujours une certaine expérience avec vous sur la lecture du code source.
Bella a mentionné l'objet mondial modernizr plus tôt. Comment est-il créé dans Modernizr? Regardons le code source suivant:
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , this .document); |
Cette partie du code utilise une fonction asynchrone pour générer un espace de noms (bien qu'il n'y ait pas d'espace de noms réel dans JS), et la fonction renvoie un objet Modernizr, qui est affecté à Window.MorderNizr, afin que d'autres programmes JS puissent utiliser directement Window.Modernizr ou Modernizr objets. Le paramètre transmis lorsque la fonction est appelée se réfère à l'environnement de contexte de l'exécution de la fonction, c'est-à-dire l'objet global de la fenêtre.
Comment Modernizr teste-t-il le niveau de prise en charge des nouvelles fonctionnalités de CSS3? Il s'avère que Modernizr créera d'abord un objet DOM, puis utilisera les attributs de style sous cet objet pour tester s'il prend en charge les nouvelles fonctionnalités CSS3. Le code est le suivant:
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
Pour le navigateur, qu'il puisse reconnaître notre tag HTML nouvellement créé ou non, nous pouvons le styliser, afin que nous puissions styliser la balise nouvellement créée ici. Supposons que nous voulons tester si le navigateur prend en charge HSLA pour définir les couleurs dans CSS, nous pouvons d'abord écrire un style avec l'attribut HSLA appliqué pour le mettre sous l'étiquette, puis vérifier si la valeur de style contient des chaînes HSLA. Si le navigateur ne le prend pas en charge, il n'y aura pas de chaînes HSLA (car l'action de mettre le style avec l'attribut HSLA appliqué à la balise Modernizr ne prendra pas effet). Nous pouvons écrire le code suivant:
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
Ici, comme certains navigateurs convertiront la notation de HSLA en RGBA, nous vérifions également s'il y a la chaîne RGBA.
Pour les attributs CSS avec le préfixe des fournisseurs, nous devons donner différents traitements. Revenant à la propriété Boxshadow, Modernizr testera s'il y a Boxshadow, Webkitboxshadow, Mozboxshadow, Oboxshadow, Msboxshadow ou Khtmlboxshadow des propriétés sous la variable MSTYLE créée ci-dessus. Si c'est le cas, cela signifie que le navigateur prend en charge cette propriété. Ici, nous utilisons principalement deux fonctions encapsulées modernizr, l'une est TestProp () et l'autre est TestAllProps (). Modernizr.Testprop (STR) renvoie si une propriété de style donnée peut être reconnue, tandis que Modernizr.TestallProps (STR) revient si une propriété de style donnée peut être reconnue, ou si une propriété de style avec un préfixe de fournisseur peut être reconnue.
Pour plus de connaissances sur le code source, je vous le présenterai après que Bella ait eu plus de recherches approfondies à l'avenir. Bella pense que si vous connaissez les principes et l'utilisation de Modernizr, cela vous aidera certainement à améliorer l'efficacité du développement.
Enfin, Bella résume brièvement des documents pour que tout le monde puisse apprendre de Modernizr:
1. Site Web officiel de Modernizr: http://modernizr.com/docs/ Vous pouvez apprendre les connaissances modernizr, le code source et télécharger Modernizr à partir de celui-ci.
2. Modernizr Test Suite URL: http://modernizr.github.com/modernizr/test/index.html Vous pouvez interroger l'état de support des fonctionnalités HTML5 et CSS3 de chaque navigateur ci-dessus. La méthode de requête:
Cliquez sur Afficher les tests REF de Caniuse et Modernizr en bas de cette page, puis cliquez sur l'un des liens de table pour les fonctionnalités HTML5 ou CSS3 testées pour voir la prise en charge de chaque navigateur.
3. Informations liées au script SHIM / POLYFILL: https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills
4. Télécharger les adresses de diverses fonctions d'addition qui détectent les nouvelles fonctionnalités HTML5 et CSS3:
https://github.com/modernizr/modernizr/tree/master/feature-detects
Cet article vient du blog Tencent Wuhan. Veuillez indiquer la source lors de la réimpression