Je sais ce qu'est la réinitialisation CSS, mais j'ai récemment entendu parler d'un nouveau truc appelé Normalize.css.
Quelle est la différence entre le Normaliser.css y Réinitialiser le CSS ?
Quelle est la différence entre normaliser le CSS et réinitialiser le CSS ?
S'agit-il simplement d'un nouveau mot à la mode pour le CSS Reset ?
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éstructurer". Par exemple, des éléments comme sup o sub "fonctionnent tout simplement après l'inclusion de normalize.css (et sont en fait rendus plus robustes) alors qu'ils sont visuellement indiscernables d'un texte normal après l'inclusion de reset.css. Ainsi, normalize.css ne vous impose pas un point de départ visuel (homogénéité). Cela peut ne pas être du goût de tout le monde. La meilleure chose à faire est d'expérimenter les deux et de voir lequel correspond le mieux à 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 des problèmes courants tels que : les paramètres d'affichage pour les éléments HTML5, le manque de font l'héritage par les éléments de forme, la correction font-size le rendu pour pre , le débordement SVG dans IE9, et la button bogue 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 des navigateurs. 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 utilisées par votre site Web.
Normalize.css possède une meilleure documentation. Le code normalize.css est documenté en ligne ainsi que de manière plus complète dans le fichier 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 a pour but de sensibiliser les gens à la façon dont les navigateurs rendent les éléments par défaut, et de leur permettre de participer plus facilement à la proposition d'améliorations.
J'ai écrit un article plus détaillé à ce sujet. à propos de normalize.css
Très souvent, vous ne les laissez pas à zéro (lorsque vous utilisez reset), ce qui vous permet d'écrire moins de code. Si vous souhaitez mettre à zéro certaines valeurs, ce style est lié à l'élément auquel il est destiné et devrait faciliter le débogage.
Et CELA est un problème important avec de nombreuses réinitialisations, y compris le fait que tout remettre à zéro ralentit également le navigateur.
Et c'est aussi l'avantage des réinitialisations - normaliser les erreurs de dimensionnement comme celles-ci : github.com/yahoo/pure/issues/395
La différence majeure 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, etc. finissent par se ressembler exactement, sans aucune décoration. Vous êtes alors censé ajouter toute décoration vous-même.
Normaliser les CSS vise à rendre le style du navigateur intégré cohérent à travers les navigateurs. Les éléments tels que H1-6 apparaîtront en gras, plus grands, etc. de manière cohérente sur tous les navigateurs. Vous êtes donc censé ajouter uniquement le différence dans la décoration de vos besoins en matière de design.
Si votre conception a) respecte les conventions communes en matière de typographie et autres, et b) Si Normalize.css fonctionne pour votre public cible, l'utilisation de Normalize.CSS au lieu d'une réinitialisation CSS rendra votre propre CSS plus petit et plus rapide à écrire.
@Jitendra Vyas : -- il n'y a vraiment qu'une seule solution : lisez le code bien commenté de Normalize.CSS, et décidez si cela correspond à vos besoins ou non. github.com/necolas/normalize.css/blob/master/normalize.css
Autre remarque : Normalize.css vise à être aussi discret que possible, ce qui permet au développeur d'écrire son code plus facilement sans avoir à lutter contre les conflits de spécificité.
Disons que je veux utiliser la réinitialisation lors du développement. Et une fois que c'est fait, je veux normalize.css ou un autre JS qui prend toutes les choses que je n'ai pas changé et qui sont les mêmes dans le navigateur. Ou que j'ai modifié et qui, après modification, sont devenues identiques à celles du navigateur, et qui les supprime du côté client. Ainsi, la réinitialisation aiderait à développer ce "programme" plus rapidement du côté client. Les deux sont heureux. Et une façon beaucoup plus intelligente de vivre.
Normalize.css est principalement un ensemble de styles, basé sur ce que son auteur pensait être bon, et rend l'apparence cohérente entre les navigateurs. Reset enlève essentiellement le style des éléments pour que vous ayez plus de contrôle sur le style de tout.
J'utilise les deux.
Certains styles proviennent de Reset, d'autres de Normalize.css. Par exemple, dans 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 n'est pas le cas (entre les entrées de texte et les zones de texte). Reset n'a pas un tel style, donc les entrées ont des polices différentes, ce qui n'est normalement pas souhaité.
En gros, l'utilisation des deux fichiers CSS permet de mieux "égaliser" les choses ;)
Salutations !
C'est une bonne réponse, pragmatique. Ce n'est pas nécessairement l'un ou l'autre. Prenez ce que vous voulez de chacune. J'aime bien une réinitialisation complète, mais Normalizer offre quelques éléments intéressants qui fonctionnent bien en plus.
@ricmetalster, avez-vous dû réécrire votre propre css afin de combiner les fonctionnalités de reset.css et normalize.css ?
Si vous souhaitez utiliser les deux, pourriez-vous indiquer "reset" d'abord, puis "normalize" et enfin ajouter vos styles par-dessus ?
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.
@Jitendra Vyas - non. Les outils sont différents, ils ne sont ni meilleurs ni pires les uns que les autres. Choisissez celui qui vous aide le mieux à résoudre les problèmes que vous rencontrez.
La réinitialisation semble être une nécessité pour répondre aux spécifications de la conception personnalisée, en particulier sur les projets de conception de type complexe, non-boilerplate. Il semble que la normalisation soit une bonne façon de procéder dans l'optique d'une programmation purement web, mais les sites web sont souvent un mariage entre la programmation web et les règles de conception UI/UX.
@Michael lequel ? réinitialiser ou normaliser ? (J'essaie juste de comprendre l'opinion des gens sur le sujet).
@Bren à la fois réinitialiser et normaliser. Connaître les valeurs CSS par défaut pour chaque élément fait partie des qualités d'un bon développeur frontal. Je les considère comme des méthodes de force brute qui ne sont pas nécessaires.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
