Typische Fehler beim Erstellen von Style-Sheets

Viele Web-AutorInnen erarbeiten sich einen Großteil ihres Wissen durch try&error, indem sie neue Konstruktionen mit Editor und Browser selbst ausprobieren. Für ihren Lernerfolg stellt die interne Fehlerkorrektur des Browsers eine Behinderung dar (dazu: "Forgiving" Browsers Considered Harmful).

Besonders ärgerlich ist das bei CSS, da hier eine solche Fehlerkorrektur einerseits ausdrücklich untersagt ist und andererseits die Browser selber vor Fehlern strotzen. Wenn eine Seite im Internet Explorer 5.* "funktioniert" und in anderen Browsern nicht, liegt das in den meisten Fällen an dessen unzulässiger Fehlertoleranz.

selectors: Vorsicht mit der Namensgebung!

Gross- und Kleinschreibung zählt

Eine Methode, um eine Style-Regel nur auf bestimmte Elemente in einem HTML-Dokument anzuwenden, ist, diesen mit dem Attribut class="..." einen "selector" mitzugeben (dasselbe gilt sinngemäß für das id-Attribut).

Die Regel div.box{border:solid} im externen StyleSheet oder im style-Element ( <style type="text/css">...</style> im head-Element des Dokuments) gilt also nur für das div-Element <div class="box">.

In HTML ist die Gross- und Kleinschreibung bei Element-Namen und Attribut-Namen egal, nicht jedoch bei Attributwerten. Auf HTML angewandt übernimmt CSS dieses Verhalten. Obige Regel gilt also auch für <DIV CLASS="box"> nicht jedoch für <div class="BOX">!

Alle Internet Explorer Versionen vor IE6 ignoriert den Unterschied, alle Netscape 4 Versionen auch. Der Internet Explorer 6, Netscape 6 (jeweils im standards-mode), Mozilla und Opera (zumindest ab Version 5) machen es richtig und ignorieren den Klassennamen "BOX" für die angegebene Style-Regel, weil sie eben nur für "box" gilt.

Sonderzeichen!

Besonderheit gibt es bei der Benennung von CSS-Selektoren. Der zulässige Zeichenraum für Elementennamen, Klassen und IDs besteht aus dem großen und kleinen Alphabet (ohne Umlaute), den Ziffern von 0 bis 9 sowie dem Bindestrich "-". Sie können weder mit einer Ziffer noch mit dem Bindestrich beginnen.

Weitere Zeichen können nur verwendet werden, wenn sie mit dem backslash "\" maskiert werden. Mehr dazu steht in Kapitel 4.1.3 der CSS2 Spezifikation.

Eine Sonderrolle nimmt der Unterstrich "_" ein. In CSS1 ist er ausdrücklich ausgeschlossen und auch in CSS2 war er nicht erlaubt, bis er Anfang April 2001 in Form einer Fehlerkorrektur doch zugelassen wurde.

Trotzdem sollte man weiterhin auf die Verwendung des Unterstrichs in Klassen- und ID-Namen verzichten, da noch viele ältere Browser benutzt werden, die solche Klassen und IDs (zum Zeitpunkt ihrer Veröffentlichung völlig zu recht!) ignorieren.

Keine Anführungszeichen in Style-Deklarationen!

Der Wert eines HTML-Attributs muss in Anführungszeichen stehen, wenn er Sonderzeichen oder Leerzeichen enthält.

<BODY BGCOLOR=#ffffff> ist falsch.
<BODY BGCOLOR="#ffffff"> ist richtig.

In Style-Deklarationen dürfen die Werte keine Anführungszeichen haben.

BODY {background-color: #CCFFCC} ist richtig.
BODY {background-color: "#CCFFCC"} ist falsch.

Besondere Vorsicht ist bei HTML-Editoren mit einem Farbwähler-tool geboten. BBEdit z.B. setzt Farbwerte immer mit Anführungszeichen ein. Anlass zu einer langwierigen Fehlersuche und viel Ärger über Browser, die plötzlich sehr seltsame Farben oder garnichts darstellen.
Auch dieser Fehler wird von älteren Internet Explorer Versionen ignoriert.

Anmerkung: Es gibt auch Fälle, in denen Anführungszeichen in einer STYLE-Definition verwendet werden sollten: Wenn der Wert Leerzeichen enthält.
Hier ist '"times new roman"' ein Wert für die Eigenschaft 'font-family' in der Deklaration für den Selektor H1:

H1 {font-family: Times, "Times New Roman", serif}

Über die Gross- und Kleinschreibung von Schriftenfamilien-Namen bin ich mir nicht ganz sicher. Betriebssystembedingt spielt sie unter MacOS und Windows keine Rolle.
Die "generic-family"-Namen ( serif, sans-serif, cursive, fantasy, monospace) sollten immer klein geschrieben werden.

Weitere typische Fehler erklärt Björn Höhrmann auf www.bjoernsworld.de


www.subotnik.net --> Style--> CSS-Fehler | private Homepage | e-mail