Quelle est la différence entre Normalize.css et Reset CSS?

565

Je sais ce qu'est CSS Reset, mais récemment j'ai entendu parler de cette nouvelle chose appelée Normalize.css

Quelle est la différence entre Normalize.css et Reset CSS ?

Quelle est la différence entre normaliser CSS et réinitialiser CSS?

Est-ce juste un nouveau mot à la mode pour la réinitialisation CSS?

css normalize-css

— Jitendra Vyas
source

800

Je travaille sur normalize.css.

Les principales différences sont:

Normalize.css préserve les valeurs par défaut utiles plutôt que de "tout décortiquer". Par exemple, des éléments comme supou sub"fonctionnent simplement" après avoir inclus normalize.css (et sont en fait rendus plus robustes) alors qu'ils ne peuvent pas être visuellement distingués du texte normal après avoir inclus reset.css. Donc, normaliser.css ne vous impose pas de point de départ visuel (homogénéité). Ce n'est peut-être pas du goût de tout le monde. La meilleure chose à faire est d'expérimenter avec les deux et de voir quels gels correspondent à vos préférences.
Normalize.css corrige certains bogues courants qui sont hors de portée pour reset.css. Il a une portée plus large que reset.css et fournit également des corrections de bogues pour des problèmes courants tels que: les paramètres d'affichage pour les éléments HTML5, le manque d' fonthéritage par les éléments de formulaire, la correction du font-sizerendu pour pre, le débordement SVG dans IE9 et le buttonbogue de style dans iOS.
Normalize.css n'encombre pas vos outils de développement. Une irritation courante lors de l'utilisation de reset.css est la grande chaîne d'héritage qui s'affiche dans les outils de débogage CSS du navigateur. Ce n'est pas un problème avec normalize.css en raison des styles ciblés.
Normalize.css est plus modulaire. Le projet est divisé en sections relativement indépendantes, ce qui vous permet de supprimer facilement des sections (comme les normalisations de formulaires) si vous savez qu'elles ne seront jamais nécessaires à votre site Web.
Normalize.css a une meilleure documentation. Le code normalize.css est documenté en ligne ainsi que de manière plus complète dans le wiki GitHub . Cela signifie que vous pouvez découvrir ce que fait chaque ligne de code, pourquoi elle a été incluse, quelles sont les différences entre les navigateurs et exécuter plus facilement vos propres tests. Le projet vise à informer les gens sur la façon dont les navigateurs rendent les éléments par défaut et à faciliter leur implication dans la soumission des améliorations.

J'ai écrit plus en détail à ce sujet dans un article sur normalize.css

— nécolas
source

19

Très souvent, vous ne les laissez pas à zéro (lors de la réinitialisation), vous écrivez donc moins de code. Si vous souhaitez mettre à zéro certaines valeurs, ce style est couplé à l'élément auquel il est destiné et devrait faciliter le débogage.

— necolas

8

Et c'est un problème important avec de nombreuses réinitialisations, y compris le fait que la remise à zéro de tout ralentit également le navigateur.

— Rob

4

Et c'est aussi l'avantage des réinitialisations - normaliser les problèmes de dimensionnement des erreurs comme celui-ci: github.com/yahoo/pure/issues/395

— Daniel Sokolowski

4

Est-ce que je rate le moment où je pense que, oui, normalement, vous ne voulez pas que le remplissage et la marge soient nuls mais, non, vous ne voulez pas non plus la valeur par défaut?

— guioconnor

9

Personnellement, j'ai désactivé Normalize, bien que je l'utilise toujours. Beaucoup de points ici sont vraiment exagérés (meilleure documentation ...?). Normaliser est une opinion, donc il vous impose un point de départ visuel (malgré ce que dit cette réponse). Il peut également devenir obsolète. Reset.css ne peut jamais devenir obsolète après l'avoir utilisé. Et vous êtes plus susceptible de vouloir que les marges et le remplissage soient à 0 que tout autre nombre auquel vous pouvez penser, il est donc utile de tout réinitialiser lorsque vous développez. Normaliser est bon pour les problèmes de navigateur, cependant, et c'est la principale raison pour laquelle je l'utilise.

— Chuck Le Butt

255

La principale différence est que:

Les réinitialisations CSS visent à supprimer tous les styles de navigateur intégrés. Les éléments standard comme H1-6, p, strong, em, et cetera finissent par se ressembler exactement, sans décoration du tout. Vous êtes ensuite censé ajouter toute la décoration vous-même.
Normaliser CSS vise à rendre le style de navigateur intégré cohérent entre les navigateurs. Des éléments comme H1-6 apparaîtront en gras, plus gros et ainsi de suite de manière cohérente sur tous les navigateurs. Vous êtes ensuite censé n'ajouter que la différence de décoration dont votre design a besoin.

