Normalize.css - Qu'est-ce que c'est ?

En tant que développeur web, je suis régulièrement confronté au défi de garantir des mises en page cohérentes entre les différents navigateurs. Je suis souvent confrontée à Normalize.css un outil qui s'est imposé au cours des dernières années comme un élément indispensable du développement web moderne. Plongeons plus profondément dans le sujet et découvrons pourquoi Normalize.css est si puissant et comment l'utiliser au mieux.

Qu'est-ce que Normalize.css et pourquoi est-il important ?

Normalize.css est une bibliothèque CSS créée par Nicolas Gallagher et Jonathan Neal a été développé pour normaliser les styles standard des éléments HTML à travers différents navigateurs. Il s'agit d'éliminer les différences dans l'affichage standard des éléments sans effacer les défauts utiles des navigateurs. Cela s'oppose aux réinitialisations CSS classiques, qui annulent tous les styles et laissent aux développeurs la tâche de reconcevoir chaque élément à partir de zéro.

La feuille de style Normalize.css est actuellement utilisée dans divers projets : Twitter Bootstrap, Plaque d'amorçage HTML5, GOV.UK, Rdio, Astuces CSS, SoundCloud ainsi que dans de nombreux autres frameworks, toolkits, et sites web.

La feuille de style prend en charge une vaste gamme de navigateurs (y compris les navigateurs mobiles) et comprend des règles CSS pour normaliser les éléments HTML5, les typographies, les listes, les contenus intégrés, les formulaires et les tableaux.

Pourquoi est-ce important ? Les styles par défaut des navigateurs sont souvent incohérents, ce qui fait qu'un site web peut avoir un aspect différent selon les navigateurs. Normalize.css permet d'éliminer ces incohérences en uniformisant les styles standard tout en conservant des valeurs par défaut utiles. Cela permet non seulement de gagner du temps, mais aussi de garantir une expérience utilisateur plus cohérente sur les différents appareils et navigateurs.

Fonctions plus approfondies de Normalize.css

Normalize.css offre de nombreux avantages qui vont au-delà de la simple normalisation :

1. Cohérence du navigateur : Il s'occupe de nombreuses différences mineures mais cruciales dans l'affichage des éléments entre les différents navigateurs, comme la gestion des entrée-champs, bouton-de styles et de table-de mise en page. Cela réduit les efforts de débogage et assure une base uniforme.
2. Extension de la prise en charge du HTML5 : HTML5 a apporté de nombreux nouveaux éléments et attributs qui ne s'affichent souvent pas correctement dans les anciens navigateurs. Normalize.css garantit que ces éléments sont représentés de manière cohérente et correcte dans tous les navigateurs courants. Par exemple, le summary-élément conçu pour être utilisé dans détails-Les éléments de la page d'accueil sont présentés de manière uniforme dans les anciens navigateurs.
3. Une typographie optimisée : Normalize.css contient également des ajustements typographiques qui garantissent que le texte est cohérent et lisible sur toutes les plates-formes. Cela comprend le réglage de line-height, la standardisation des font-size et la suppression des marges inutiles sur les éléments de texte standard.
4. Formulaires et éléments de saisie : L'un des domaines les plus problématiques dans le développement web est l'affichage des éléments de formulaire. Les différents navigateurs gèrent ces éléments de manière très différente, ce qui peut entraîner des différences d'apparence considérables. Normalize.css normalise ces styles en fournissant des styles de base cohérents pour entrée, textarea, select et bouton-pour les éléments de la base de données.
5. Conception modulaire : Le code de Normalize.css est divisé en sections distinctes et bien documentées. Cela vous permet d'utiliser certaines parties de manière ciblée ou de les omettre si nécessaire. Par exemple, si vous savez que votre site n'utilise pas de formulaires, vous pouvez facilement omettre cette section, ce qui optimise encore plus le temps de chargement de votre site.

Normaliser ou réinitialiser ?

Il vaut la peine de se pencher en détail sur la question de la différence entre une feuille de style normalize.css et la réinitialisation CSS traditionnelle :

"Le fichier normalize.css préserve les styles par défaut utiles".

La réinitialisation permet d'obtenir un style visuel homogène en aplatissant littéralement les styles par défaut pour presque tous les éléments. En revanche, normalize.css préserve de nombreux styles standard de navigateur utiles. Cela signifie qu'il n'est pas nécessaire de redéclarer tous les styles des éléments typographiques généraux.

Lorsqu'un élément se voit attribuer des styles standard différents dans différents navigateurs, normalize.css vise à rendre ces styles aussi cohérents que possible et conformes aux normes modernes.

"Normalize.css corrige les bugs généraux".

Les bugs généraux dans les navigateurs de bureau et mobiles qui sont en dehors de la portée de la réinitialisation sont corrigés. Cela inclut les règles display pour les éléments HTML5, les font-size-Les problèmes de texte préformaté, de chevauchement SVG dans IE9 et de nombreux bugs de formulaires multiplateformes et multi-navigateurs sont également inclus.

L'exemple suivant montre comment la feuille de style normalize.css utilise la nouvelle valeur d'attribut HTML5 input "recherche" de l'attribut type :

* 1. l'apparence des adresses est définie dans le champ de recherche dans S5, Chrome
* 2. addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/

