CSS Reset
Das reine HTML ohne CSS soll die Seite strukturieren, aber die Browser zeigen leichte Abweichungen in der Darstellung. CSS-Dateien beginnen darum oft mit einem CSS-Reset, das die Unterschiede zwischen den mitgebrachten Browser-Stilen ausbügelt.
Auch die Templates von Content Management Systemen wie WordPress beginnen meist mit einem CSS-Reset. Häufig verwendete CSS-Resets sind z.B.
- normalize.css by Nicolas Gallagher necolas auf Github
- Eric Meyer Reset CSS
- The best-practices CSS foundation
- A tiny modern CSS reset
Ein CSS Reset gilt heute im Wesentlichen älteren Browsern. Auch wenn man kein CSS-Reset einsetzt – es lohnt sich, einen Blick in Vorgaben zu werfen. Oft helfen schon die Kommentare, Zusammenhänge besser zu verstehen.
Abstände
Die Inhalte von Blockelementen halten einen kleinen Abstand voneinander – den margin. Wenn die HTML-Tags direkt im body-Tag des HTML-Dokuments liegen, sieht man zudem auch einen kleinen Margin zum Rand des Browserfensters. Die Inhalte von Inline-Tags hingegen weisen keinen margin gegenüber den sie umschließenden Texten auf. Bilder, die innerhalb eines Textes gesetzt werden, verhalten sich einfach wie übergroße Buchstaben und vergrößern den umfassenden Block.
Inhalte von p-Tags werden ohne CSS von den meisten grafischen Browsern in der Schriftgröße 1 em (meistens 16 Pixel) in einer Serifenschrift (Times New Roman) gesetzt. Die Zeilenhöhe (meistens 18 Pixel) kann nur über CSS geändert werden. Der Benutzer kann die Schriftgröße durch den Zoom seines Browsers ändern.
Tabellen
Tabellen nehmen per Vorgabe nur den Platz ein, den ihre Inhalte brauchen. Tabellenzellen halten einen kleinen Abstand voneinander (border-spacing).
Tabellen nehmen zwar nicht unbedingt die gesamte Breite des umfassenden Blocks ein, aber sie erzeugen einen Zeilenumbruch vor dem öffnenden und nach dem schließenden table-Tag. Ohne Attribute und CSS-Eigenschaften weisen Tabellen keinen Rahmen und keinen Abstand der Inhalte von Tabellenzellen auf (kein padding).
HTML ul- und ol-Listen
HTML-Listen oder Aufzählungen in ul bzw. ol-Tags bestehen aus einer Box für die Listensymbole oder den numerischen Index und einem Block für den Text. Per Vorgabe sind die Listensymbole leicht eingerückt und sitzen nicht linksbündig.
Leerzeichen und Zeilenumbrüche in HTML
Browser ignorieren aufeinanderfolgende Leerzeichen und Zeilenumbrüche im HTML-Code.
<p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p> <p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p>
Die beiden HTML-Elemente werden im Browser gleich angezeigt:
Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.
Damit Leerzeichen und Zeilenumbrüche vom Browser angezeigt werden, kann der CSS-Stil white-space: pre; eingesetzt werden.
div und span: Elemente ohne Eigenschaften
Die zuvor beschriebenen HTML-Tags besitzen „angeborene“ Eigenschaften für die Darstellung im Browserfenster. p-Elemente erzeugen einen kleinen Abstand (margin) vor und nach dem p-Tag, ul- und ol-Tags besitzen ebenfalls diesen führenden und abschließenden Margin und darüber hinaus bringen sie Auflistungszeichen oder einen Index mit. Zwei besondere Tags sind das div-Tag und das span-Tag: Sie sind Tags ohne Eigenschaften.
Sie sind für die Gestaltung von HTML-Elementen durch Stylesheets gedacht, ohne dass der Browser eigene Formatierungen einbringt. Das div-Tag ist ein Block-Tag, das span-Tag ein Inline-Tag. Ohne weitere Formatierung führt auch das div-Tag zu einem Zeilenvorschub, während Text in einem span-Tag ohne besondere Auszeichnung innerhalb der Textzeile dargestellt wird.
Abweichungen bei Formularfeldern
Hier sind die Unterschiede zwischen den Browsern am deutlichsten und gleichzeitig aufwändiger bei der Egalisierung, denn die Browser greifen auf die Elemente des Betriebssystems zurück.
Darstellung der HTML-Elemente ohne eigenes CSS
Chris Bracco hat eine HTML5-Testseite auf github, die sich gut für Testzwecke eignet – sowohl für kleine als auch für große Projekte.
