Quelle est la différence entre Normalize.css et Reset CSS?
Je sais ce qu'est CSS Reset, mais j'ai récemment 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 les suivantes:
Normalize.css préserve les valeurs par défaut utiles plutôt que de tout "déshabiller". Par exemple, des éléments tels que
supousub"fonctionnent simplement. "après avoir inclus normalize.css (et sont en fait plus robustes) alors qu’il est impossible de les distinguer visuellement du texte normal après avoir inclus reset.css. Ainsi, normalize.css n’impose pas de point de départ visuel (homogénéité) à votre situation. Cela peut ne pas être au goût de tout le monde. La meilleure chose à faire est d'essayer les deux et de voir quels gels correspondent à vos préférences.Normalize.css corrige certains bogues courants qui sont hors de portée de reset.css. Il a une portée plus large que reset.css et fournit également des corrections de bogues. pour les problèmes courants tels que: paramètres d'affichage pour les éléments HTML5, manque de
fonthéritage par les éléments de formulaire, correction defont-sizerendu pourpre, débordement de SVG dans IE9 etbuttonbug 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 affichée dans les outils de débogage CSS du navigateur. . Ce n'est pas un problème avec normalize.css à cause des styles ciblés.
Normalize.css est plus modulaire. Le projet est divisé en sections relativement indépendantes, ce qui vous permet de supprimer éventuellement des sections (comme les normalisations de formulaire). si vous savez qu'ils ne seront jamais utilisés par 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 GitHub Wiki . Cela signifie que vous pouvez savoir ce que fait chaque ligne de code, pourquoi il a été inclus, quelles sont les différences entre les navigateurs et exécuter plus facilement vos propres tests. Le projet vise à informer les utilisateurs sur la manière dont les navigateurs affichent les éléments par défaut et à leur permettre de participer plus facilement à la soumission des améliorations.
J'ai écrit plus en détail à ce sujet dans un article à propos de normalize.css
La principale différence est que:
Les réinitialisations CSS visent remove tous les styles de navigateur intégrés. Les éléments standard tels que H1-6, p, fort, em, etc. finissent par se ressembler exactement, sans aucune décoration. Vous êtes alors censé ajouter toute la décoration vous-même.
Normalize CSS vise à créer un style de navigateur intégré consistent entre navigateurs. Des éléments comme H1-6 apparaîtront en gras, plus gros, etc., de manière cohérente sur tous les navigateurs. Vous êtes alors censé ajouter uniquement la différence décoration de vos besoins en design.
Si votre conception a) respecte les conventions courantes en matière de typographie et cetera, et que b) Normalize.css fonctionne pour votre public cible, utilisez Normalize.CSS au lieu d'une réinitialisation CSS. Rendez votre propre CSS plus petit et plus rapide à écrire.
Normalize.css est principalement un ensemble de styles, basés sur ce que son auteur pensait bien paraître et le rendre cohérent sur tous les navigateurs. Réinitialisez fondamentalement les styles des éléments afin d’avoir plus de contrôle sur le style.
J'utilise les deux.
certains styles de Reset, certains de Normalize.css. Par exemple, dans Normalize.css, il existe un style permettant de s’assurer que tous les éléments d’entrée ont la même police, ce qui n’est pas le cas (entre les entrées de texte et les zones de texte). Réinitialiser n'a pas ce style, donc les entrées ont des polices différentes, ce qui n'est normalement pas souhaité.
Donc en gros, utiliser les deux fichiers CSS fait un meilleur travail de 'tout égaliser';)
cordialement!
la réinitialisation semble être une nécessité pour respecter les spécifications de conception personnalisées, en particulier pour les projets de conception complexes de type non standard. Il semble que la normalisation soit un bon moyen de procéder à la programmation purement Web, mais les sites Web sont souvent un mariage entre la programmation Web et les règles de conception UI/UX.
D'après sa description, il semble bien qu'il tente de rendre le style par défaut de l'agent utilisateur cohérent dans tous les navigateurs au lieu de supprimer tout le style par défaut comme le ferait une réinitialisation.
Conserve les valeurs par défaut utiles contrairement à de nombreuses réinitialisations de CSS.
La première reset.css est la pire bibliothèque que vous puissiez utiliser, car elle supprime la structure standard du HTML et affiche tout ce que vous écrivez sous forme de texte, après avoir affecté les valeurs de remplissage et d'autres attributs à 0. Ainsi, par exemple, vous constaterez que <H1> sera identique à <H6>.
D'autre part, Normalize.css utilise la structure standard et corrige presque toutes les erreurs qui y existent. Par exemple, cela corrige le problème d'affichage d'un formulaire d'un navigateur à un autre. Normalize résout ce problème en modifiant cette fonctionnalité 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 faut utiliser ni l'un ni l'autre. Et parfois, il faut utiliser l'un ou l'autre. Si vous souhaitez que tous les styles, y compris la marge et le remplissage, soient réinitialisés sur tous les navigateurs, utilisez reset.css. Ensuite, appliquez vous-même toutes les décorations et tous les styles. Si vous aimez simplement les styles intégrés, mais souhaitez davantage de synchronicité entre navigateurs, par exemple 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 n’est pas toujours question de savoir ce qui est le mieux, mais de savoir quand utiliser lequel ou non, quand utiliser les deux plutôt que quand. A MON HUMBLE AVIS.