Détection de nouvelles fonctionnalités HTML5 / CSS3 utilisant Modernizr

HTML5, CSS3 et les technologies connexes telles que Canvas et Web Sockets ont apporté des fonctionnalités très utiles qui peuvent aider nos programmes Web à améliorer un nouveau niveau. Ces nouvelles technologies nous permettent de construire diverses pages de formulaires qui peuvent fonctionner sur des tablettes et des appareils mobiles en utilisant uniquement HTML, CSS et JavaScript. Bien que HTML5 offre de nombreuses nouvelles fonctionnalités, il n'est pas réaliste d'utiliser ces nouvelles technologies si nous ne considérons pas l'ancienne version du navigateur. L'ancienne version du navigateur est utilisée depuis de nombreuses années, et nous devons toujours considérer les problèmes de compatibilité de ces versions. Le problème à résoudre dans cet article est: lorsque nous utilisons la technologie HTML5 / CSS3, comment mieux traiter le problème des anciens navigateurs qui ne prennent pas en charge les fonctionnalités HTML5 / CSS3.

Bien que nous puissions écrire du code nous-mêmes pour déterminer si le navigateur prend en charge certaines fonctionnalités HTML5 / CSS3, le code n'est pas très simple. Par exemple: écrire du code pour déterminer que le paiement du navigateur prend en charge les toiles, notre code peut être similaire à ce qui suit:

 <script> window.onLoad = function () {if (canVassupported ()) {alert ('canvas pris en charge'); }}; fonction canvassupported () {var canvas = document.createElement ('canvas'); return (canvas.getContext && canvas.getContext ('2d')); } </ script>

Si vous souhaitez déterminer si le stockage local est pris en charge, le code peut être similaire à celui ci-dessous, mais il est facile de provoquer des bogues sous Firefox.

 <Script> window.onload = function () {if (localStoragesupported ()) {alert ('local Storage pris en charge'); }}; fonction localStoragesupported () {try {return ('localStorage' dans Window && window ['localStorage']! = null); } catch (e) {} return false; } </ script>

Les deux premiers exemples consultent tous une fonctionnalité. S'il existe de nombreuses fonctionnalités HTML5 / CSS3, nous devons écrire plusieurs copies de code pour juger, mais heureusement, ces codes ne dépendent pas de l'ordre. Modernizr vous permet d'implémenter les fonctions complexes ci-dessus avec très peu de code. Jetons un coup d'œil à certaines caractéristiques importantes de Modernizr:

La première fois que j'ai entendu Modernizr, je pensais que cela signifiait modernisé et que je pouvais ajouter de nouvelles fonctionnalités HTML5 / CSS3 aux navigateurs plus âgés. En fait, Modernizr ne fait pas cela, cela nous aide à améliorer nos pratiques de développement, en utilisant une méthode très funky pour aider à détecter si le navigateur prend en charge une nouvelle fonctionnalité et peut même charger des scripts supplémentaires. Si vous êtes un développeur Web, c'est une arme très impressionnante pour vous.

Site officiel de Modernizr: http://modernizr.com, vous pouvez utiliser les deux types de scripts (version de développement et version de production personnalisée). Le site Web fournit un outil de demande personnalisé pour générer uniquement les fonctionnalités de détection dont vous avez besoin, plutôt qu'une version grande et complète qui peut tout détecter, ce qui signifie que vous pouvez minimiser vos scripts. Le chiffre suivant est l'interface de l'outil officiel de génération de site Web. Vous pouvez voir que de nombreux HTML5 / CSS3 et des technologies connexes peuvent être sélectionnés.

Après avoir téléchargé votre script personnalisé, vous pouvez le faire référence comme un fichier JS normal, puis vous pouvez l'utiliser.

 <script src = scripts / modernizr.js type = text / javascript> </ script>

Après avoir ajouté la référence Modernizr, il prend effet immédiatement. Lors de l'exécution, 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. Les fonctionnalités prises en charge affichent directement le nom de la fonctionnalité du jour en tant que classe (par exemple: Canvas, WebSockets). La classe affichée par les fonctionnalités non soutenues est un nom sans propriété (par exemple: non-flex). Le code suivant est l'effet de l'exécution dans Chrome:

 <html class = js flexbox canvas canvasxext webgl no-touch geolocation postMessage WebSQLDatabase indexddb hashchange history draganddrop websockets rgba hsla multiplebgs backetSize borderImage borderradius boxshadow textShadow opace csSanimations csSscolumns cssradings CSSTRANSforms3d CSStransitions fontface généré CONTENT VIDÉO AUDIO LOCALSTORAGE SessionStorage Webworkers ApplicationCache Svg Inlinesvg Smil SvgClippaths>

Le code suivant est l'effet de l'exécution sous IE9:

 <html class = js no-flexbox canvas canvas canvas canvasxt no-webgl no-touch geolocation post-websqldatabase no indexeddb hashchange non history draganddrop NO-CSSCOLUMNS NO-CSSADRADIENTS NO-CSSREFLECTIONS CSSTRANSFORMS NO-CSSTRANSforms3d Non-CSStransitions Fontface généré CONTENT AUDIO AUDIOLSTORAGE SESSESTORAGE NO-WEBWOWERS

En utilisant Modernizr, le code suivant peut se produire (ajoutez le nom no-js à la classe):

 <html class = no js>

