Valides CSS
Valides CSS (Cascading Style Sheet) ist eine Grundvoraussetzung für ein korrekt angezeigtes Webseitenlayout, ein Ziel jedes Webdesigners. So ist es notwendig zu wissen, was man in CSS machen kann und was nicht und wie Browser bestimmte Code-Teile verarbeiten.
Für Grundlegendes über die Verwendung von CSS, siehe letztes Kapitel.
Häufige Fehlerquellen im CSS-Code
Es gibt viele Fehler, welche man beim Schreiben eines CSS-Scripts machen kann.
Manche "Missetaten" könnte man aus reiner Gewohnheit heraus begangen haben, wie die Verwendung von "//" (Doppelslash) zum Auskommentieren einer Zeile. In CSS gibt es aber keine einzeiligen Kommentare wie im Gegensatz zu JavaScript oder anderen Programmiersprachen. Daher ist die Verwendung von Doppelslashs falsch. Allerdings ist zu beachten: Der Internet Explorer interpretiert die dahinter stehende Angabe, andere Browser wie Firefox oder Chrome stempeln die Angabe als ungültig ab und ignorieren sie somit, was zur falschen Annahme führen kann, dass das Auskommentieren mittels Doppelslash tatsächlich funktioniert. Siehe auch Abschnitt Verarbeitung von fehlerhaftem CSS.
Annähernd die häufigsten Fehlerquellen sind Browserweichen, sogenannte CSS-Hacks. Denn diese basieren auf die Interpretationsfähigkeiten der Browser, will heissen dass der Programmierer bzw. Webdesigner die unterschiedliche Interpretation des CSS-Codes ausnutzt, wobei dieser Code dann eben meist kleine Fehler enthält. Für valide CSS-Hacks siehe weiter unten.
Andere Fehlerquellen sind meist nicht beabsichtigte Syntaxfehler wie beispielsweise ein vergessenes ";" (Strichpunkt) nach einer Deklaration oder Rechtschreibfehler wie "20x" statt "20px".
Weitere Fehler stellen die browsereigenen CSS-Eigenschaften dar wie zum Beispiel "-moz-.." von Mozilla Firefox oder "filter" vom Internet Explorer.
Ähnliches gilt auch für noch nicht standardisierte Eigenschaften, was unteranderem CSS 3 betrifft. Eigenschaften wie "opacity" sind weit verbreitet, aber nach den Standards des CSS 2.1 nicht existent, also nicht valide.
Verarbeitung von fehlerhaftem CSS
Laut Definition von CSS sollte bei einer unbekannten oder fehlerhaften Eigenschaft oder Wert die ganze Deklaration ignoriert werden. Allerdings gibt es Browser, welche bestimmte Fehler, meist Syntaxfehler, eigenwillig interpretieren. Zum Beispiel verarbeitet der Internet Explorer Angaben nach einem Doppelslash als ob nichts wäre. Andere Browser sehen hier aber einen Fehler und überspringen die Angabe.
Diese Regel kann man sich bei der Fehlersuche zu Nutze machen, denn wenn beispielweise ein Aussenabstand (margin) nicht wie gewollt angezeigt wird, kann man daraus schliessen, dass man höchstwahrscheinlich einen Tippfehler gemacht hat, man kann also das Augenmerk auf Tippfehler richten.
Folgende beiden Deklarationen sind technisch gesehen "identisch":
margin: 20px 40x;
margin: auto;Das vergessene "p" bei "40x" sorgt dafür, dass die ganze Angabe für "margin" ungültig ist. Also wird dem "margin" keinen Wert zugewiesen, was im Grunde "auto" entspricht.
Valide CSS-Hacks
Trotz der ganzen Geschichte gibt es immer noch Hacks, welche technisch gesehen korrekt sind.
Folgender CSS-Hack dient dazu, nur den Internet Explorer anzusprechen:
* + html { }Ein Anwendungsbeispiel:
div.inhalt { /* für alle Browser */
padding: 1px;
}
* + html div.inhalt { /* nur für IE */
padding: 5px;
}
Alle Browser weisen zuerst dem oben bezeichneten Div-Container einen Innenabstand ("padding") von einem Pixel zu. Da der IE nun aber auch den zweiten Block auswertet, überschreibt er den bisherigen Wert für "padding", er zeigt also fünf statt einem Pixel an.
Wer keine CSS-Hacks anwenden will, kann sich auch mit Conditional Comments beschäftigen, um den Internet Explorer von anderen Browsern zu differenzieren.
Grundwissen
Der Aufbau einer CSS-Definition sieht wie folgt aus:
Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B;
/* Kommentar */
}
Der Selektor wählt bestimmte Elemente aus, zum Beispiel ein HTML-Element wie "span", das heisst alle Angaben innerhalb des nachfolgenden Blocks zwischen "{" und "}" gelten nur für die ausgewählten (selektierten) Elemente.
Einbinden kann man den CSS-Code mit dem style-Tag direkt in ein HTML-Dokument:
<style type="text/css">
/* hier kommt CSS */
</style>
Oder man bindet eine externe CSS-Datei mittels link-Tag ein:
<link rel="stylesheet" type="text/css" href="datei.css" />
Allgemeines Beispiel
Der CSS-Text:
span.wichtig {
color: red;
font-weight: bold;
}Und der HTML-Code:
<span class="wichtig">Das ist wichtig!</span>
Diese CSS-Angaben formatieren nur den Text, welcher innerhalb eines span-Tags der Klasse "wichtig" steht. In diesem Falle wird der Text in fetter, roter Schrift dargestellt