Si votre conception a) suit les conventions courantes pour la typographie et cetera, et b) Normalize.css fonctionne pour votre public cible, alors l'utilisation de Normalize.CSS au lieu d'une réinitialisation CSS rendra votre propre CSS plus petit et plus rapide à écrire.

— Jesper M
source

6

@Jitendra Vyas: - il n'y a vraiment qu'une seule façon: lisez le code Normalize.CSS bien commenté, et décidez si cela correspond bien à vos besoins ou non. github.com/necolas/normalize.css/blob/master/normalize.css

— Jesper M

Autre remarque: Normalize.css vise à être aussi discret que possible, ce qui permet à un développeur d'écrire plus facilement son code sans avoir à lutter contre des conflits de spécificité.

— zzzzBov

laisse donc dire que je veux utiliser la réinitialisation lors du développement. Et une fois terminé, je veux normaliser.css ou un JS qui prend tout ce que je n'ai pas changé et qui est le même dans le navigateur. Ou j'ai changé et après avoir changé, ils sont devenus les mêmes que dans le navigateur et les supprimer pour le côté client. Donc, la réinitialisation aiderait tout en développant ce «programme» dans un côté client plus rapide. Heureux tous les deux. Et une façon de vivre beaucoup plus intelligente.

— Muhammad Umer

En pratique, vous finirez par écraser tous les styles de Normalize de toute façon. La théorie est géniale, mais dans ce monde OOCSS, cela ne fonctionne jamais de cette façon dans la pratique.

— Chuck Le Butt

40

Normalize.css est principalement un ensemble de styles, basé sur ce que son auteur pensait être beau et le rendre cohérent sur tous les navigateurs. La réinitialisation supprime essentiellement le style des éléments afin que vous ayez plus de contrôle sur le style de tout.

J'utilise les deux.

Certains styles de Reset, certains de Normalize.css. Par exemple, à partir de Normalize.css, il existe un style pour s'assurer que tous les éléments d'entrée ont la même police, ce qui ne se produit pas (entre les entrées de texte et les zones de texte). La réinitialisation n'a pas un tel style, donc les entrées ont des polices différentes, ce qui n'est normalement pas souhaité.

Donc, fondamentalement, l'utilisation des deux fichiers CSS fait un meilleur travail en «égalisant» tout;)

Cordialement!

— ricmetalster
source

1

C'est une bonne réponse pragmatique. Ce n'est pas nécessairement l'un ou l'autre. Prenez ce que vous voulez de chacun. J'aime une réinitialisation complète, mais Normalizer offre de jolis morceaux qui fonctionnent bien sur le dessus.

— Undistraction

3

@ricmetalster, avez-vous donc dû réécrire votre propre css afin de combiner les fonctionnalités de reset.css et normalize.css?

— ayjay

2

Si vous souhaitez utiliser les deux, pourriez-vous d'abord lister "reset" puis "normaliser" puis ajouter vos styles en haut?

— Craig

Je prends l'approche "ne pensez pas trop" et j'utilise les deux et les appelle comme inclus dans mes importations SASS @import '_normalize' && '_reset'

— killscreen

6

La première reset.cssest la pire bibliothèque que vous puissiez utiliser, car elle supprime la structure standard de HTML et affiche tout ce que vous écrivez sous forme de texte, après avoir attribué les valeurs de remplissage de marge et d'autres attributs 0. Ainsi, par exemple, vous constaterez que <H1>, sera le même que <H6>.

D'autre part, Normalize.cssutilise la structure standard et corrige également presque toutes les erreurs qui y existent. Par exemple, il résout le problème de l'affichage d'un formulaire d'un navigateur à un autre. Normaliser corrige cela en modifiant ces fonctionnalités afin que vos éléments soient affichés de la même manière sur tous les navigateurs.

— N.Elsayed
source

1

Dépend de votre cas d'utilisation. Compte tenu de votre exemple, si je dois modifier les styles de police de toutes les balises de titre de mon projet, je n'aurai pas vraiment recours aux valeurs par défaut, n'est-ce pas? On ne devrait pas étiqueter une bibliothèque comme étant la "pire" juste parce qu'on ne peut pas trouver une utilisation dans ses propres projets.

— Debojyoti Ghosh

L'un des principaux objectifs de la réinitialisation est de lutter contre les problèmes découlant des styles appliqués par le navigateur, ce qui est très utile. Je pense également que cela ne devrait pas être considéré comme une bibliothèque.

— Isaac Pak