Vous pouvez visiter le site (http://html5boilerplate.com) pour afficher le contenu lié à la boileur html5, ou (http://initializr.com) pour afficher le contenu lié à l'initialisation, ajouter la classe no-js à l'élément HTML, qui indique au navigateur si JavaScript est pris en charge. S'il n'est pas pris en charge, No-JS sera affiché. S'il est pris en charge, No-JS sera supprimé. Très cool, non?

Vous pouvez utiliser directement le nom de classe généré par Modernizr dans l'élément <html> pour définir les attributs correspondants dans votre fichier CSS pour prendre en charge le navigateur actuel. Par exemple, le code suivant peut afficher l'ombre dans un navigateur qui prend en charge l'ombre de l'ombre et afficher les bordures standard dans les navigateurs qui ne prennent pas en charge:

 .boxshadow #myContainer {border: aucun; -Webkit-box-shadow: # 666 1px 1px 1px; -Moz-Box-Shadow: # 666 1PX 1PX 1PX;} .no-bobshadow #myContainer {Border: 2px Solid Black;}

Parce que si le navigateur prend en charge Box-Shadows, Modernizr ajoutera la classe Boxshadow à l'élément <html>, et vous pouvez le gérer à l'ID DIV correspondant. S'il n'est pas pris en charge, Modernizr ajoutera la classe sans Boxshadow à l'élément <html>, qui affiche une bordure standard. De cette façon, nous pouvons facilement utiliser les nouvelles fonctionnalités CSS3 sur les navigateurs qui prennent en charge les fonctionnalités CSS3 et continuer à utiliser la méthode précédente sur les navigateurs qui ne les prennent pas en charge.

En plus d'ajouter la classe correspondante à l'élément <html>, Modernizr fournit également un objet JavaScript modernizr global, qui fournit différentes propriétés pour indiquer si une nouvelle fonctionnalité est prise en charge dans le navigateur actuel. Par exemple, le code suivant peut être utilisé pour déterminer si le navigateur prend en charge la toile et le stockage local. Il est très avantageux pour plusieurs développeurs de se développer et de tester sous des navigateurs multi-version, et tout le monde peut unifier le code.

 $ (document) .ready (function () {if (modernizr.canvas) {// ajouter du code canvas} if (modernizr.localstorage) {// ajouter du code de stockage local}});

L'objet Global ModernizR peut également être utilisé pour détecter si la fonction CSS3 est prise en charge. Le code suivant est utilisé pour tester si les transformations Border-Radius et CSS sont prises en charge:

 $ (document) .ready (function () {if (modernizr.borderradius) {$ ('# mydiv'). addClass ('borderradiusStyle');} if (modernizr.csstransforms) {$ ('# mydiv'). addclass ('transformSstyle');}});

Certaines autres fonctionnalités de CSS3 peuvent détecter des résultats, tels que l'opacité, le RGBA, le shadow texto, les animations CSS, les transitions CSS, les plans multiples, etc. La liste détectable complète HTML5 / CSS3 prise en charge par Modernizr peut être trouvée sur le http://www.modernizr.com/docs comme suit.

Sur certains navigateurs qui ne prennent pas en charge de nouvelles fonctionnalités, Modernizr fournit non seulement la méthode ci-dessus pour vous dire, mais fournit également la fonction de chargement pour vous permettre de charger certains scripts SHIM / POLYFILL pour obtenir l'assistance (pour plus d'informations sur Shim / Polyfill, veuillez visiter: https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills). Modernizr fournit un chargeur de script pour déterminer une fonction, et si elle n'est pas prise en charge, le script correspondant sera chargé. Un script séparé se trouve également sur http://yepnopejs.com.

Vous pouvez utiliser la fonction Load () de Modernizr pour charger dynamiquement le script. L'attribut de test de la fonction indique s'il est pris en charge. Si le test est pris en charge avec succès, le script défini par l'attribut YEP est chargé. S'il n'est pas pris en charge, le script défini par l'attribut Nope sera chargé. Qu'il soit pris en charge ou non, le script défini par les deux attributs sera chargé. L'exemple de code est le suivant:

 Modernizr.load ({test: modernizr.canvas, yep: 'html5canvasavailable.js', non: 'excanvas.js', à la fois: 'mycustomscript.js'});

Dans cet exemple, Modernizr déterminera si le navigateur actuel prend en charge la fonctionnalité Canvas. S'il est pris en charge, il chargera les deux scripts html5canvasavailable.js et myCustomScript.js. S'il n'est pas pris en charge, il chargera le fichier de script Excanvas.js (utilisé pour les versions avant IE9) pour faire en sorte que le navigateur prenne en charge la fonction Canvas, puis chargez le script myCustomScript.js.

Étant donné que Modernizr peut charger des scripts, vous pouvez également utiliser d'autres utilisations, par exemple, si le script tiers que vous faites référence (tel que Google et Microsoft qui fournissent des services CDN fournissent un hébergement jQuery) ne parvient pas à charger, vous pouvez charger des fichiers alternatifs. Le code suivant est un exemple de chargement jQuery fourni par Modernizr:

 Modernizr.load ([{chargement: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', complet: function () {if (! Window.jquery) {modernizr.load ('js / libs / jQuery-1.6.4. pour charger et // exécuter si elle doit.

Ce code chargera d'abord le fichier jQuery à partir de Google CDN. Si le téléchargement ou le chargement échoue, la fonction complète sera exécutée. Tout d'abord, déterminez si l'objet JQEURY existe. S'il n'existe pas, Modernizr chargera le fichier JS natif défini. Si même les fichiers complets ne sont pas chargés avec succès, le fichier Needs-JQuery.js sera chargé.

Modernizr est certainement un outil nécessaire si vous utilisez le dernier HTML5 / CSS3 pour créer votre programme. En utilisant, vous pouvez enregistrer beaucoup de code et de test de travail, et vous pouvez même implémenter les nouvelles fonctionnalités correspondantes sous la forme de scripts de chargement supplémentaires pour certains navigateurs qui ne prennent pas en charge de nouvelles fonctionnalités.

Adresse originale: http://weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-features-using-modernizr.aspx