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 la normalisation de CSS et la réinitialisation de CSS?

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

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 tels que sup ou sub “fonctionnent” après avoir inclus normalize.css (et sont en réalité rendus plus robustes), alors qu’ils ne peuvent pas être distingués visuellement du texte normal après avoir inclus reset.css. Donc, normalize.css n’impose pas un sharepoint départ visuel (homogénéité). Cela peut ne pas être au 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 qui sont hors de scope pour reset.css. Il a une scope plus large que reset.css, et fournit également des correctifs pour les problèmes courants tels que: les parameters d’affichage des éléments HTML5, le manque d’inheritance des font par les éléments de formulaire, la correction de font-size Bug de style de button dans iOS.

  3. Normalize.css n’encombre pas vos outils de développement. Une irritation commune lors de l’utilisation de reset.css est la grande chaîne d’inheritance 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 facilite la suppression éventuelle de sections (comme la normalisation des formulaires) si vous savez qu’elles ne seront jamais nécessaires à 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 wiki GitHub . Cela signifie que vous pouvez savoir ce que chaque ligne de code fait, pourquoi il a été inclus, quelles sont les différences entre les navigateurs et exécuter plus facilement vos propres tests. Le projet vise à aider les utilisateurs à comprendre comment les navigateurs affichent les éléments par défaut et à faciliter leur participation à la soumission des améliorations.

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

La principale différence est que:

  • Les réinitialisations CSS visent à supprimer tous les styles de navigateur intégrés. Les éléments standards comme H1-6, p, strong, em, et cetera finissent par se ressembler, sans aucune décoration. Vous êtes alors censé append toute la décoration vous-même.

  • Normaliser CSS vise à rendre le style de navigateur intégré cohérent sur tous 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é append seulement la différence de décoration à vos besoins de conception.

Si votre conception a) suit des conventions communes pour la typographie et autres, 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 petite et plus rapide à écrire.

Normalize.css est principalement un ensemble de styles, basé sur ce que son auteur pense être bon, et le fait paraître cohérent sur tous 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 y a 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 fonts 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!

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

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

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

Le 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 et d’autres atsortingbuts à 0 . Ainsi, par exemple, vous trouverez que

sera le même que

.

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 manière sur tous les navigateurs.

Parfois, la meilleure solution consiste à utiliser les deux. Parfois, il ne s’agit pas d’utiliser l’un ou l’autre. Et parfois, c’est utiliser l’un ou l’autre. Si vous voulez tous les styles, y compris la réinitialisation des marges et des marges sur tous les navigateurs, utilisez reset.css. Appliquez ensuite vous-même toutes les décorations et tous les styles. Si vous aimez simplement les styles intégrés mais que vous souhaitez davantage de synchronicité entre navigateurs, c’est-à-dire des normalisations, utilisez normize.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 n’est pas toujours préférable d’en utiliser un, mais de savoir quand utiliser les deux plutôt que de les utiliser. A MON HUMBLE AVIS.