Typische Fehler bei der Erstellung von Style Sheets
Dieser Artikel listet häufige Fehler beim Erstellen von Style Sheets auf und gibt Verbesserungsvorschläge. Ich habe bewußt darauf verzichtet, Beispiele für die Fehler zu geben, um zu verhindern, daß sie gemacht werden. Die meißten dieser Fehler finden CSS Checker wie der W3C CSS Validaton Service und Web Design Group's CSS Checker.
-
Falsche Reihenfolge der Anker-Pseudo-Klassen
Damit sich die Regeln für die einzelnen Pseudo-Klassen nicht falsch überlagern, sollten sie in dieser Reihenfolge deklariert werden (siehe CSS2: 'The dynamic pseudo-classes[...]'):
A:link { color: red } /* noch nicht besuchter Link */ A:visited { color: blue } /* schon besuchter Link */ A:hover { color: yellow } /* Benutzer 'hovert' */ A:active { color: lime } /* Link wird ausgewählt */ -
Mehrmaliges Benutzen der gleichen ID
In HTML 4.0 müssen IDs eindeutig sein; sie können also immer nur einmal vergeben werden (siehe HTML 4.0: SGML basic types).
Wenn man die gleichen Regeln für mehrere Einzelelemente benutzen möchte, kann man das Attribut CLASS als Selektor benutzen.
-
Selektoren mit Zahlen (am Anfang) oder 'Sonderzeichen'
Die Attribute CLASS und ID (bzw. die darauf basierenden Selektoren) dürfen nur mit einem Buchstaben (
[A-Za-z]) oder Zeichen nach ISO 10646 beginnen, nicht aber z.B. mit Zahlen oder dem Bindestrich. Desweiteren gilt:"In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F"." (vgl. CSS2: syntax and basic data types)
Desweiteren sind die Selektoren abhängig von der Groß- und Kleinschreibung (nicht in CSS aber in HTML 4.0). Mehr Informationen dazu.
-
CSS Positionierung in Verbindung mit Scriptsprachen
Bei einigen Menü-Scripts kann es erforderlich sein, daß man mit Hilfe von CSS Positionierung Elemente so plaziert, daß sie sich überlagern. Wenn der Browser JavaScript unterstützt und es auch aktiviert ist, kann man dieses Menü 'aufklappen' und auf weitere Elemente zugreifen. Ist JavaScript deaktiviert, überlagern sich die Elemente einfach nur und sind unzugänglich. Um das zu verhindern, sollte man das StyleSheet mit den Positionierungsangaben nur dann hinzufügen, wenn JavaScript auch aktiviert ist. Dies kann z.B. so aussehen:
<HEAD> <TITLE>Beispiel</TITLE> <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><-- document.write('<LINK REL="StyleSheet" HREF="positionierung.css">'); // --></SCRIPT> </HEAD> -
Auslassen von generischen Schriftfamilien
Autoren von Style Sheets sollten immer eine der generischen Schriftfamilien (serif, sans-serif, monospace, fantasy und cursive) als letzte Alternative angeben um dem Browser bessere Wahlmöglichkeiten für Schriftarten zu lassen, wenn die anderen Schriftarten nicht auf dem System zu finden sind (siehe CSS2: the 'font-family' property).
Ein Beispiel:
H1 { font-family: Arial, Helvetica, Geneva, sans-serif } -
Anführungszeichen in CSS
Während man in HTML um hexadezimale Farbangaben Anführungszeichen (
") setzen muß, darf man es in CSS nicht. Richtig muß es immer so heißen:H1 { color: #FFFFFF }Bei Schriftarten die Leerzeichen im Namen tragen, sollte man immer Anfürungszeichen setzen:
H1 { font-family: "Trebuchet MS", "Myriad Web", Geneva, Arial, sans-serif } -
Benutzen von MarkUp in externen Style Sheets
In externen Style Sheets hat jede Form von MarkUp (wie z.B.
<STYLE TYPE="text/css">) absolut nichts verloren. Werte ohne Einheiten
Weitere typische Fehler listet Michael Nahrath auf.