CSS/Anwendung und Praxis/mögliche Fehlerquellen bei CSS

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die wahrscheinlichste Ursache dafür sind Syntaxfehler bei den CSS-Formatdefinitionen. Wer HTML gewohnt ist, bei dem schleichen sich leicht Flüchtigkeitsfehler ein.

Inhaltsverzeichnis

[Bearbeiten] typische Fehler

[Bearbeiten] Gleichheitszeichen bei Wertzuweisungen

Ein beliebter Fehler ist beispielsweise, bei der Wertzuweisung an eine CSS-Eigenschaft anstelle des Doppelpunktes ein Gleichheitszeichen zu notieren.

Beispiel: Wertzuweisung mit Gleichheitszeichen
body { color:black;} h1 { color=red; } h2 { color:red; }
h2 wird rot dargestellt, wegen des Gleichheitszeichen wird der Wert für h1 ignoriert und h1 schwarz dargestellt.

[Bearbeiten] Auch vergessene Strichpunkte ( ; ) führen zu Fehlinterpretationen.

Beispiel: Wertzuweisung nicht geschlossen.
body { color:black; background-color:white;} h1 { color:red background-color:yellow; } h2 { color:red; background-color:yellow; }
Da die 1. Wertzuweisung für h1 nicht geschlossen worden ist, ignoriert der Browser beide Wertzuweisungen.

[Bearbeiten] Regelsatz mit zwei geschweiften Klammern geschlossen

Beispiel: Regelblock doppelt geschlossen.
body { color: black; background-color: white; } h1 { color: red; background-color: yellow; }} h2 { color: red; background-color: yellow; }
Die überzählige schließende Klammer wird schon dem Selektor für den nächsten Regelblock zugeordnet. Nun ist } h2 aber kein gültiger Selektor, also wird der gesamte Block ignoriert.

Da die Browser bei Syntaxfehlern in CSS keine Fehlermeldungen erzeugen, bleiben solche Fehler häufig unentdeckt und machen sich nur in Form von Fehlinterpretationen bemerkbar. Überprüfen Sie deshalb stets genau die Syntax Ihrer CSS-Formatdefinitionen.

[Bearbeiten] Groß- und Kleinschreibung bei Selektoren

CSS berücksichtigt die Groß- und Kleinschreibung bei Selektoren wie Klassennamen und IDs nicht, allerdings gilt dies nicht für HTML-Markup. Während es im Quirks Mode noch funktioniert, werden Klassen durch das Hinzufügen eines Doctype nicht mehr erkannt.

Beispiel: Regelblock doppelt geschlossen.
#navigation {
width: 1094px;
position:fixed;
z-index: 10;
}
<body><div id="all">
<div id="Navigation">
   ...
</div>
</body>
}
Das id-Attribut ="Navigation" wird vom Browser nicht mit dem CSS-Selektor #navigation formatiert.
Empfehlung: Verwenden Sie für HTML-Markup wie Tags und Attribute, sowie für CSS-Selektoren (und auch referenzierten Ordner- und Mediennamen) immer eine konsequente Kleinschreibung. So beugen Sie potentiellen Fehlern vor.

[Bearbeiten] CSS-Validatoren

Sie können Ihre CSS-Formatdefinitionen auch online auf korrekte Syntax überprüfen lassen.

Beispiele für solche online-Validatoren sind:


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML