Modernizr 3 : une réécriture complète de la bibliothèque JavaScript
Qui détecte le support du HTML5 et du CSS3

Le , par vermine, Responsable JavaScript & AJAX
Modernizr 3 : une réécriture complète de la bibliothèque JavaScript
qui détecte le support du HTML5 et du CSS3


Modernizr est une bibliothèque JavaScript qui détecte le support du HTML5 et du CSS3 dans le navigateur de l'utilisateur et qui vous prévient si ce dernier implémente nativement ces fonctionnalités ou non. Il établit ainsi ce que vous pouvez et ne pouvez pas faire dans le navigateur actuel.

Cette bibliothèque vous permet de tirer parti des nouvelles technologies du Web sans se tracasser de gérer les différents navigateurs qui ne se mettent pas rapidement à jour. Modernizr rend facile le fait d'écrire des conditionnelles JavaScript et CSS pour gérer chaque situation (si un navigateur prend en charge une fonctionnalité ou pas).

La bibliothèque s'exécute rapidement lors du chargement de la page pour détecter les fonctionnalités, les éléments. Ensuite, elle crée un objet JavaScript avec les résultats et ajoute des classes à l'élément html pour les lier à votre CSS.

Plus de deux ans après sa mise en route, l'équipe annonce enfin la sortie de la version 3 qui est une réécriture complète de l'architecture et qui s'accompagne de nouveaux tests, d'un nouveau site et d'une nouvelle documentation.

Modernizr offre notamment :

  • le support de la plupart des navigateurs parmi lesquels figurent certains ancêtres ;
  • la détection des fonctionnalités CSS3 ;
  • la détection d'éléments HTML5 ;
  • la détection de la géolocalisation, du SVG, du support des événements Touch, du WebGL ;
  • des méthodes de tests supplémentaires.


Ce travail a vu le jour grâce à l'aide plus de 80 collaborateurs !
L'équipe émet le souhait de sortir des versions plus régulièrement car cette durée est tout bonnement inacceptable.

Téléchargement.
L'article sur le site officiel.
Documentation.

Et vous ?

Que pensez-vous de cette bibliothèque ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Aurelien Plazzotta Aurelien Plazzotta - Membre éprouvé https://www.developpez.com
le 03/10/2015 à 14:27
Implémenter de nouvelles méthodes de tests peut s'avèrer être un avantage comparatif mais cela est-il est bien suffisant ?
Je m'interroge sur la perennité technologique du projet, que se passera-t-il pour Modernizr et son éditeur lorsque le HTML 5 et le CSS 3 seront intégrés à 100% nativement au sein des navigateurs ?
Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur https://www.developpez.com
le 04/10/2015 à 2:06
Eh bien ils passeront aux tests de HTML 6 et CSS 4

Tester le support d'une fonctionnalité est toujours utile, mais passer par une lib comme Modernizr me paraît bien superflu. Généralement, le test de support ne tient que sur quelques lignes de JS facilement récupérables en quelques minutes de recherche sur le net. Ou on écrit le test soi-même, ce n'est pas très compliqué comme je l'ai expliqué dans mon bouquin. Aussi, en passant, on peut en profiter pour regarder en passant si un polyfill existe, ce dont ne se préoccupe pas du tout Modernizr.
Avatar de Zefling Zefling - Membre expert https://www.developpez.com
le 05/10/2015 à 9:54
Citation Envoyé par SylvainPV  Voir le message
Eh bien ils passeront aux tests de HTML 6 et CSS 4

