Modernizr

Outil par (Alsacréations, Strasbourg)
Créé le , mis à jour le (49758 lectures)
Tags : javascript, modernizr

Modernizr est une bibliothèque JavaScript conçue pour détecter des fonctionnalités spécifiques de HTML et CSS dans les navigateurs. Puisqu'il est inutile d'embarquer un fichier complet de détection dans tous les sites web, un script sur mesure peut être construit en piochant parmi les fonctionnalités détectables. Il sera par exemple possible de savoir si le navigateur supporte les transformations CSS 3D, la vidéo HTML5, Canvas ou SVG, et de prévoir une alternative le cas échéant.

Son usage est très simple, il suffit de copier-coller les quelques lignes générées dans le code source de la page, ou bien dans un fichier externe, puis d'exploiter l'objet Modernizr et ses propriétés (par exemple Modernizr.canvas, Modernizr.fontface, Modernizr.geolocation etc), initialisées aux valeurs booléennes true ou false. La méthode Modernizr.load vise aussi à faciliter le chargement de scripts tiers. Enfin, la bibliothèque embarque une déclaration des éléments HTML5 pour les anciennes versions d'Internet Explorer afin de permettre l'emploi de styles sur ces derniers.

Attention : il ne s'agit pas de moderniser les navigateurs mais uniquement de procéder à une détection, pour éventuellement utiliser d'autres scripts en complément, apportant des fonctionnalités non supportées.

Commentaires

captain_torche a dit le

Je m'en sers sur un site en développement, pour masquer les labels au profit des placeholders sur des formulaires étroits.

akkolad a dit le

"il ne s'agit pas de moderniser les navigateurs "
Ben si justement, on peut utiliser les balises HTML5, et ça fonctionne sur les vieux navigateurs = pour moi ça modernise, non ?

dew a dit le

Cela reste très modéré, il s'agit juste d'un petit patch bonus. Dans l'ensemble, la vocation de Modernizr reste surtout de procéder à de la détection.

Greez creative a dit le

Dans cette idée de patch bonus, il y a un peut deux écoles comme le propose http://www.initializr.com/

Par retour d'expériences, je privilégie HTML5 Shiv de google mieux interprétés pour une "émulation" basique des balises HTML5 [http://code.google.com/p/html5shiv/]

Quid du niveau d'utilisation/ciblage de modernirz ?

BlueScreenJunky a dit le

@Greez creative : Euh... html5shiv est pas spécialement "de google", à ma connaissance le créateur (Remy sharp) n'a jamais travaillé chez eux XD

Enfin ça ne change strictement rien à ce que tu dis : Moi aussi j'aime bien html5shiv pour utiliser les balises html5 sur IE, utiliser modenizr juste pour ça je pense que c'est un peu overkill...

Greez creative a dit le

@BlueScreenJunky : Mea Culpa, de Google Code disons ;) Merci de cette précision. Avez-vous des exemples de sites, d'un côté avec modernizr et de l'autre avec Html5Shiv ?

Stitox a dit le

modernizr inclus html5shiv ?

Stitox a dit le

modernizr inclus html5shiv ?

Vincent_ a dit le

@Stitox : oui modernizr inclut html5shiv
http://www.html5-css3.fr/html5/initializr-gen...

PHPeur a dit le

hello, je déterre un peu le sujet ;-)

j'ai du mal à cerner l'intérêt dans la pratique de Modernizr... Ok il permet de détecter si le navigateur client supporte tel ou tel propriété... Et après ?? Dans la pratique actuelle, ne fait-on pas une feuille spécifique pour IE6 (le mal !!!!!) IE7, IE8, IE9 etc... (ok il n'y a pas que IE...) et dans celle-ci on pallie à ce qu'il ne supporte pas (ou mal). Est-ce que Modernizr permet de ne faire qu'une feuille CSS ou tout est pris en charge avec l'utilisation des no-"propriété" ??
Bref si quelqu'un a un éclaircissement sur l'utilisation de Modernizr, ce que cela permet concrètement à part le fait de tester le support des propriétés, je suis preneur et l'en remercie d'avance ;-)

PHPeur a dit le

hello, je déterre un peu le sujet ;-)

j'ai du mal à cerner l'intérêt dans la pratique de Modernizr... Ok il permet de détecter si le navigateur client supporte tel ou tel propriété... Et après ?? Dans la pratique actuelle, ne fait-on pas une feuille spécifique pour IE6 (le mal !!!!!) IE7, IE8, IE9 etc... (ok il n'y a pas que IE...) et dans celle-ci on pallie à ce qu'il ne supporte pas (ou mal). Est-ce que Modernizr permet de ne faire qu'une feuille CSS ou tout est pris en charge avec l'utilisation des no-"propriété" ??
Bref si quelqu'un a un éclaircissement sur l'utilisation de Modernizr, ce que cela permet concrètement à part le fait de tester le support des propriétés, je suis preneur et l'en remercie d'avance ;-)

PHPeur a dit le

Heu pardon pour le double poste, le formulaire n'a pas aimé le rafraîchissement de la page ;-)