Reset Styles

Um Reset Styles zu verstehen, muss man zuerst wissen, dass CSS Stylesheets von Anfang bis Ende der Reihe nach umgesetzt werden... Kommen Eigenschaften doppelt vor, gilt die letzte der beiden.

Schreibt man als zum Beispiel:


h1 {
  font-size: 1em;
}

und einige Zeilen darunter


h1 {
  font-size: 1.4em;
}

werden in der dazugehörigen HTML-Seite alle Überschriften mit dem Tag h1 in Schriftgröße 1.4em, angezeigt.

Diese Tatsache bereitet den Weg für Reset Styles. Verschiedene Browsertypen haben verschiedene Standard-Werte für Browser... Wenn man diese nicht explizit definiert, werden Unterschiede auftreten. Die Idee ist also, sich einen Stylesheet zu programmieren, der einfach alle Abstände auf null setzt, alle größen auf 100%, alle Formatierungen und Stile auf normal.

Diesen Reset Style bindet man im HTML Header einfach vor dem eigentlichen Stylesheet ein.

Die Vorteile liegen auf der Hand. Man muss nicht jeden einzelnen Parameter definieren, nur weil er evtl Unterschiede zwischen den Browsern hervorruft, aber für das Design gar nicht vonnöten ist.

Trotzdem können Standardeinstellungen auch sinnvoll sein, und möchte man diese umgehen, muss man sehr umsichtig vorgehen. Es ist schnell geschehen, daß man z.B.  Schriftgrößen in Pixel statt in Relationen definiert, und es damit Leuten mit Sehschwächen unmöglich macht, im Internet Explorer die Textgröße zu verändern. Auch im Hinblick auf mobile Endgeräte können Standardwerte durchaus sinnvoll sein, und ersparen dem Programmierer eine Menge Zusatzarbeit. Denn wo und auf welchen Geräten eine Webseite mittlerweile überall angezeigt werden kann ist nicht mehr leicht zu überschauen.

Hier der Link zum Code auf meyerweb.com