CSS 4 ne veux rien dire (comme CSS3) depuis le découpage en module. Flexbox et Grid Layout sont des modules CSS de niveau 1.
Mais comme les moteurs on toujours un temps de retard, il a encore de la marge... Mais j'ai du mal à voir comment rendre possible certains modules CSS de niveau 1 comme Masking, Shape ou Exclusions avec du JS sans que ça soit une usine à gaz.
Avatar de Traroth2 Traroth2 - Membre chevronné https://www.developpez.com
le 05/10/2015 à 10:05
A plus forte raison. Modernizr ne détecte pas les versions supportées, mais les fonctionnalités HTML/CSS/JS/WebGL/SVG (et bien pus encore, de la gestion de la batterie à MathML en passant par la disponibilité d'un player Flash non bloqué). Ça me parait particulièrement utile dans un contexte où CSS est modularisé et où tous les modules ne seront donc pas supportés par tous les navigateurs.
Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur https://www.developpez.com
le 05/10/2015 à 10:06
Oui et HTML6 non plus vu que le standard HTML n'est plus versionné, c'était plus une façon de parler pour dire que le progrès ne s'arrête pas.
Avatar de vermine vermine - Responsable JavaScript & AJAX https://www.developpez.com
le 06/10/2015 à 8:22
Modernizr 3.1 : mise à jour des modules
pour la bibliothèque JavaScript qui détecte le support du HTML5 et du CSS3


Modernizr est une bibliothèque JavaScript qui détecte le support du HTML5, du CSS3, du SVG, de la géolocalisation et bien d'autres dans le navigateur de l'utilisateur et qui vous prévient si ce dernier implémente nativement ces fonctionnalités ou non. Il établit ainsi ce que vous pouvez et ne pouvez pas faire dans le navigateur actuel.

Comme annoncé, l'équipe désire sortir des versions plus rapidement et c'est déjà le cas avec la révision 3.1.

Elle contient notamment :

  • la mise à jour de différents modules comme proxyquire, grunt-contrib-jade, etc. ;
  • la suppression d'une dépendance non utilisée pour la détection du plein écran ;
  • l'ajout d'une version lowercased du flag -v ;
  • la fonction prefixedCSSValue ;
  • la détection des jpeg2000 ;
  • etc.


Téléchargement.
L'article sur le site officiel.
Documentation.
Avatar de SurferIX SurferIX - Membre chevronné https://www.developpez.com
le 10/10/2015 à 19:20
Citation Envoyé par Aurelien Plazzotta  Voir le message
...que se passera-t-il pour Modernizr et son éditeur lorsque le HTML 5 et le CSS 3 seront intégrés à 100% nativement au sein des navigateurs ?

Que se passera-t-il lorsqu'on aura une prochaine version ? Que se passera-t-il si on inclut du code qui dépend d'autre code ? La réponse est : soit tu plonge et tu t'en sers avec peut-être une possibilité que cela ne fonctionne plus d'ici quelques années, soit tu t'en passe. Mais ta question peut s'appliquer à tout le code qui dépend du code d'autres entreprises....
Avatar de vermine vermine - Responsable JavaScript & AJAX https://www.developpez.com
le 30/10/2015 à 10:52
Modernizr 3.2 : de nouvelles détections
pour la bibliothèque JavaScript qui détecte le support du HTML5 et du CSS3


Modernizr est une bibliothèque JavaScript qui détecte le support du HTML5, du CSS3, du SVG, de la géolocalisation et bien d'autres dans le navigateur de l'utilisateur et qui vous prévient si ce dernier implémente nativement ces fonctionnalités ou non. Il établit ainsi ce que vous pouvez et ne pouvez pas faire dans le navigateur actuel.

L'équipe annonce la sortie de la révision 3.2.

Elle contient la détection de :

  • XDomainRequest ;
  • nouvelles APIs de cryptographie ;
  • l'API Base64 ;
  • l'élément BDI ;
  • etc.


Téléchargement.
L'article sur le site officiel.
Documentation.
Avatar de vermine vermine - Responsable JavaScript & AJAX https://www.developpez.com
le 11/02/2016 à 9:23
Modernizr 3.3.0 / 3.3.1 : détection du 3D Touch et des collections ES6
pour la bibliothèque JavaScript qui détecte le support du HTML5 et du CSS3


Modernizr est une bibliothèque JavaScript qui détecte le support du HTML5, du CSS3, du SVG, de la géolocalisation et bien d'autres dans le navigateur de l'utilisateur et qui vous prévient si ce dernier implémente nativement ces fonctionnalités ou non. Il établit ainsi ce que vous pouvez et ne pouvez pas faire dans le navigateur actuel.

L'équipe annonce la sortie des révisions 3.3.0 et 3.3.1.

Elles contiennent des corrections de nouvelles détections :

  • l'API Force Touch / 3D Touch de Safari ;
  • les hairlines CSS ;
  • les collections ES6 ;
  • les caractères combinés (font ligatures) ;
  • les images jpeg2000 et l'attribut crossOrigin ;
  • etc.


Téléchargement.
L'article sur le site officiel.
Documentation.

Et vous ?

Utilisez-vous ce genre d'outils ? Si oui, lesquels ?

Découvrez la rubrique JavaScript avec ses cours et tutoriels de niveau débutant à expert pour apprendre le JavaScript, l'AJAX, jQuery, Angular, etc. Il y a également des quiz pour tester vos connaissances et des critiques de livres.
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -