HTML5 Boilerplate, un template puissant et complet

Performance, compatibilité inter-navigateurs, accessibilité, Javascript... Le template résume les principales bonnes pratiques de développement Web.

Publié le 18/05/2011

HTML5 Boilerplate est un template (HTML+CSS+JS+...) lancé par Paul Irish (Modernizr) et Divya Manian. Il contient toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un soupçon d'accessibilité (si utilisé à bon escient), voire de Flash.

Vous retrouverez donc dans un zip de 464 Ko tous les fichiers et sous-répertoires organisés pour débuter votre intégration avec d'excellentes bases. Bien entendu, vous l'aurez deviné, le but est de favoriser l'adoption de HTML5, d'où l'inclusion par défaut de la librairie Modernizr, ainsi que jQuery via GoogleAPI (avec fallback local). Voici une liste des fonctionnalités supportées :

 HTML5 ready,
 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.

Attention, tout ceci relève d'un condensé d'expérience et de recommandations généralistes, par exemples celles définies par Yahoo et Google, il est possible que certaines ne soient pas applicables à votre site ou provoquent des effets non désirés, faites donc bien attention à comprendre tous les critères utilisés et dans quel but. Il vous faudra peut-être retirer quelques instructions superflues.

Bien entendu d'autres sont à découvrir dans le code source, comme par exemples les indications pour les icônes Apple touch + favicon par exemple. Vous pouvez consulter directement la source sur le site et vous en inspirer.

Article rédigé par dew sous licence Creative Commons sur Alsacreations

• Voir aussi :
• Accessibilité
• HTML
• HTML5