CSS & HTML-Tutorials auf nicogutmann.de

Alles auf Anfang

Mittwoch, 14. Oktober 2009, um 13:48 Uhr in CSS-Tutorials.

CSS-Reset, Alles-auf-Null-setzen, alle-Abständen-zurücksetzen. Man kann nennen wie man lustig ist, jeder meint dasselbe: Wir geben jedem Browser dieselbe Ausgangssituation, so dass browserspezifische Probleme eingeschränkt werden. Dieses Reset sollte man bei jedem Projekt zu Beginn definieren. Er wird auf jeder guten CSS-basierten Website zu finden sein und erleichtert die Arbeit, auch wenn es Am Anfang vielleicht nicht den Anschein hat.

Einen Schritt zurück

Bevor wir mit der Technik anfangen (runterscrollen ist unfair), noch ein Vorwort zu den Gründen für ein Reset bzw. zur Begriffserklärung:
Schau dir einmal meine Startseite ohne CSS-Datei an, komplett nackt, das reine Skelett:

Wie man sieht, sieht es nicht gerade schön aus, aber dennoch übersichtlich und man kann sich gut orientieren. Überschriften sind größer und deutlicher als der Fließtext, Listen sind mit Listenpunkten gekennzeichnet, Links sind blau markiert und unterstrichen, und es werden Abstände eingehalten, damit es übersichtlich bleibt.
Was würde passieren, wenn diese Einstellungen nicht vordefiniert wären und man kein CSS anzeigen lassen kann?

Sehr unübersichtlich und unmöglich richtig zu verstehen, oder? Aus diesem Grund haben diese Voreinstellungen durchaus ihren Sinn und müssen von den Browser-Programmierer eingebaut werden.

Ein Browser kommt selten allein

Nun ist es leider so, dass es nicht nur einen Browser gibt, mit dem man sich eine Website ansehen kann, es gibt gleich ein halbes Dutzend. Und natürlich sprechen sich die Entwickler der einzelnen Browser nicht ab und so hat jeder Browser andere Einstellungen. Auf den ersten Blick vielleicht nicht sichtbar, aber spätestens wenn du anfängst mit CSS zu layouten, werden diese kleinen Unterschiede richtig sichtbar und für Ärger sorgen.

Das Reset

Um diesen Ärger einzugrenzen bzw. ganz zu vermeiden, ist es sehr sinnvoll diese Voreinstellungen zu egalisieren, sprich zu eliminieren. Durch Erfahrungen und Ausprobieren weiß man nun welche Voreinstellungen es gibt und welche man demnach auf Null setzen muss. Das muss man nicht auswendig lernen, man bekommt irgendwann ein Gespür dafür bzw. lernt diese von Zeit zu Zeit kennen.
Nun gibt es zwei Grundgerüste, die verwendet werden, die das gleiche machen, aber unterschiedliche Selektoren verwenden. Um einen Überblick über alle vordefinierten Eigenschaften zu bekommen, kann man dieses CSS hier verwenden:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline
}
:focus {
   outline: 0;
}
body {
   line-height: 1;
   color: black;
   background: white
}
ol, ul {
   list-style: none
}
table {
   border-collapse: separate;
   border-spacing: 0
}
caption, th, td {
   text-align: left;
   font-weight: normal
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: ""
}
blockquote, q {
   quotes: "" ""
}


Das ist aber sehr umfangreich und meist ist es auch nicht notwendig so umfangreich zu werden (Bei großen Projekten mit mehreren Programmierer schon eher). Davon gibt es dann noch eine abgespeckte Variante, die einfach alle Selektoren aufruft, die Voreinstellungen besitzen. Nicht jeder Selektor besitzt dabei alle Eigenschaften, aber das macht ja nichts:

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img,b, i, q,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
   outline: 0;
   font-style: normal
}


Dann gibt es noch eine Variante, die ich persönlich verwende und viele andere auch, da sie kurz und schmerzlos ist und all die Selektoren, die oben aufgelistet wurden, vereint: Der Univeralselektor * (Sternchen). Damit definiert man, wie der Namensteil “Universal” bereits ankündigt, Eigenschaften für alle Selektoren, unabhängig davon, ob sie vererbbare Elemente sind, oder nicht. Diese Eigenschaften, die dort definiert werden, gelten für alle Selektoren und werden in allen Browsern, die noch im Einsatz sind, verstanden:

* {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
   outline: 0;
   font-style: normal
}


Was denn nun?

Es ist also vollkommen egal, welche Variante des Resets du verwendest, es kommt immer auf das Gleiche heraus: Alle Voreinstellungen werden eliminiert. Meistens ist es gar nicht notwendig alle Voreinstellungen zurückzustellen, somit ist dann die kürzere Variante sinnvoller.