CSS Prolog

Jeder Browser hat eines mit allen anderen gemein: er besitzt Grundeinstellungen.

Eingefügt am 10.04.09 um 15:33 Uhr:
Diese finden sich in den sogenannten User-Stylesheets.

Was Du so alles einstellen kannst, wird beispielhaft hier gelistet:
Suche nach User-Stylesheet – Du findest sehr viele Informationen – auch bei den Browser Herstellern.

Die wichtigsten Einstellungen sind jene die Margins und Paddings sowie die Schriftgröße festlegen. Werden diese nicht für bestimmte Selectoren explizit angegeben, verwendet der Browser Deiner Wahl seine Voreinstellungen, das kann naturgemäß zu unerwünschten Auswirkungen führen – Deine Website wird unterschiedlich in den einzelnen Browsern aussehen. Du hast plötzlich Abstände oder Ränder. Viele Anfänger mach hier oft den Fehler ihre Elemente deshalb zu positionieren – und schaffen damit unweigerlich neue Probleme.

CSS Einleitung (Prolog)

Um zu verhindern, dass Du Deine mühsam gestalteten Navigation oder Deinen schönen Inhalts-Spalten im Browser Abstände hat, die Du nicht lokalisieren kannst, solltest Du Dein CSS mit einen Prolog einleiten. Ein Prolog steht immer am Anfang eines Dokumentes, Prolog heißt ja nichts anderes als Einleitung.
Aufgabe dieser Einleitung ist es, zu gleichmäßiger Darstellung Deiner Website in allen Browsern zu führen.

Der CSS Prolog kann aus 2 Teilen bestehen, der wichtigste ist das

Reset:

{code type=css}
/* generelle Nullstellung */
*{
margin: 0;
padding: 0;
}
{/code}

Der Selektor * bedeutet „Alles“. Diese Methode will ich gerne als Hard-Reset bezeichnen, da sie generell alle Abstände zurücksetzt, also auch Abstände und Einrückungen von Listen. Ab hier mußt Du nun für jedes html Element im CSS die Eigenschaften padding und margin – wenn nötig – selbst definieren.

Da es nun lästig werden kann für jede Listenvariante oder die Absätze einzeln alles explizit anzugeben, kann man den Prolog um einen Restore erweitern (Danke Peter 😉 ):

Restore

{code type=css}
/* Abstände restaurieren */
h1, h2, h3, h4, h5, h6, p, blockquote, address, pre, ul, ol, dl, table {
margin-bottom: 1em;
}

/* Überschriften*/
h1, h2, h3, h4, h5, h6 { padding-top: 1em; }

/* Zitate einrücken */
blockquote { margin: 1em 2em; }

/* Auswahl in Auswahllisten (select)durch padding:0 schlecht lesbar */
option { padding-left: 0.2em; padding-right: 0.3em; }

/* Alle Listen einrücken */
ul, ol, dl { margin-left: 1em; }

/* Listenelemente mehr einrücken */
li { margin-left: 1em; }

/* Definitionen in Definitionslisten mehr einrücken */
dd { margin-left: 2em; }

/* Verschachtelte Listen ohne Außenabstand oben/unten */
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl {
margin-top: 0;
margin-bottom: 0;
}
{/code}

Hier nun werden die Abstände mit eigenen Werten wiederhergestellt, sodass alle Browser dieselben Abstände verwenden. Das Restore kann natürlich beliebig gestaltet und erweitert werden, ich habe nicht versucht, eine vollständige Liste zum kopieren zu schreiben, vielmehr ist es sinnvoll, sich vor einem Projekt über dessen Aufbau und Konzept klar zu werden. Wenn Du keine Definitionslisten brauchst, dann muß auch keine im Prolog stehen.

Ob Du em oder lieber px als Einheit verwendest, ist Deiner Vorliebe überlassen, birgt aber auch Dinge, die man beachten sollte – in meinem nächsten Artikel werde ich über Vor- und Nachteile beider Maßeinheiten schreiben und den CSS Prolog damit abschliessen.

Viel Spass!

Über 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.