input[type="search"] {
  -webkit-appearance : textfield ; /* 1 */
  -moz-box-sizing : content-box ;
  -webkit-box-sizing : content-box ; /* 2 */
  box-sizing : content-box ;
}

/**
* Removes inner padding and search cancel button in S5, Chrome on OS X
*/

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance : none ;
}

Une réinitialisation ne permet souvent pas de mettre les navigateurs web au même niveau lorsqu'il s'agit de la manière dont un élément doit être affiché. C'est particulièrement vrai pour les formulaires. Un domaine où la feuille de style normalize.css constitue une aide essentielle.

"Normalize.css ne "pollue" pas les outils de débogage".

Si une feuille de style normalize.css est utilisée, ce phénomène ne se produit pas dans une telle mesure, car des styles ciblés sont abordés et les sélecteurs multiples ne sont appliqués que de manière très modérée dans les jeux de règles.

"Normalize.css est utilisable de manière modulaire".

Le projet a été divisé en sections relativement indépendantes. Il est ainsi facile d'identifier les éléments qui nécessitent des styles spécifiques. De plus, il est possible de supprimer une section (par exemple la normalisation des formulaires) si l'on sait que le site web n'aura jamais besoin des règles définies.

"Normalize.css dispose d'une documentation détaillée".

Le code normalize.css est basé sur des tests méthodiques et des recherches approfondies sur tous les navigateurs. Le code est très bien documenté dans le fichier et décrit de manière plus détaillée sur le wiki Github. On peut donc rechercher exactement ce que "fait" telle ou telle ligne de code, pourquoi elle a été insérée, quelles sont les différences d'un navigateur à l'autre, ce qui simplifie considérablement la réalisation de ses propres tests.

Le projet a pour but d'aider à clarifier la manière dont les navigateurs affichent les éléments par défaut et de faciliter la contribution à des améliorations.

Meilleures pratiques pour l'intégration de Normalize.css

Installer d'abord ou téléchargez la feuille de style normalize.css sur GitHub. Il existe plusieurs façons d'utiliser efficacement Normalize.css. Vous devez suivre les procédures suivantes :

1. Adaptation aux exigences du projet : Utilisez Normalize.css comme base et adaptez-le aux besoins spécifiques de votre projet. Cela signifie que vous utilisez ce fichier comme point de départ pour votre propre CSS de base et que vous le remplacez si nécessaire.
2. Intégration inchangée : Vous pouvez également intégrer Normalize.css tel quel dans votre projet et adapter ensuite des styles spécifiques dans un fichier CSS séparé. Il est important que votre propre feuille de style soit chargée après l'intégration de Normalize.css, afin que vos modifications puissent écraser la normalisation.
3. Optimisation des temps de chargement : Veillez à n'utiliser que les parties de Normalize.css dont vous avez réellement besoin. La structure modulaire facilite la suppression des parties inutiles et permet ainsi d'optimiser le temps de chargement de votre site.

Navigateurs supportés

• Google Chrome (actuel)
• Mozilla Firefox (actuel)
• Mozilla Firefox ESR
• Opera (actuel)
• Apple Safari 6+
• Internet Explorer 8+

Remarques finales

La feuille de style normalize.css diffère de la réinitialisation CSS en termes de champ d'application et d'exécution. Il vaut la peine d'essayer pour voir si elle convient au développement de votre projet et à vos préférences.

Le projet est développé publiquement sur GitHub. Tout le monde peut signaler des problèmes et apporter des corrections et des ajouts. L'historique complet du projet peut être consulté publiquement et le contexte et les raisons des éventuelles modifications de code peuvent être consultés dans les messages "commit" et "issue".

Matériel de lecture complémentaire

Pour approfondir vos connaissances et travailler directement avec Normalize.css, vous trouverez ici une liste de ressources utiles :

• "CSS : The Definitive Guide" par Eric Meyer - Un livre approfondi qui décrit les subtilités de CSS et propose des techniques utiles pour gérer les incompatibilités inter-navigateurs.
• MDN Web Docs : "Développement CSS inter-navigateur". - Une excellente source d'informations actualisées sur le développement CSS multiplateforme.
• "HTML5 and CSS3 All-in-One For Dummies" par Andy Harris - Offre une introduction facile à comprendre au développement HTML5 et CSS3 et montre comment Normalize.css peut être intégré dans des projets modernes.
• Normalize.css sur GitHub - Page GitHub officielle du projet avec le code source et la documentation.
• MDN Web Docs : "Feuilles de style de l'agent utilisateur CSS". - Informations détaillées sur les styles d'agent utilisateur par défaut dans différents navigateurs.
• Informations détaillées sur les styles UserAgent standard (en anglais) : Suggestions de WHATWG pour le rendu des documents HTML, Feuilles de style de l'agent utilisateur d'Internet Explorer, et CSS2.1 Feuille de style de l'agent utilisateur par défaut.
• Plaque d'amorçage HTML5 - Un modèle frontal complet qui intègre Normalize.css pour offrir une base solide à tout projet web.
• Web.dev : "Designing for Browser Diversity" (Conception pour la diversité du navigateur) - Le guide de Google sur la conception de sites Web pour un large éventail de navigateurs et d'appareils.

Avec ces ressources, vous êtes parfaitement équipé pour intégrer Normalize.css dans vos projets et relever facilement les défis de la compatibilité inter-navigateurs. Bonne chance dans votre développement !