Utilisation de Normalize.css pour un développement homogène

La compatibilité du navigateur est une partie importante de l'accessibilité sur le Web. Les développeurs doivent prendre en compte les variation de leur public et des versions de navigateur nécessitant une assistance. Bien que les réinitialisations CSS soient une option, la plupart des développeurs préfèrent Normalize.css pour sa simplicité et sa compatibilité croisée avec tous les navigateurs Web modernes..

Dans ce post je couvrirai les bases de Normalize et sa comparaison avec les réinitialisations CSS générales. Ce n’est pas une bibliothèque compliquée et sa compréhension ne devrait pas prendre plus de deux heures. Mais la clé pour normaliser est l'apprentissage Comment pour le mettre en œuvre correctement et judicieusement.

Réinitialisation du navigateur vs normaliser

Pendant des années, j'ai utilisé une version personnalisée des réinitialisations CSS d'Eric Meyer. Celles-ci ont été suffisantes pour la plupart de mes projets et n'ont pas causé de problèmes majeurs. Cependant, Normaliser a changé mon point de vue sur les réinitialisations, car cela fonctionne différemment d’une réinitialisation CSS. Il est important que vous compreniez les différences.

Pensez à normaliser comme vêtement appliqué uniformément à tous les navigateurs, et penser à un CSS réinitialisé en tant que détonation thermonucléaire à travers tous les navigateurs.

Normaliser les styles et les formats de titres, les paragraphes, les guillemets et les éléments communs afin semblent identiques (ou assez proches) dans tous les navigateurs pris en charge. Les réinitialisations de CSS effacent complètement l’ardoise pas de défaut pour rien.

Avec une réinitialisation CSS, vos en-têtes peuvent ressembler à vos paragraphes; les éléments n'ont ni rembourrage, ni marges, ni espacement d'aucune sorte. Avec une réinitialisation CSS vous devez fournir un nouveau code pour améliorer le style. Avec Normalize vous obtenez un style préconçu qui peut être construit sur.

Alors, est-ce que l'un d'entre eux est meilleur que l'autre? C’est un sujet très controversé, même si l’un des arguments avancés est que Normaliser fonctionne mieux pour la compatibilité et produit des fichiers plus petits.

“Je dois dire que la normalisation est préférable à la réinitialisation. Cela se traduira par moins de CSS transférés sur le réseau, une meilleure utilisation des valeurs par défaut de l'agent utilisateur et une meilleure compréhension de la façon dont les éléments sont utilisés. signifiait afficher.”

Que vous aimiez Normalize ou préfériez une réinitialisation typique, il est important de comprendre au moins les deux côtés et de choisir celui qui vous convient le mieux. Très peu de développeurs commencent à coder à partir de zéro, aussi normaliser ou une réinitialisation CSS est presque nécessaire pour le développement de front-end moderne.

Si vous souhaitez essayer une réinitialisation CSS, voici quelques choix courants:

Les réinitialisations d'Eric Meyer
Réinitialisation HTML5
HTML5Doctor Réinitialiser

Normaliser la configuration

Le créateur de Normalize, Nicolas Gallagher, a rédigé un article introductif intitulé:

“Normalize.css est un petit fichier CSS qui offre une meilleure cohérence entre les navigateurs dans le style par défaut des éléments HTML. C'est une alternative moderne, compatible HTML5, à la réinitialisation CSS traditionnelle.”

Au fil des ans, cette bibliothèque est devenue une bibliothèque de confiance utilisée par les développeurs du monde entier. Normalize a même été utilisé dans une certaine mesure dans Bootstrap et Pure CSS.

Il existe deux façons d’utiliser Normaliser dans un projet: éditez la source pour personnaliser votre propre feuille de style Normaliser ou utilisez-la comme base et ajoutez des styles par-dessus..

La première est une stratégie de sélection qui consiste à parcourir le fichier Normalize.css et à supprimer tout ce dont vous n’avez pas besoin pour créer votre propre feuille de style. Il est préférable que chaque projet conserve la taille du fichier..

Certains développeurs incluent également l’ensemble du fichier Normalize.css et construisent leur propre feuille de style par dessus. La feuille de style normalisée complète couvre plus de 420 lignes de code, ce qui équivaut à environ 6,8 Ko non compressé..

Aucune méthode n'est meilleure que l'autre et il est intéressant de suivre ce qui convient le mieux à chaque projet ou à votre flux de travail préféré..

Pour commencer, téléchargez une copie de Normalize à partir de GitHub ou hébergez-la à partir d'un CDN externe. Vous pouvez également extraire la dernière version de Normalize directement de NPM, comme suit:

npm install --save normalize.css

Si vous ne souhaitez pas télécharger de fichier, vous pouvez même créer un nouveau projet CodePen auquel vous pourrez ajouter Normaliser en cliquant sur un bouton..

Comme Normalize est modulaire, vous pouvez supprimer des sections temporairement ou même créer votre propre version personnalisée de Normalize. Ensuite, vous pouvez démarrer chaque projet avec des parties sélectionnées, telles que les éléments d’affichage HTML5, tout en supprimant les styles du contenu incorporé..

Chaque règle Normalize a un commentaire CSS correspondant expliquant ce qu’elle fait et quels problèmes / bogues elle résout. Certains sont évidents comme la mise bloc de visualisation sur les nouveaux éléments HTML5.

D'autres sont moins évidents comme ce code SVG qui cache le débordement dans Internet Explorer:

svg: not (: root) débordement: caché;

Je recommande fortement de parcourir la feuille de style pour voir exactement comment elle fonctionne et savoir si Normaliser conviendrait à votre projet..

Normalize.css dans la conception Web

La dernière version de Normalize v4.0 offre un support étendu du navigateur.

Chrome (deux derniers)
Edge (deux derniers)
Firefox (deux derniers)
Firefox ESR
Internet Explorer 8+
Opéra (deux derniers)
Safari 6+

D'après ce que je peux dire, Normalize peut prendre en charge les anciennes versions de navigateurs avec des mises à jour constantes telles que Firefox. Mais le “officiel” le support n'inclut que les deux versions les plus récentes de Chrome / Edge / FF / Opera.

De plus, IE 6+ et Safari 4+ sont pris en charge avec Normalize v1, mais cette version n'est plus mise à jour..

Il est essentiel de vérifier les versions de navigateur avec un outil tel que Google Analytics. Cela vous donnera une meilleure idée si Normalize peut être un outil utile pour les travaux de conception Web modernes..

Ressources supplémentaires

Il n’ya pas beaucoup à enseigner spécifiquement sur la normalisation, de sorte que la plupart des apprentissages se font en faisant.

Et à vrai dire, il n’ya pas grand chose à expliquer que vous ne puissiez pas comprendre en lisant la feuille de style et en copiant / modifiant le code si nécessaire. Mais si vous recherchez d'autres informations pertinentes, j'ai ajouté quelques liens ci-dessous..

Vidéos d'introduction