HTML5Reset – HTML5Boilerplate

HTML5 encore lui et toujours lui…Et ca ne fait que commencer. Parmi tous les navigateurs les plus utilisés, seul Internet Explorer 8 n’est pas totalement prêt alors qu’il détient quand même le maximum d’utilisateurs. La Beta de la version 9 de IE devrait sortir d’ici le 15 Septembre 2010 On pourra donc confirmer que HTML5 sera le nouveau standard pour créer des pages web en 2011.

HTML5 Reset

Lorsqu’on commence à intégrer une maquette ou juste créer une structure HTML d’un site. Il est important de maîtriser l’affichage par défaut des navigateurs afin de ne pas se surprendre du comportement standards des  balises. A titre d’exemple, on constate un espacement avant et après un texte entouré d’une balise <p> (paragraphe).  Pour remédier à celà, Eric Meyer eu l’idée géniale de créer un CSS reset. Il s’agit de lister toutes les balises du HTML d’un fichier CSS , et de les affecter des attributs communs. CSS reset existait depuis l’apparition de la version 2 de CSS (c’est à dire depuis que l’on a vraiment commencé à standardisé la mise en page des sites Internet avec CSS). HTML5Reset reprend le même principe que les CSS reset. La seule différence réside dans le fait que les nouvelles balises du HTML5 sont ajoutées. html5doctor était le premier site qui était à jour sur ce sujet. HTML5Reset est un autre projet qui est consacré uniquement à cette fonctionnalité.

HTML5Boilerplate

C’est la grande nouveauté de cette semaine dans le monde du webdesign. HTML5Boilerplate est un template (HTML+CSS+Javascript) puissant créé par 2 développeurs qui sont Paul Irish et Divya Manian. 2 ans ont été passés pour développer cet outil. Plusieurs fonctionnalités que j’ai repris du site Alsacréations sont listées ici :

* HTML5 ready (les nouvelles balises du HTML5 sont utilisables)
* Compatibilité cross-browser (IE6 inclus)
* Directives variées de configuration par défaut
* Directives pour les navigateurs mobiles
* Préparation pour l’utilisation de règles @font-face
* Dégradation gracieuse et amélioration progressive
* Classes spécifiques à IE pour un contrôle plus fin
* Classes .js et .no-js
* Classes .clearfix et .visuallyhidden pour styler ces éléments de la bonne façon (accessible)
* Profiling JavaScript dans IE6 et IE7
* Optimisation de console.log (non bloquant)
* Reset CSS et normalisation des polices
* Feuille de style impression (media print)
* Squelette HTML/CSS adaptable pour iOS, Android, Opera Mobile
* Fichier .htaccess pour utilisation des fonctionnalités HTML5 et optimisation du chargement du contenu, règles pour le cache (dates d’expiration) et la compression
* Fix PNG pour IE
* Fichier plugins.js déjà prêt pour jQuery
* Fichier robots.txt
* Page 404 par défaut
* Fichier crossdomain.xml
* Code Google Analytics
* Modèle pour des tests unitaires
* Le tout en UTF-8

A essayer donc et surtout à conseiller

No related posts.

La liste des entrées complémentaires est établie par le module d’extension YARPP.