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


Je sais ce que CSS Reset est, 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 le CSS Reset?


489
2017-07-31 03:17


origine


Réponses:


Je travaille sur normalize.css.

Les principales différences sont les suivantes:

  1. Normalize.css préserve les valeurs par défaut utiles plutôt que de "décolorer" tout. Par exemple, des éléments comme sup ou sub "juste travailler" après avoir inclus normalize.css (et sont en fait rendus plus robustes) alors qu'ils sont visuellement indiscernables du texte normal après avoir inclus reset.css. Donc, normalize.css n'impose pas un 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 voir quels gels avec vos préférences.

  2. Normalize.css corrige certains bogues courants hors de portée de reset.css. Il a une portée plus large que reset.css, et fournit également des corrections de bugs pour les problèmes courants tels que: les paramètres d'affichage pour les éléments HTML5, le manque de font héritage par des éléments de formulaire, correction font-size rendu pour pre, Débordement SVG dans IE9, et button bogue de style dans iOS.

  3. 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 est affichée 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.

  4. 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 formulaire) si vous savez qu'elles ne seront jamais nécessaires pour votre site Web.

  5. Normalize.css a une meilleure documentation. Le code normalize.css est documenté en ligne et de manière plus complète dans le GitHub Wiki. Cela signifie que vous pouvez savoir 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 à sensibiliser les gens à la manière dont les navigateurs rendent les éléments par défaut, et facilite leur implication dans la soumission des améliorations.

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


721
2017-12-02 14:13



La différence majeure est que:

  • Les réinitialisations CSS visent à retirer tout style de navigateur intégré. Les éléments standards comme H1-6, p, strong, em, et cetera finissent par se ressembler, n'ayant aucune décoration. Vous êtes alors censé ajouter toute la décoration toi même.

  • Normaliser CSS vise à faire un style de navigateur intégré cohérent à travers les navigateurs. Des éléments comme H1-6 apparaîtront en gras, plus gros et cetera de manière cohérente entre les navigateurs. Vous êtes alors censé ajouter uniquement le différenceen décoration vos besoins de conception.

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


220
2017-08-01 10:06



Normalize.css est principalement un ensemble de styles, basé sur ce que l'auteur pensait avoir l'air bien, et le rendre cohérent à travers les navigateurs. Réinitialiser 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 ce style, donc les entrées ont des polices différentes, ce qui n’est normalement pas le cas.

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

Cordialement!


37
2018-06-01 00:32



Eh bien, d'après sa description, il semble que le style par défaut de l'agent utilisateur soit cohérent dans tous les navigateurs plutôt que de supprimer tous les styles par défaut lors d'une réinitialisation.

Préserve les défauts utiles, contrairement à de nombreuses réinitialisations CSS.


5
2017-07-31 03:21



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


5
2018-01-07 17:13



Premier reset.css est la plus mauvaise bibliothèque que vous puissiez utiliser, car elle supprime la structure standard de HTML et affiche tout ce que vous écrivez comme du texte, après avoir assigné les valeurs de marge de remplissage et d’autres attributs à 0. Ainsi, par exemple, vous trouverez que <H1>, sera le même que <H6>.

D'autre part Normalize.css utilise la structure standard et corrige également presque toutes les erreurs existantes. Par exemple, il résout le problème en affichant 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 façon sur tous les navigateurs.


5
2017-07-23 11:59



Parfois, la meilleure solution consiste à utiliser les deux. Parfois, c'est pour n'utiliser ni l'un ni l'autre. Et parfois, c'est pour utiliser l'un ou l'autre. Si vous voulez que tous les styles, y compris la marge et la réinitialisation de la marge dans tous les navigateurs, utilisent reset.css. Ensuite, appliquez toutes les décorations et les styles vous-même. Si vous aimez simplement les styles intégrés mais que vous souhaitez plus de synchronicité 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). Parfois, il ne s'agit pas toujours de savoir quel est le meilleur, mais de savoir quand utiliser les deux plutôt que les deux. A MON HUMBLE AVIS.


0
2017-09-22 20:18