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

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

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

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

Ist es nur ein neues Schlagwort für das Zurücksetzen von CSS?

Ich arbeite an normalize.css.

Die Hauptunterschiede sind:

1. Normalize.css behält nützliche Standardeinstellungen bei, anstatt alles zu "unstyling". Zum Beispiel funktionieren Elemente wie supoder sub"funktionieren einfach" nach dem Einfügen von "normalize.css" (und werden tatsächlich robuster), während sie nach dem Einfügen von "reset.css" visuell nicht von normalem Text zu unterscheiden sind. Normalize.css legt Ihnen also keinen visuellen Ausgangspunkt (Homogenität) auf. Dies ist möglicherweise nicht jedermanns Geschmack. Am besten experimentieren Sie mit beiden und sehen, welche Gele Ihren Vorlieben entsprechen.

2. Normalize.css korrigiert einige häufige Fehler, die für reset.css nicht möglich sind. Es hat einen größeren Umfang als reset.css und bietet auch Fehlerbehebungen für häufig auftretende Probleme wie: Anzeigeeinstellungen für HTML5-Elemente, fehlende fontVererbung durch Formularelemente, Korrektur des font-sizeRenderns für pre, SVG-Überlauf in IE9 und buttonStyling-Fehler in iOS.

3. Normalize.css überfrachtet Ihre Entwicklungswerkzeuge nicht. Eine häufige Irritation bei der Verwendung von reset.css ist die große Vererbungskette, die in den CSS-Debugging-Tools des Browsers angezeigt wird. Dies ist bei normalize.css aufgrund der gezielten Stile kein solches Problem.

4. Normalize.css ist modularer. Das Projekt ist in relativ unabhängige Abschnitte unterteilt, sodass Sie möglicherweise Abschnitte (wie die Formularnormalisierungen) leicht entfernen können, wenn Sie wissen, dass sie von Ihrer Website niemals benötigt werden.

5. Normalize.css hat eine bessere Dokumentation. Der normalize.css-Code wird sowohl inline als auch umfassender im GitHub-Wiki dokumentiert . Auf diese Weise können Sie herausfinden, was jede Codezeile tut, warum sie enthalten war, welche Unterschiede zwischen den Browsern bestehen, und Ihre eigenen Tests einfacher ausführen. Das Projekt soll dazu beitragen, die Benutzer darüber zu informieren, wie Browser standardmäßig Elemente rendern, und es ihnen erleichtern, an der Einreichung von Verbesserungen beteiligt zu sein.

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

Der Hauptunterschied ist, dass:

• CSS-Resets zielen darauf ab , alle integrierten Browser- Stile zu entfernen . Standardelemente wie H1-6, p, strong, em usw. sehen sich am Ende genau gleich und haben überhaupt keine Dekoration. Sie sollten dann alle Dekoration selbst hinzufügen .

• CSS normalisieren zielt darauf ab, das integrierte Browser-Styling für alle Browser einheitlich zu gestalten . Elemente wie H1-6 werden in allen Browsern auf konsistente Weise fett, größer usw. angezeigt. Sie sollten dann nur den Unterschied in der Dekoration hinzufügen, den Ihr Design benötigt.

Wenn Ihr Design a) allgemeinen Konventionen für Typografie usw. folgt und b) Normalize.css für Ihre Zielgruppe funktioniert, wird durch die Verwendung von Normalize.CSS anstelle eines CSS-Resets Ihr eigenes CSS kleiner und schneller zu schreiben.

Normalize.css besteht hauptsächlich aus einer Reihe von Stilen, die auf dem basieren, was der Autor für gut gehalten hat, und die Browserübergreifend konsistent erscheinen lassen. Durch das Zurücksetzen wird das Styling von den Elementen entfernt, sodass Sie mehr Kontrolle über das Styling von allem haben.

Ich benutze beide.

Einige Stile von Reset, andere von Normalize.css. In Normalize.css gibt es beispielsweise einen Stil, mit dem sichergestellt wird, dass alle Eingabeelemente dieselbe Schriftart haben, die nicht vorkommt (zwischen Texteingaben und Textbereichen). Das Zurücksetzen hat keinen solchen Stil, daher haben Eingaben unterschiedliche Schriftarten, was normalerweise nicht erwünscht ist.

Grundsätzlich macht die Verwendung der beiden CSS-Dateien einen besseren Job, um alles auszugleichen;)

Grüße!

Erstens reset.cssist dies die schlechteste Bibliothek, die Sie verwenden können, da sie die Standardstruktur von HTML entfernt und alles, was Sie schreiben, nur als Text anzeigt, nachdem Sie die Werte für Randauffüllung und andere Attribute zugewiesen haben 0. So werden Sie zum Beispiel feststellen, dass <H1>dies dasselbe sein wird wie <H6>.

Normalize.cssVerwendet andererseits die Standardstruktur und behebt auch fast alle darin vorhandenen Fehler. Beispielsweise wird das Problem behoben, bei dem ein Formular von einem Browser zu einem anderen angezeigt wird. Durch Normalisieren wird dies behoben, indem diese Funktionen so geändert werden, dass Ihre Elemente in allen Browsern gleich angezeigt werden.

Aus der Beschreibung geht hervor, dass versucht wird, den Standardstil des Benutzeragenten in allen Browsern konsistent zu machen, anstatt das gesamte Standard-Styling wie beim Zurücksetzen zu entfernen.

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

Das Zurücksetzen scheint eine Notwendigkeit zu sein, um kundenspezifische Designspezifikationen zu erfüllen, insbesondere bei komplexen Designprojekten ohne Boilerplate-Typ. Es hört sich so an, als wäre das Normalisieren ein guter Weg, um mit der reinen Webprogrammierung fortzufahren, aber häufig sind Websites eine Verbindung zwischen Webprogrammierung und UI / UX-Designregeln.

Manchmal ist es die beste Lösung, beide zu verwenden. Manchmal ist es auch nicht zu verwenden. Und manchmal ist es das eine oder andere zu verwenden. Wenn Sie möchten, dass alle Stile, einschließlich Rand und Abstand, in allen Browsern zurückgesetzt werden, verwenden Sie reset.css. Dann tragen Sie alle Dekorationen und Stylings selbst auf. Wenn Sie die integrierten Stile einfach mögen, aber mehr browserübergreifende Synchronität, dh Normalisierungen, wünschen, verwenden Sie normalize.css. Wenn Sie jedoch sowohl reset.css als auch normalize.css verwenden, verknüpfen Sie zuerst das Stylesheet reset.css und anschließend (unmittelbar) das Stylesheet normalize.css. Manchmal ist es nicht immer eine Frage, welche besser ist, sondern wann man welche verwendet und wann man beide verwendet und wann man keine verwendet. MEINER BESCHEIDENEN MEINUNG NACH.

Diese Frage wurde bereits mehrmals beantwortet. Ich werde für jeden eine kurze Zusammenfassung geben, ein Beispiel und Erkenntnisse ab September 2019:

• Normalize.css - Wie der Name schon sagt, werden die Stile in den Browsern für ihre Benutzeragenten normalisiert , dh sie sind für alle Browser gleich, da sie standardmäßig geringfügig voneinander abweichen.

Beispiel : <h1>Tag innerhalb <section>von Google Chrome wird standardmäßig kleiner als die "erwartete" Größe des <h1>Tags. Microsoft Edge hingegen legt die "erwartete" Größe des <h1>Tags fest. Normalize.css macht es konsistent.

Aktueller Status : Das npm-Repository zeigt an, dass das Paket normalize.css derzeit mehr als 500.000 Downloads pro Woche enthält. GitHub-Sterne im Projekt des Repositorys sind mehr als 36.000.

• CSS zurücksetzen - Wie der Name schon sagt, werden alle Stile zurückgesetzt, dh alle Benutzeragentenstile des Browsers werden entfernt.

Beispiel : Es würde ungefähr so ​​etwas tun:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Aktueller Status : Es ist viel weniger beliebt als Normalize.css. Das Paket reset-css zeigt, dass es ungefähr 26.000 Downloads pro Woche sind. GitHub-Sterne sind nur 200, wie aus dem Repository des Projekts hervorgeht .