Verwenden von Normalize.css für die homogene Entwicklung

Browser-Kompatibilität ist ein großer Teil der Zugänglichkeit im Web. Entwickler müssen das berücksichtigen Abweichung von Publikum und Browserversionen, die Unterstützung benötigen. Obwohl CSS-Resets eine Option sind, bevorzugen die meisten Entwickler Normalize.css wegen ihrer Einfachheit und Querkompatibilität in allen modernen Webbrowsern.

In diesem Beitrag werde ich berichten die Grundlagen von Normalize und wie diese mit allgemeinen CSS-Resets verglichen werden. Dies ist keine komplizierte Bibliothek und es sollte nicht länger als ein paar Stunden dauern, um zu verstehen. Aber der Schlüssel zum Normalisieren ist Lernen Wie um es richtig und vernünftig umzusetzen.

Browser-Reset oder Normalisieren

Ich habe seit Jahren eine angepasste Version der CSS-Resets von Eric Meyer verwendet. Dies war für die meisten meiner Projekte ausreichend und hat keine größeren Probleme verursacht. Normalize hat jedoch meine Ansicht von Resets geändert, da sie anders als ein CSS-Reset funktioniert. Es ist wichtig, dass Sie die Unterschiede verstehen.

Denken Sie an Normalisieren als einheitliches Kleidungsstück für alle Browser, und denke an einen CSS-Reset als thermonukleare Detonation in allen Browsern.

Normalisieren Sie Formatvorlagen und formatieren Sie Überschriften, Absätze, Blockanweisungen und allgemeine Elemente identisch erscheinen (oder nahe genug) in allen unterstützten Browsern. CSS-Reset löscht den Slate vollständig, so dass es vorhanden ist keine Standardwerte für alles.

Mit einem CSS-Reset können Ihre Überschriften genauso aussehen wie Ihre Absätze. Elemente haben keinerlei Füllungen, Ränder oder Abstände. Mit einem CSS-Reset Sie müssen neuen Code angeben um den Stil zu verbessern. Mit Normalisieren erhalten Sie eine vorgefertigter Stil worauf man bauen kann.

Ist einer davon besser als der andere? Es ist ein heiß diskutiertes Thema, obwohl in einem Argument das Normalisieren angegeben wird funktioniert besser für Kompatibilität und produziert kleinere Dateigrößen.

“Ich muss argumentieren, dass eine Normalisierung besser ist als ein Reset. Dies führt dazu, dass weniger CSS über die Leitung übertragen wird, die UA-Standardeinstellungen besser verwendet werden und die Funktionsweise der Elemente besser verstanden wird gemeint anzeigen.”

Egal, ob Sie sich in Normalize verlieben oder einen typischen Reset bevorzugen, es ist wichtig, zumindest beide Seiten zu verstehen und auszuwählen, was am besten passt. Nur wenige Entwickler beginnen mit der Codierung von Grund auf, so dass Normalize oder ein CSS-Reset für die moderne Frontend-Entwicklung fast erforderlich ist.

Wenn Sie einen CSS-Reset durchführen möchten, finden Sie hier einige beliebte Optionen:

• Eric Meyers Resets
• HTML5 zurücksetzen
• HTML5Doctor zurücksetzen

Konfig. Normalisieren

Normalize creator Nicolas Gallagher hat einen einführenden Beitrag geschrieben, der mit dieser Aussage führt:

“Normalize.css ist eine kleine CSS-Datei, die eine bessere browserübergreifende Konsistenz bei der Standardgestaltung von HTML-Elementen bietet. Es ist eine moderne, HTML5-fähige Alternative zum herkömmlichen CSS-Reset.”

Im Laufe der Jahre hat sich daraus eine vertrauenswürdige Bibliothek entwickelt, die von Entwicklern weltweit verwendet wird. In Bootstrap und Pure CSS wurde Normalize sogar bis zu einem gewissen Grad verwendet.

Es gibt zwei Möglichkeiten, Normalize in einem Projekt zu verwenden: Bearbeiten Sie die Quelle, um Ihr eigenes Normalize-Stylesheet anzupassen, oder verwenden Sie es als Basis und fügen Sie Stile hinzu.

