Was ist der Unterschied zwischen Normalize.css und Reset CSS?

Question

Ich weiß, was CSS Reset ist, aber vor kurzem habe ich von dieser neuen Sache namens Normalize.css gehört

Was ist der Unterschied zwischen dem Normalisieren.css y CSS zurücksetzen ?

Was ist der Unterschied zwischen der Normalisierung von CSS und dem Zurücksetzen von CSS?

Ist das nur ein neues Modewort für den CSS-Reset?

Answer 1

Ich arbeite an normalize.css.

Die wichtigsten Unterschiede sind:

1. Normalize.css bewahrt nützliche Standardeinstellungen, anstatt alles zu "entstylen". Zum Beispiel, Elemente wie sup o sub "funktionieren", nachdem normalize.css eingefügt wurde (und sind sogar robuster), während sie nach der Einfügung von reset.css visuell nicht mehr von normalem Text zu unterscheiden sind. Mit normalize.css wird Ihnen also kein visueller Ausgangspunkt (Homogenität) aufgezwungen. Das mag nicht jedermanns Geschmack sein. Am besten ist es, mit beiden zu experimentieren und zu sehen, was Ihren Vorlieben entspricht.

2. Normalize.css behebt einige häufige Fehler, die nicht in den Anwendungsbereich von reset.css fallen. Es hat einen größeren Umfang als reset.css und bietet auch Fehlerbehebungen für häufige Probleme wie: Anzeigeeinstellungen für HTML5-Elemente, das Fehlen von font Vererbung durch Formularelemente, Korrektur von font-size Rendering für pre , SVG-Überlauf im IE9 und die button Styling-Fehler in iOS.

3. Normalize.css macht Ihre Entwicklungswerkzeuge nicht unübersichtlich. Ein häufiges Ärgernis bei der Verwendung von reset.css ist die große Vererbungskette, die in den CSS-Debugging-Tools der Browser angezeigt wird. Bei normalize.css ist dies aufgrund der gezielten Formatierung kein Problem.

4. Normalize.css ist modularer. Das Projekt ist in relativ unabhängige Abschnitte unterteilt, was es Ihnen leicht macht, Abschnitte (wie die Formularnormalisierungen) zu entfernen, wenn Sie wissen, dass sie von Ihrer Website nie benötigt werden.

5. Normalize.css hat eine bessere Dokumentation. Der normalize.css-Code ist sowohl inline als auch ausführlicher in der GitHub-Wiki . Das bedeutet, dass Sie herausfinden können, was jede einzelne Codezeile tut, warum sie eingefügt wurde, welche Unterschiede es zwischen den Browsern gibt, und dass Sie Ihre eigenen Tests leichter durchführen können. Das Projekt soll dazu beitragen, die Menschen darüber aufzuklären, wie die Browser Elemente standardmäßig darstellen, und es ihnen erleichtern, sich an der Einreichung von Verbesserungen zu beteiligen.

Ich habe darüber in einem Artikel ausführlicher geschrieben über normalize.css

Answer 2

Der Hauptunterschied besteht darin, dass:

• CSS-Resets zielen darauf ab entfernen alle eingebauten Browser-Stylings. Standardelemente wie H1-6, p, strong, em usw. sehen am Ende genau gleich aus und haben überhaupt keine Verzierung. Sie sollen dann Folgendes hinzufügen alle Dekorationen selbst.

• CSS normalisieren zielt darauf ab, das integrierte Browser-Styling einheitlich in allen Browsern. Elemente wie H1-6 werden in allen Browsern einheitlich fett, größer usw. dargestellt. Sie sollten dann nur noch die Unterschied in der Dekoration Ihre Designbedürfnisse.

Wenn Ihr Entwurf a) den gängigen Konventionen für Typografie usw. folgt und b) Wenn Normalize.css für Ihre Zielgruppe geeignet ist, können Sie mit Normalize.CSS anstelle eines CSS-Resets Ihr eigenes CSS kleiner und schneller schreiben.

Answer 3

Normalize.css ist in erster Linie eine Reihe von Stilen, die auf dem basieren, was der Autor für gut befunden hat, damit es in allen Browsern konsistent aussieht. Reset entfernt im Grunde das Styling von Elementen, damit Sie mehr Kontrolle über das Styling von allem haben.

Ich benutze beides.

Einige Stile stammen aus Reset, einige aus Normalize.css. Zum Beispiel gibt es in Normalize.css einen Stil, der sicherstellt, dass alle Eingabeelemente die gleiche Schriftart haben, was nicht der Fall ist (zwischen Texteingaben und Textareas). Reset hat keinen solchen Stil, so dass die Eingaben unterschiedliche Schriftarten haben, was normalerweise nicht erwünscht ist.

Die Verwendung der beiden CSS-Dateien ist also grundsätzlich besser geeignet, um alles "auszugleichen" ;)

Grüße!

Answer 4

Aus der Beschreibung geht hervor, dass versucht wird, den Standardstil des Benutzeragenten in allen Browsern konsistent zu machen, anstatt alle Standardstile zu entfernen, wie es bei einem Reset der Fall wäre.

Behält nützliche Standardeinstellungen bei, im Gegensatz zu vielen CSS-Resets.

Answer 5

Erste reset.css ist die schlechteste Bibliothek, die Sie verwenden können, weil sie die Standardstruktur von HTML aufhebt und alles, was Sie schreiben, einfach als Text anzeigt, nachdem sie die Werte von margin padding und anderen Attributen an 0 . So werden Sie zum Beispiel feststellen, dass <H1> wird gleich sein wie <H6> .

Andererseits Normalize.css verwendet die Standardstruktur und behebt auch fast alle darin vorhandenen Fehler. Zum Beispiel behebt es das Problem mit der Darstellung eines Formulars von einem Browser zum anderen. Normalize behebt dieses Problem, indem es diese Funktionen so verändert, dass Ihre Elemente in allen Browsern gleich angezeigt werden.