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

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?

Je travaille sur normalize.css.

Les principales différences sont:

1. 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.

2. 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.

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 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.

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 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 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

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.

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!

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.

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.

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.

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.

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 .