Ersteres ist eine Auswahl- und Auswahlstrategie, bei der Sie die Datei Normalize.css durchgehen und alles löschen, was Sie nicht benötigen, um ein eigenes benutzerdefiniertes Stylesheet zu erstellen. Dies ist am besten auf Projektbasis, um die Dateigröße gering zu halten.

Alternativ enthalten einige Entwickler die gesamte Datei Normalize.css und erstellen darüber ein eigenes Stylesheet. Das Stylesheet Normalize umfasst mehr als 420 Codezeilen, was ~ 6,8 KB unkomprimiert entspricht.

Keine der Methoden ist besser als die andere und es lohnt sich, zu verfolgen, was für jedes Projekt oder Ihren bevorzugten Workflow am besten funktioniert.

Laden Sie entweder eine Normalize-Version von GitHub herunter oder hosten Sie sie von einem externen CDN. Sie können auch die neueste Version von Normalize direkt von NPM abrufen:

npm install --save normalize.css 

Wenn Sie keine Dateien herunterladen möchten, können Sie sogar ein neues CodePen-Projekt erstellen, das auf Knopfdruck Normalize anfügt.

Da Normalize modular ist, können Sie Abschnitte vorübergehend entfernen oder sogar Ihren eigenen benutzerdefinierten Build von Normalize erstellen. Anschließend können Sie jedes Projekt mit ausgewählten Teilen wie den HTML5-Anzeigeelementen starten, während Sie Stile für eingebetteten Inhalt entfernen.

Jede Normalize-Regel enthält einen entsprechenden CSS-Kommentar, in dem erklärt wird, was sie macht und welche Probleme / Fehler sie löst. Einige sind offensichtlich wie die Einstellung Bildschirmsperre auf neuere HTML5-Elemente.

Andere sind weniger offensichtlich wie dieser SVG-Code, der den Überlauf in Internet Explorer verbirgt:

svg: nicht (: root) overflow: hidden;  

Ich empfehle Ihnen dringend, das Stylesheet zu überfliegen, um genau zu sehen, wie es funktioniert und um zu erfahren, ob Normalize für Ihr Projekt geeignet wäre.

Normalize.css In Webdesign

Die neueste Version von Normalize v4.0 bietet umfassende Browserunterstützung.

• Chrome (letzte zwei)
• Kante (letzte zwei)
• Firefox (letzte zwei)
• Firefox ESR
• Internet Explorer 8+
• Oper (letzte zwei)
• Safari 6+

Soweit ich das beurteilen kann, unterstützt Normalize möglicherweise ältere Versionen von Browsern mit ständigen Updates wie Firefox. Aber die “offiziell” Die Unterstützung umfasst nur die beiden neuesten Versionen von Chrome / Edge / FF / Opera.

IE6 + und Safari 4+ werden auch mit Normalize v1 unterstützt, diese Version wird jedoch nicht mehr aktualisiert.

Es ist wichtig, dass Sie die Browserversionen mit einem Tool wie Google Analytics überprüfen. Dadurch erhalten Sie eine bessere Vorstellung davon, ob Normalize ein nützliches Werkzeug für moderne Webdesign-Arbeiten sein kann.

Weitere Ressourcen

Es gibt nicht viele Dinge, die speziell zum Thema Normalisieren unterrichtet werden sollen.

Und ehrlich gesagt gibt es nicht viel zu erklären, was Sie nicht lesen können, indem Sie das Stylesheet durchlesen und den Code nach Bedarf kopieren oder ändern. Wenn Sie jedoch nach anderen relevanten Informationen suchen, wurden unten einige Links hinzugefügt.

In Verbindung stehende Artikel

• Nicolas Gallagher: Über Normalize.css
• Einführung in HTML5 Boilerplate
• Normalize.css vs Reset.css: Welches ist zu verwenden?

Intro-Videos

• CSS normalisieren
• Zurücksetzen und Normalisieren durch Envato
• Nicolas Gallagher - Denken über skalierbares CSS hinaus