Trouver ses repères avec HTML5 et choisir son framework

Vous l’avez sans doute remarqué mais ces temps-ci, HTML5 est à la Une et devient désormais l’un des sujets récurrents d’une majorité de blogs dédiés au web design. C’est en parcourant l’un d’entre eux que je suis tombé aujourd’hui sur cet article dans lequel l’auteur recense un certain nombre de ressources utiles sur ce sujet de “presque” avant-garde. Que penser d’un tel afflux d’informations, au passage, très représentatif des nombreux sujets juteux que le net ne cesse de véhiculer depuis quelques années ? Eh bien moi je vous le dis, tout ceci est propice à la confusion ! Ce qui m’a conduit à la petite mise en garde publiée sur Twitter ce matin… 

Attention ne combinez pas #html5shiv http://titifr.im/1b et #Modernizr http://titifr.im/s ils font la même chose (en partie) ! #html5

… pour la simple et bonne raison que j’ai bien failli me faire avoir* ! La mode est aux frameworks, aux packages tous faits avec leur lot d’avantages et d’inconvénients. Il en existe pour les CSS, pour les librairies Javascripts, il en fallait donc un pour HTML dans sa version la plus fraîche :). Pour ma part je me suis arrêté sur l’excellent HTML5RESET* qui se veut lui-même un alternative au jeune mais non moins célèbre Boileplate dont tous deux tirent profit du script magique Modernizr permettant de travailler dès aujourd’hui avec les nouveaux langages du web. 
L’article de speckyboy m’a néanmoins fait découvrir Initializr qui se veut une sorte de Boileplate en kit (on y choisit justement d’exploiter modernizr ou html5shiv) via un outil de composition “online” qui ne laisse aucune place à l’erreur. Plutôt pas mal !

*Dans la version “commentée l’auteur précise que son choix s’est porté sur Modernizr mais présente HTML5 Shiv comme une alternative possible.

Either Modernizr OR the HTML5 Shiv script is required if you want IE compatability, AND you want to use the new, more-semantic HTML5 elements (header, article, footer, etc) 
we’ve only included Modernizr; HTML5 Shiv can be found here: http://html5shiv.googlecode.com

Attention si vous utilisez le framework HTML5RESET !

L’excellent framework http://html5reset.org/ (alternative à http://html5boilerplate.com/) permettant de travailler dès aujourd’hui avec HTML5 et CSS3 de manière plus décontractée a révélé quelques petites faiblesses lorsque j’ai voulu le tester dernièrement. La première, flagrante, se situe au niveau de la compatibilité IE7 et IE6 puisque l’affichage sur ces navigateurs provoque une erreur javascript qui peut-être facilement supprimée en mettant à jour tout simplement l’appel au script de cette façon :

<!—[if lt IE 8]>

<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js”></script>

<![endif]—>

L’autre défaillance se situe au niveau de l’insertion d’une Google Map au moyen de l’API puisque les contrôleurs ne s’affichent pas. La solution se trouvait sur ce groupe http://goo.gl/GMFNC dans lequel l’auteur explique que l’erreur provient du fichier reset.css. Sa solution consiste à redéfinir le style suivant et le tour est joué :

#map_canvas img { max-width: none; }