--- title : Normalize.css - Qu'est-ce que c'est ? - isla Studio url : https://isla-stud.io/css/normalize-css-was-ist-das/ date : 2015-06-13 --- # 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. Dans ce contexte, je suis souvent tombée sur Normalize.css - un outil qui s'est imposé ces dernières années comme indispensable pour le développement web moderne. Plongeons plus profondément dans le sujet et découvrons pourquoi Normalize.css est si puissant et comment vous pouvez l'utiliser de manière optimale. Qu'est-ce que Normalize.css et pourquoi est-il important ? Normalize.css est une bibliothèque CSS développée par Nicolas Gallagher et Jonathan Neal 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, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, SoundCloud ainsi que dans de nombreux autres frameworks, toolkits et sites web. La feuille de style supporte un large éventail 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 standard des navigateurs sont souvent incohérents, ce qui fait qu'un site web peut apparaître différemment dans différents 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. Fonctionnalités plus approfondies de Normalize.css Normalize.css offre une multitude d'avantages qui vont au-delà de la simple normalisation : 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 champs d'entrée, des styles de boutons et des dispositions de tableaux. Cela réduit les efforts de débogage et assure une base uniforme. Extension du support de HTML5 : HTML5 a apporté de nombreux nouveaux éléments et attributs qui ne sont souvent pas affichés 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, l'élément summary, prévu pour être utilisé dans les éléments details, est affiché de manière cohérente dans les anciens navigateurs. 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 de font-size et la suppression des marges inutiles dans les éléments de texte standard. 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 les éléments input, textarea, select et button. Une structure modulaire : Le code de Normalize.css est divisé en sections séparées 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 sans problème 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 : „normalize.css préserve les styles standard 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 d'affichage pour les éléments HTML5, la correction de la taille de police pour le texte préformaté, les chevauchements SVG dans IE9 et de nombreux bugs inter-plateformes et inter-navigateurs dans les formulaires. Ci-dessous, par exemple, vous pouvez voir comment la feuille de style normalize.css rend la nouvelle valeur d'attribut HTML5 input "search" de l'attribut type cohérente et stylisable sur tous les navigateurs : /** * 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 ; } La réinitialisation ne permet souvent pas d'uniformiser les navigateurs Web en ce qui concerne 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”. Lorsqu'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. Une vue bien connue dans l'outil de débogage du navigateur lors de l'utilisation d'une réinitialisation CSS „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 veut aider à clarifier la manière dont les navigateurs affichent les éléments par défaut et faciliter la contribution à des améliorations. Meilleures pratiques pour l'intégration de Normalize.css Tout d'abord, installez 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 : Adaptation aux exigences du projet : Utilisez Normalize.css comme base et adaptez-le aux exigences spécifiques de votre projet. Cela signifie que vous utilisez le fichier comme point de départ pour votre propre CSS de base et que vous le remplacez si nécessaire. 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. Optimiser les 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 compléments. 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 : „CSS Cross-Browser Development” - 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 : „CSS User Agent Style Sheets” - Informations détaillées sur les styles standard de l'agent utilisateur dans différents navigateurs. Informations détaillées sur les styles UserAgent standard (en anglais) : WHATWG suggestions for rendering HTML documents, Internet Explorer User Agent Style Sheets, et CSS2.1 User Agent Style Sheets Defaults. HTML5 Boilerplate - Un modèle frontal complet qui intègre Normalize.css pour offrir une base solide à tout projet web. Web.dev : „Designing for Browser Diversity” - Le guide de Google sur la conception de sites Web pour une large gamme 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é entre navigateurs. Bonne chance dans votre développement !