Feuille de style : Normalize.css

normalizeArticle Dernière mise à jour le 4 juillet 2013 à 00h22

Le but de cette série d’articles est d’étudier une méthodologie de travail consistant à bien préparer ses feuilles de style CSS, en vue de développer un projet web utilisant ce langage. Voici le tout premier article de ce dossier spécial CSS, qui se composera de 3 articles :

  1. Normalize.css
  2. Modernizr.css
  3. Pie.css

Lorsqu’on ne définit aucun style CSS dans une page web, chaque balise hérite de propriétés associées par le navigateur utilisé. On appelle cela le rendu initial. Seul bémol, ce rendu est plus ou moins différent d’un navigateur à l’autre :

normalizeArticle1
Ce screenshot est issu d’un outil en ligne créé par Julien Royer, qui illustre par comparaison les différences de margin et padding qui existent entre Firefox et Internet Explorer 8, ce sur une dizaine de balises HTML.

Pour avoir un résultat plus complet (display, border, font-size, font-weight) je vous invite à essayer cet outil.

The Origins

Normalize.css trouve ses origines dans une méthode alternative couramment appelée Reset.css. Cette méthode n’est rien d’autre qu’une feuille de style dans laquelle on applique aux éléments HTML une réinitialisation des valeurs à 0 sur des propriétés CSS telles que margin, padding, border, …

Cette technique est utile pour avoir une page où les balises HTML sont dépourvues de style. Bien entendu, le style de chacune des balises réinitialisées pourra être redéfini manuellement.

Il devient donc plus facile de travailler sur l’homogénéité du rendu final de vos pages web.

Attention toutefois à bien discerner la différence entre les disparités de rendu des pages web liées aux navigateurs et les bugs d’affichage d’Internet Explorer qui sont deux choses différentes.

 

Bien qu’ayant fait ses preuves, cette méthode fait l’objet de controverses du fait de l’utilisation du sélecteur CSS universel (*) qui engendre une remise à 0 des valeurs de TOUS les éléments HTML de la page, sans aucune distinction.

Rien de bien méchant au premier abord me direz-vous, sauf que dans le cas où votre page est riche en balises HTML, ce sélecteur va les parcourir dans leur intégralité pour leur appliquer du style. La conséquence est immédiate, la page devient gourmande en ressources.

Firebug, exemple d'un selecteur universel
Voici le genre de traitement qu’exécute votre navigateur lorsque vous utilisez le reset.css …

Normalize.css : plus ciblé, plus optimisé

La solution la plus optimisée est de cibler plus précisément les balises HTML sur lesquelles on veut agir. Et c’est ce que Nicolas Gallagher s’est appliqué à faire en proposant un nouveau reset.css qui intègre les solutions des divers problèmes liés à l’affichage cross-browser :

  • Préserve les styles par défauts jugés comme étant utiles, contrairement au reset.css classique.
  • Normalise les styles pour un large éventail d’éléments HTML.
  • Corrige les bugs et les incohérences de navigation communs.
  • Améliore la convivialité avec de subtiles améliorations.

Voir une page d’exemple

 

Un reset.css modulaire

Plusieurs sections composent cette brillante feuille de styles. De plus, la plupart de ces sections agissent de façon indépendante ce qui facilite la gestion des styles sur des éléments HTML spécifiques. Autrement dit, vous pourrez supprimer ou commenter des sections entières sans altérer le comportement des autres sections. Par exemple, vous pourriez envisager de supprimer la section spécifique aux balises form si vous n’en avez pas l’utilité.

Une documentation complète

Le code contenu dans normalize.css est le résultat d’une recherche poussée sur le cross-browser et a été agrémentée par des essais méthodiques.

Vous trouverez beaucoup d’information sur le fichier dans la documentation en ligne, et d’avantage sur le Wiki GitHub.

En outre, vous pouvez prendre connaissance des informations suivantes pour une ligne de code :

  • Connaître son comportement
  • La raison de son inclusion
  • Les différences visuelles entre les navigateurs

Un projet “Open Source”

Normalize.css a été totalement développé en Open Source sur GitHub.

De fait, la communauté est en droit de signaler des bugs et même de proposer des améliorations.

Si vous avez besoin d’information sur les différentes versions, vous pourrez consulter l’historique daté de tous les commits effectués (MAJ) et leurs justifications sous forme de message.

Installer Normalize.css

Il suffit simplement de télécharger cette fameuse feuille de style :

Téléchargement Site officiel Téléchargement GitHub
Téléchargement Téléchargement

 

Normalize.css est sensiblement différente de reset.css dans sa portée et son exécution. Il s’agit d’une méthode de travail qui mérite d’être essayée car elle pourrait mieux correspondre à votre approche en terme de développement. Pour beaucoup, l’essayer, c’est l’adopter !

Commentaires

#1
MSILVA

Bonjour,
Cet article m’a permis de mieux comprendre l’utilité du normalize.css.
Maintenant, pourriez-vous m’indiquer la diference entre normalize.css et normalize.min.css? Pourrais-je remplacer normalize.css par bootstrap.css?

Je vous remercie de vos réponses.

Réagissez à cet article

Données obligatoires