@gdebojyoti Il existe des cas d'utilisation, mais je souhaite très rarement que tous mes titres soient de la même taille, quels que soient leurs styles de police respectifs.

— James Beninger

5

D'après sa description, il semble qu'il essaie de rendre le style par défaut de l'agent utilisateur cohérent sur tous les navigateurs plutôt que de supprimer tout le style par défaut comme le ferait une réinitialisation.

Préserve les valeurs par défaut utiles, contrairement à de nombreuses réinitialisations CSS.

— dbb
source

Alors est-il préférable d'utiliser Normalize css over Reset?

— Jitendra Vyas

3

@Jitendra Vyas - non. Les outils sont différents, pas meilleurs ou pires les uns que les autres. Choisissez celui qui vous aide à résoudre les problèmes que vous rencontrez le mieux.

— Quentin

8

Je dois dire que la normalisation est meilleure que la réinitialisation. Cela se traduira par moins de CSS transférés sur le câble, une meilleure utilisation des valeurs par défaut de l'UA et une meilleure compréhension de la façon dont les éléments sont censés s'afficher.

— Ryan Kinal

5

la réinitialisation semble une nécessité pour répondre aux spécifications de conception personnalisées, en particulier sur les projets de conception complexes de type sans passe-partout. Il semble que la normalisation soit un bon moyen de procéder à une programmation purement Web, mais les sites Web sont souvent un mariage entre la programmation Web et les règles de conception UI / UX.

— user3170099
source

C'est exagéré 99% des cas d'utilisation.

— Michael

@Michael lequel? réinitialiser ou normaliser? (J'essaie juste de comprendre l'esprit des gens sur le sujet)

— Bren

1

@Bren réinitialise et normalise. Connaître les valeurs CSS par défaut pour chaque élément fait partie d'un bon développeur frontal. Je les vois comme des méthodes de forces brutes inutiles.

— Michael

4

@Michael> Knowing the default CSS values for each element is part of being a good front end developer- cela revient à dire que vous préférez travailler avec des électrons plutôt qu'avec un langage de programmation, car c'est ce qui fait un bon développeur. L'utilisation efficace d'outils fait de quelqu'un un bon développeur, l'inverse appartient généralement à la catégorie des fanatiques qui perdent du temps

— nicholaswmin

1

Parfois, la meilleure solution consiste à utiliser les deux. Parfois, c'est de ne pas utiliser ni l'un ni l'autre. Et parfois, c'est d'utiliser l'un ou l'autre. Si vous souhaitez réinitialiser tous les styles, y compris la marge et le remplissage sur tous les navigateurs, utilisez reset.css. Appliquez ensuite toutes les décorations et tous les styles vous-même. Si vous aimez simplement les styles intégrés mais que vous souhaitez plus de synchronisation entre navigateurs, c'est-à-dire des normalisations, utilisez normalize.css. Mais si vous choisissez d'utiliser à la fois reset.css et normalize.css, liez d'abord la feuille de style reset.css, puis la feuille de style normalize.css (immédiatement) ensuite. Parfois, ce n'est pas toujours une question de savoir ce qui est le mieux, mais quand utiliser lequel versus quand utiliser les deux versus quand n'utiliser ni l'un ni l'autre. A MON HUMBLE AVIS.

— Sean Tank Garvey
source

0

Cette question a déjà reçu plusieurs réponses, je vais résumer brièvement pour chacun d'eux, un exemple et des idées à partir de septembre 2019:

Normalize.css - comme son nom l'indique, il normalise les styles dans les navigateurs pour leurs agents utilisateurs, c'est-à-dire les rend identiques sur tous les navigateurs car, par défaut, ils sont légèrement différents.

Exemple : la <h1>balise à l'intérieur <section>par défaut de Google Chrome sera plus petite que la taille "attendue" de la <h1>balise. Microsoft Edge, d'autre part, fait la taille "attendue" de la <h1>balise. Normalize.css le rendra cohérent.

État actuel : le référentiel npm montre que le package normalize.css a actuellement plus de 500 000 téléchargements par semaine. Les étoiles GitHub dans le projet du référentiel sont plus de 36k.

Réinitialiser CSS - comme son nom l'indique, il réinitialise tous les styles, c'est-à-dire qu'il supprime tous les styles d'agent utilisateur du navigateur.

Exemple : il ferait quelque chose comme ça ci-dessous:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

État actuel : il est beaucoup moins populaire que Normalize.css, le package reset-css montre qu'il s'agit d'environ 26 000 téléchargements par semaine. Les étoiles GitHub ne sont que 200, comme cela peut être remarqué dans le référentiel du projet .

— Daniel Danielecki
source