Christian Renner (ch12r)

Nullnormalisieren der browserabhängigen HTML-Styleinformationen

Je nach Browserart und -version unterscheiden sich die Standardeinstellungen für die Darstellung von (X)HTML-Elementen. Dies kann zu unerwünschten Nebeneffekten führen, wenn man eine browserübergreifend identische Darstellung seiner (X)HTML-Dokumente zum Ziel hat.

Hier kann das im Folgenden geschilderte Verfahren unterstützend mitwirken, in dem es dafür sorgt, dass die browserabhängigen Standardeinstellungen überschrieben und auf entsprechende Null-Werte gesetzt werden. Diese Nullnormalisierung betrifft margins und paddings, aber auch weitergehende Styleinformationen, wie Schrifteigenschaften, Rahmen, Listeneigenschaften, usw.

Im Anschluss an die Normalisierung hat man die Möglichkeit, allen Elementen explizit Styleinformationen zu übertragen, ohne Gefahr zu laufen, dass es zu ungewünschten Interferenzen mit den browserabhängigen Standardwerten kommen kann. Dies könnten jedoch auch einige als Nachteil empfinden, da nun wirklich alle Styles explizit angegeben werden müssen, was jedoch mit Hilfe von CSS und der Verwendung des class-Attributs in den (X)HTML-Elementen recht flott von der Hand geht. Aber wie bei allem: Es ist eben Geschmacksache.

Für alle die in CSS noch nicht so textsicher sind, empfehle ich die einzelnen Normalisierungsschritte anhand einer CSS-Referenz zu verfolgen und inhaltlich nachzuvollziehen. Hierfür kann ich folgende Referenzen empfehlen:

Normalisieren – ja, aber wie?

Da es sinnvoll ist, die Normalisierung jedes Mal durchzuführen, wenn man ein neues Projekt startet, bietet es sich an die Normalisierung in einer separaten CSS-Datei zu definieren. Diese wird dann beispielsweise durch das Schlüsselwort

@import

zu Beginn des eigentlichen Stylesheets eines HTML-Dokumentes eingebunden. Das sieht dann, wie folgt aus:

/* Import des Null-Normalisierungsstylesheets*/
@import url("pfad/zur/null_normalisierung.css") all;

Als Grundlage sollte ein wohlstrukturiertes, validiertes (X)HTML-Dokument dienen.

Im folgenden werden die CSS-Definitionen aufgelistet, die dafür sorgen, dass alle (X)HTML-Elemente normalisiert werden. Bei Bedarf ist auch eine kleine Erklärung angefügt.

Innen- und Außenabstände normalisieren

/* Normalisieren der Innen- und Außenabstände */
body, p, pre, blockquote,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ul, ol, li,
th, td {
margin:0;
padding:0;
}

Im Prinzip sind hier alle wichtigen (X)HTML-Elemente aufgeführt, für die es in meinen Augen sinnvoll ist, eine Normalisierung durchzuführen. Formularelemente sind hier und auch in den unten stehenden Abschnitten absichtlich weggelassen, da diese meines Erachtens nicht global gestylt werden sollten. Siehe auch http://xhtmlforum.de/47438-frage-zum-umgang-mit-dem-html.html#post346369.

Schriften normalisieren

/*Normalisieren der Standardschriftart*/
html, body {
font-size: 100.01%;
line-height:1.5;
font-weight:normal;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}
/*Normalisieren der Überschriften*/
h1, h2, h3, h4, h5, h6 {
font-size:1.25em;
font-weight:normal;
}
/*Normalisieren der Schriften weiterer (X)HTML-Elemente*/
abbr, acronym, address, caption, cite, code, dfn, em, kbd, pre, q, samp, strong, th, var {
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
font-style:normal;
font-weight:normal;
}
/*Normalisieren der Textausrichtung in Tabellenunter und -überschrift*/
caption, th {
text-align:left;
}

Durch das Setzen der Schriftgröße im

html

– und

body

-Tag auf 100.01% umgeht man diverse Browserbugs. Dadurch kann man im folgenden durch die Einheit “em” relativen Bezug auf die Standardschriftgröße des Browsers nehmen, welche meistens bei 16px liegt. Dies ist bei der Normalisierung der Überschriften genau der Fall. Diese werden durch die Normalisierung einheitlich mit dem 1.25-fachen Wert der Standardgröße dargestellt (16*1.25 = 20).
Die angegebene Schriftart ist natürlich Geschmacksache. Zu beachten gilt, dass die Schriftart beim Client verfügbar sein muss, damit sie angezeigt wird. Eine Übersicht über je nach OS verfügbare Schriftarten findet sich unter: http://www.kayskreations.net/fonts/fonttb.html

Normalisierung sonstiger Styles

/*Normalisieren von Listen*/
ol, ul {
list-style:none;
}
/*Normalisieren von Tabellen (Rahmen)*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Normalisieren von fieldset und img (Rahmen)*/
fieldset, img {
border: 0;
}
/*Normalisieren von Zitaten*/
q:before, q:after {
content: '';
}

In diesem Abschnitt werden die Typen der Aufzählungspunkte in Listen deaktiviert. Außerdem werden Tabellenrahmen formatiert, sowie die Rahmen des

fieldset

– und

img

-Tags und Anführungszeichen vor und nach Zitaten entfernt.

Geschafft!

Damit sind die wichtigsten Styles so gesetzt, dass bei einem wohlgeformten (X)HTML-Dokument ein jungfräuliches Erscheinungsbild erzeugt wird:
Und so sieht es dann aus:

Damit ist eine wichtige Grundlage für ein erfolgreiches Webdesign entstanden, die sich natürlich nach Belieben erweitern und verkomplizieren lässt, in dem man zum Beispiel verschiedene Basisklassen für Bereiche definiert, die normalerweise auf jeder Webseite ihren Platz einnehmen, wie zum Beispiel “header”, “footer”, “menu”, “brand”, “claim”, usw.

Weiterführende Links:

This entry was posted in Development and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">