CSS-Basis durch Reset oder Normalisierung how to normalize CSS

CSS-Basis durch Reset oder Normalisierung – normalize CSS

25. November 2018

Um die Kaskade von CSS ausnutzen zu können, sollte man eine solide CSS-Basis setzen. Mit diesem Thema befassen sich schon lange viele Webentwickler. Eric Meyer hat 2007 die erste Version seines bekannten CSS-Resets veröffentlicht und 2011 aktualisiert. Mittlerweile haben sich weitere Wege etabliert, um eine CSS-Basis zu setzen.

 

In meinen Projekten verwende ich sehr gerne die normalize.css von Nicolas Gallagher und Jonathan Neal, um zu Beginn schon Browserunterschiede im Rendering von Standard-Elementen zu entfernen. Darauf setzen dann meine eigenen globalen Stylings von HTML-Elementen auf.

 

Vor kurzer Zeit bin ich auf das Projekt sanitize.css von Jonathan Neal aufmerksam geworden, der nun einen Schritt weiter geht und einige Eigenschaften (für ältere Browser) weglässt und neue Konstrukte einführt.

 

 

CSS-Reset und CSS-Normalisierung

Man muss sich bewusst werden, was bei einem CSS-Reset passiert und was eine CSS-Normalisierung erreichen möchte. Der größte Effekt beim CSS-Reset hat das Entfernen aller Außen- und Innenabstände sowie Rahmen an allen Elementen. Dies wird man im Projekt tatsächlich an vielen Stellen machen. Allerdings muss man die Abstände explizit für alles neu setzen.

 

 

Beispiel CSS-Reset (in diesem Fall nicht der von Eric Meyer!)

 

CSS

* {

  margin: 0;

  padding: 0;

}

ul {

  padding-left: 2rem;

}

/* Bei Annahme folgender Nutzung: <ul class="nav"> */

.nav {

  padding-left: 0;

}

Der typische Weg bei der Nutzung eines CSS-Resets: Zunächst werden alle Abstände entfernt. Gleichzeitig möchte man erreichen, dass alle Listen im Inhaltsbereich eingerückt dargestellt werden, weshalb die Liste global gestylt wird. Dieses Styling greift dann auch wieder bei allen Listen, die man eigentlich mit dem Reset behandelt hat.

 

Eric Meyer betont deutlich, dass sein Reset nicht in Stein gemeißelt ist und als Startpunkt für eigene Basis-Styles angesehen werden soll. So könnte man also auch das ul (im Falle des Resets von Eric Meyer) aus dem langen Selektor weglassen und separat formatieren (ohne die Abstände zu entfernen).

 

 

Der Gedanke der Normalisierung

Standard-Styles vom Browser sind eine gute Sache, denn so wird jedes HTML-Dokument ohne jegliches Stylesheet lesbar dargestellt. Das ist genau der Punkt den eine Normalisierung wie normalize.css berücksichtigt. Ziel ist es die Elemente konsistenter über die Browser hinweg anzuzeigen, aber User Agent Styles möglichst beizubehalten bzw. an Standards ausgerichtet zu vereinheitlichen.

 

Nun müssen wir mit der Tatsache leben, dass die User Interfaces der unterschiedlichen Betriebssysteme bzw. Browser nicht gleich sind. Dies wirkt sich auch auf die Darstellung einiger HTML-Elemente aus, z. B. Eingabefelder, Checkboxen, Buttons, Listen, Tabellen, etc.

 

Anstatt mit einem Reset die Standard-Styles „auszuschalten“ ist es eine gute Idee, zu versuchen unterschiedliche Verhaltensweisen beim Rendering über eine Normalisierung auszugleichen.

 

Hierbei helfen fertige Sammlungen an Normalisierungen wie die oben vorgestellten normalize.css oder sanitize.css.

 

Ich tendiere eher dazu mit einer Normalisierung zu arbeiten, als ein (angepasstes) CSS-Reset einzusetzen.

 

 

Unterschiede zwischen normalize.css und sanitize.css

Im Wesentlichen kann man sanitize.css als Weiterentwicklung von normalize.css betrachten, welches einen anderen Ansatz bezüglich der Browser-Kompatibilität fährt. Während normalize.css auch ältere Browser wie Safari 6 oder den IE 8 berücksichtigt, wandelt sich die Browserlandschaft bei sanitize.css in Richtung aktueller Anforderungen von Projekten.

 

Normalize.css bietet eine super Basis, die sanitize.css wie folgt verändert:

  • CSS Vererbung wird universeller
  • Das Box-Modell ist standardmäßig intuitiver
  • Vereinheitlichung des Renderings von Monospace Schriften
  • Text in Selektionen hat der Lesbarkeit zu Liebe keinen Schatten
  • … und weitere
  • Einführung eines CSS-Resets à la * { margin: 0; padding: 0 }

Man muss Jonathan Neal zu Gute halten, dass der Reset in die Kategorie „Opinionated“ fällt. In diese, nach seiner Meinung gestalteten Gruppe, ordnet er den Großteil seiner Regeln ein. Diese offene und ehrliche Art gefällt mir an sanitize.css besonders gut. Dies wird auch durch die Auslagerung aller sinnvollen Optionen in überschreibbare Variablen deutlich, was sanitize.css zusätzlich sympathisch macht.

Beide Sammlungen überzeugen mit einer sehr guten Dokumentation (als Kommentare im CSS). Jede Regel wird unter Angabe der betreffenden Browser(version) begründet.

 

 

Fazit für eine CSS-Basis

Da jedes Projekt unterschiedliche Anforderungen an die zu unterstützenden Browser stellt, ist es nicht optimal einfach blind eines der bekannten Normalisierungs-Stylesheets zu benutzen.

 

Ich empfehle die CSS-Regeln beider Sammlungen anzuschauen, die Unterschiede zu verstehen und dies auf die Anforderungen des Projekts zu reflektieren. Als Ergebnis erhält man ganz automatisch eine eigene Normalisierung, die wohl überlegt ist.

 

Dies mag im ersten Augenblick aufwändig erscheinen. Betreut man öfter ähnliche Projekte, sehe ich allerdings Potenzial zur Wiederverwendung. Außerdem kommt man ggf. mit einem kleineren Set an Normalisierungs-Regeln aus, da man gar nicht alle HTML-Elemente nutzt für die es Normalisierungs-CSS gibt.

 

Wenn es schnell gehen muss, setze ich persönlich weiterhin auf normalize.css. Wie seht ihr die Thematik?

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.