Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Grundlegendes

CSS-Validation

Die Validation der eigenen Website wird mehr und mehr zur üblichen Qualitätsprüfung. Aber eine validierte Seite ohne qualitativen Inhalt ist eine hübsche, leere Hülle, die trotz allem leer ist.

W3C

Seitdem die modernen Browser in der Lage sind, CSS und DOCTYPE- Switching zu unterstützen, diskutieren Webworker über den Nutzen der Validation von HTML und CSS. Dieser Artikel fasst die wichtigsten Argumente zusammen, gibt Hinweise zur Benutzung des W3C-Online-Validators und erläutert die häufigsten Fehlermeldungen.

Was ist Validation?

Bei der Validation eines Webdokuments werden die Inhalte des Dokuments durch ein Validatorprogramm mit den vom W3C veröffentlichten Webstandards verglichen. Überall dort, wo das Webdokument nicht mit den aktuellen W3C-Standards übereinstimmt, gibt der Validator Fehlermeldungen oder Warnungen aus.

So sollte es jedenfalls sein. In der Praxis gibt es einen kleinen Trick, mit dem sich auch solche Webdokumente problemlos validieren lassen, die nicht dem gültigen Standard entsprechen. Tatsächlich vergleicht der Validator nämlich mit der Dokumentation des Standards, die in der DOCTYPE-Deklaration des Dokuments angegeben ist. Rein technisch muss dies nicht unbedingt die Standards- Dokumentation des W3C sein, die Verwendung einer veränderten und lokal abgespeicherten Version ist ebenfalls möglich. Das folgende Beispiel weist auf so eine angepasste Dokumentation hin.

<!DOCTYPE html PUBLIC "-//thestyleworks.de//DTD XHTML 1.0 Custom//EN" "/dtd/xhtml1-custom.dtd">

Vor dieser Praxis muss aus mehreren Gründen ausdrücklich gewarnt werden!

Die eingeführten Veränderungen lassen sich zu einem späteren Zeitpunkt nicht mehr oder nur schwer nachvollziehen.
Die Verwendung von Standards wird ad absurdum geführt.
Dem Kunden wird eine Validation vorgespiegelt, die nicht wirklich vorhanden ist. Sollte 'Validation' im Pflichtenheft stehen, könnte dies auch rechtliche Folgen haben.

Im Netz findet sich eine Reihe von Validatoren, die teils gratis und teils kostenpflichtig, für Online-Betrieb geeignet oder herunterladbar sind. Auch einige CSS-Editoren erlauben es, das erstellte Stylesheet intern zu validieren. Die meistbenutzten und genauesten sind die vom W3C gratis zur Verfügung gestellten Validatoren für HTML und für CSS.

Warum validieren (oder warum nicht?)

a. Unterschiedliche Browser, unterschiedliche Plattformen

Validation ist ein Hilfsmittel, um zu erreichen, dass eine Website in möglichst vielen verschiedenen Browsern funktioniert, d. h. richtig dargestellt wird. Eine fehlerfreie Validation bedeutet aber noch nicht, dass eine Website in allen Browsern richtig arbeitet. Kein Browser unterstützt bis heute sämtliche CSS-Eigenschaften und Selektoren vollständig und korrekt. Das heißt, dass es Teile der Spezifikation gibt, die zwar korrekt validieren, aber nur von einigen oder gar keinen Browsern dargestellt werden können. Andererseits gibt es proprietäre Eigenheiten der Browser, die (heute) keinesfalls validieren würden. Auch wenn unser Webdokument fehlerfrei validiert, müssen wir es dennoch in verschiedenen Browsern testen.

Etwas ähnliches gilt für unterschiedliche Plattformen. Es kommen immer mehr und bessere webfähige Mobilgeräte auf den Markt. Deren Darstellungsmöglichkeiten sind, verglichen mit PC-Bildschirmen, heute noch relativ eingeschränkt und umfassen den Inhalt der Spezifikation CSS Mobile nur teilweise. Deutlicher als bei den PC-basierten Browsern lässt sich hier aber der Trend ausmachen, dass neue Software sich immer mehr an den vorhandenen Webstandards orientiert.

In der Regel beurteilen Surfer eine Website nicht danach, ob der Quelltext den Regeln entspricht, sondern danach, ob die Dinge, die sie sehen, alle funktionieren und ob sie ansprechend und einfach zu bedienen sind. Dieses Ziel haben wir als Webschaffende in der Vergangenheit dadurch erreicht, dass wir unsere Websites entweder für den einen oder den anderen Browser optimiert oder im schlimmsten Fall unterschiedliche Versionen für die beiden Mainstream-Browser erstellt haben.

Heute sind alle modernen Browser weitgehend standardstreu, mit nur noch wenigen Eigentümlichkeiten. Die Browserweiche ist endgültig passé. Künftige Versionen des CSS-Standards werden noch ausführlicher sein und die Browsersoftware der Zukunft wird sich noch genauer daran orientieren. Durch Validation erreichen wir, dass unsere Websites den Standards entsprechen und dadurch kompatibel mit zukünftigen Entwicklungen sind.

b. Suchmaschinen und Webverzeichnisse

Moderne Browser sind im Allgemeinen hochentwickelte Programme, die sehr kompromissbereit reagieren, wenn in einer Webpage Fehler auftreten. Nur in seltenen Fällen werden sie die fehlerhaften Teile einer Seite ganz übergehen. Meistens werden sie anhand einer vorprogrammierten Routine Annahmen über das höchstwahrscheinlich Richtige treffen.

Ganz anders Suchmaschinen — sie stehen am anderen Ende der Skala und sind technisch in etwa mit Version-2-Browsern vergleichbar: ein kleiner Fehler kann bereits das Ranking in den Top 10 kosten, im schlimmsten Fall wird die Seite überhaupt nicht gelistet. Hier einige Beispiele:

Metatags und title-Elemente werden von den Suchmaschinen nur innerhalb des Elements head gesucht. Stehen sie versehentlich an anderer Stelle im Webdokument, werden sie schlicht nicht gefunden.
Auch falsch geschriebene Elemente, zum Beispiel mtea oder titel, werden von den Spidern übergangen.
Fehlt eine einzige der dreieckigen Klammern im Starttag eines Elements, kann die Suchmaschine das Element und seinen Inhalt komplett übergehen. Im folgenden Fall sucht die Suchmaschine das Ende des Starttags, bis sie den Beginn des Endtags erreicht hat, und übergeht dabei den Inhalt.
<p class="abc" Falsch geschriebene Elemente werden
von den Spidern übergangen.</p>
Dieselben Folgen kann ein fehlerhaftes style-Attribut haben.

So kann es leicht passieren, dass die Suchmaschine gerade die Teile eines Webdokuments nicht spidert, die wichtige Keywords enthalten.

c. Fehlersuche

Auch Fehlersuche ist im Grunde genommen Validation, oder umgekehrt: Validation ist Fehlersuche. Wir können davon ausgehen, dass CSS- und HTML-Validatoren mit zu den besten heute verfügbaren Fehlersuchprogrammen zählen. Sie prüfen nicht nur auf syntaktische, sondern auch auf logische Fehler. Selbstverständlich kann jetzt argumentiert werden, dass derartige Fehler nicht auftreten, wenn man Programme wie Dreamweaver oder GoLife verwendet. Andererseits kann man von einem Webdesigner verlangen, dass er sich nicht einfach nur auf solche Programme verlässt, sondern HTML und CSS lesen und schreiben kann und wirklich weiß, was er tut.

Wie dem auch sei, es ist vermessen, besonders im hektischen Alltag eines professionellen Webschaffenden, Fehler von vornherein auszuschließen. Letztlich muss aber jeder selbst abwägen, ob er oder sie sich die Zeit nimmt, alle Dokumente des aktuellen Projekts zu validieren.

Welche Möglichkeiten gibt es?

Der CSS-Validator des W3C ist ein vielseitiges Online-Tool, das auch herunterladbar ist und sich lokal ebenso wie in andere Websites online installieren lässt. Darüber hinaus ist es fest integrierter Bestandteil einiger CSS-Editoren wie z. B. Top-Style. Seine Online-Version bietet mit drei Formularen (auf einer Seite) vier verschiedene Möglichkeiten zur Validation von CSS-Regelungen.

Formular 1: CSS-Datei(en) innerhalb einer (x)HTML-Datei

Validation über die URI einer HTML-Datei ist die schnellste Methode der CSS-Validation. Nach Eingabe der Webadresse einer HTML-Datei werden alle dort eingebundenen Stylesheets geprüft, egal ob sie eingebettet, importiert oder verlinkt sind.

Die Voraussetzung dafür, dass unsere CSS-Regeln den gewünschten Effekt haben, ist fehlerfreier HTML- Code. Dazu gehört zunächst ein korrekt strukturierter Dokumentstammbaum. Aber auch andere Fehler im HTML können zur Folge haben, dass unsere Stylesheets sich nicht so auswirken, wie wir es erwarten. Deshalb sollten wir uns zur Gewohnheit machen, vor der Validation unserer Stylesheets immer zuerst das HTML zu validieren.

Unter Umständen können hier irreführende Fehlermeldungen auftreten, z. B. wenn die eingebundenen Stylesheets für unterschiedliche Medien relevant sind. Ist man sich bezüglich der generierten Fehlermeldung nicht ganz sicher oder kann man den ausgegebenen Fehler nicht finden, sollte man das angegebene Stylesheet einzeln validieren.

Formular 1: Validation einer Online-CSS-Datei

Mit demselben Formular ist auch die Validation einzelner CSS-Dateien möglich. Dies empfielt sich, wenn durch die oben genannte Methode zu viele Fehlermeldungen generiert werden. Dann hilft es, die Stylesheets Stück für Stück zu validieren. Man hat dadurch auch die Gewissheit, dass die Fehler nur auf dem Inhalt einer Datei basieren können.

Es gibt aber auch Situationen, in denen die Beseitigung von Fehlern im Quelltext aus verschiedenen Gründen gerade nicht möglich ist. In dem Fall will man sich nicht mit den dadurch verursachten Fehlermeldungen aufhalten und validiert die Stylesheets separat.

Über den Link More Options lassen sich weitere Optionen zur Fehlerausgabe, zum verwendeten CSS-Profil und zum verwendeten Medium auswählen.

Formular 2: Hochladen einer lokalen CSS-Datei

Eine lokale Datei hochzuladen, bietet den einfachsten Weg einer Validation, solange eine Website noch in Bearbeitung ist. Man lokalisiert die Datei auf der eigenen Festplatte mit "Browse", klickt auf "Check" und erhält sämtliche Meldungen ausgegeben.

Wie schon bei der Validation einer Online-Datei, kann man auch hier über den Link More Options weitere Optionen auswählen.

Formular 3: Direkteingabe einzelner CSS-Regeln

Diese letzte Möglichkeit ist am besten geeignet für die schnelle Validation einzelner Regeln. Regeln z. B., die, ergänzt in einem Stylesheet, nicht die erwartete Änderung bringen. Bevor man die gesamte CSS-Datei nach Regeln mit größerer Spezifizität durchsucht, ist es einfacher, kurz zu prüfen, ob sich nicht doch ein kleiner Fehler eingeschlichen hat.

Dieses Formular arbeitet wie Formular 1 nach der get-Methode und der Inhalt des Textfeldes wird zur Übertragung an die URL angehängt. Das bedeutet, dass man hier nicht beliebig große Dateien hineinkopieren kann. Überschreitet man die maximal mögliche Anzahl der Zeichen, wird der Rest einfach abgeschnitten.

Tipp:

Oft gibt der Validator für denselben Fehler mehrere Meldungen aus. Auch können einzelne Fehler noch Folgefehler verursachen, die dann weiter unten in der Liste erscheinen. Deshalb sollte man bei Fehlermeldungen, die nicht ganz am Anfang der Liste stehen, nicht viel Zeit mit Suchen verwenden. Es ist zeitsparender, ein paar Mal öfter zu validieren.

Wie oft ist Validation nötig?

Ganz kurze Antwort: nicht oft. Sobald ein Webdokument hochgeladen ist und nicht mehr geändert wird, sind weitere Validationen nicht mehr nötig. Idealerweise sollte man nach jeder Änderung eine neue Validation durchführen, in der Praxis wird das aber nicht immer ganz so genau genommen.

Was bedeuten die Fehlermeldungen?

Die Fehlermeldungen des CSS-Validators sind zum größten Teil selbsterklärend, mit ein wenig Erfahrung wird man die Fehler im Stylesheet schnell lokalisieren können. Hier folgt eine (unvollständige) Liste der häufigsten auftretenden CSS-Fehler:

Fehlende geschweifte Klammern: Der Deklarationsblock jeder Regel muss mit einem Paar geschweifter Klammern eingeschlossen werden.
Fehlendes oder falsch plaziertes Semikolon: Hinter allen Deklarationen einer Regel mit Ausnahme der letzten muss ein Semikolon stehen. An anderen Stellen dürfen Semikolons nicht auftreten.
Fehlender oder falsch plazierter Doppelpunkt: Ein Doppelpunkt darf nur zur Trennung von Eigenschaft und Wert einer Deklaration und als Teil von Pseudoklassen/-elementen verwendet werden.
Fehlende Angaben der Einheit: Alle numerischen Angaben unterschiedlich von '0' müssen mit Angaben zur Einheit versehen sein.
Farben: Alle Hexadezimalangaben müssen entweder sechs- oder dreistellig sein, mit vorangestelltem #.
Falsche Pfadangaben: Einige Eigenschaften, z. B. background-image, verlangen die Angabe einer Quelldatei. Ist die Pfadangabe 100%ig korrekt? Stehen die runden Klammern an den richtigen Stellen? Wird die Angabe url (nicht uri) verwendet?
Buchstabierung: für einige Werte ist die amerikanische Schreibweise vorgeschrieben, z. B. center, nicht centre.

Für die schwieriger zu verstehenden Validatormeldungen hat das W3C eine FAQ eingerichtet. Hier folgt die Übertragung ins Deutsche:

W3C CSS Validator-FAQ

Was bedeutet die Meldung:
`org.xml.sax.SAXException: Please, fix your system identifier (URI) in the DOCTYPE rule` ?

Das heißt, dass Ihr Webdokument zwar einen Dokumententyp aufweist, dessen System-Identifizierer aber auf eine andere URI als die des W3C deutet. Sie sieht möglicherweise so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

Wenn Ihr Webdokument z. B. unter 'http://www.thestyleworks.de/' abgelegt ist, dann zeigt dieser relative System- Identifizierer auf 'http://www.thestyleworks.de/DTD/xhtml1-strict.dtd'. Die DTD ist dort aber höchstwahrscheinlich nicht verfügbar. Sie müssen den System-Identifizierer des Dokumententyps daher durch einen gültigen Wert ersetzen. Betrachten Sie dazu diese drei Beispiele für XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Anmerkung d. Ü.:
Mehr über Dokumententypen finden Sie im Artikel Der Dokumententyp
auf dieser Website.

Was bedeutet die Meldung:
`I/O Error: Unknown mime type: type/subtype` ?

CSS-Dateien müssen nach RFC 2318 mit dem Mime-Typ "text/css" markiert werden. Der Server muss so konfiguriert sein, dass er diesen Mime-Typ im Teil 'Content-Type' des HTTP-Headers sendet. Wenn Sie nicht wissen, wie Sie Ihren Server entsprechend konfigurieren, lesen Sie die Packungsbeilage oder fragen Sie Ihren Arzt oder Apotheker lesen Sie im Manual Ihres Webservers nach, wenden sich an Ihren SysAdmin oder bitten Sie das Support-Personal Ihres Webhosters, das für Sie zu erledigen.

Was bedeutet die Meldung:
`An invalid XML character (Unicode: 0x????) was found in the element content of the document` ?

Entweder Ihr Webdokument enthält ein oder mehrere Zeichen, die nach Sektion 2.2 der Spezifikation XML 1.0 nicht erlaubt sind, oder Ihr Dokument ist nicht richtig codiert. Die voreingestellte Zeichenkodierung für XML-Dokumente ist UTF-8 oder UTF-16. Wenn Ihr Dokument unerlaubte Zeichen enthält, müssen diese Zeichen entfernt werden. Wenn Sie eine andere Codierung als UTF-8 oder UTF-16 verwenden, müssen Sie diese deklarieren, in der Regel mit einer XML-Deklaration. Für Dokumente, die z.B. nach ISO-8859-1 codiert sind, sieht das so aus:

<?xml version="1.0" encoding="ISO-8859-1"?>

Sie können die Codierung aber auch durch ein Meta-Element im Kopfteil des Webdokuments codieren:

Was bedeutet die Meldung: `I/O Error: Not Acceptable` ?

Der Webserver am anderen Ende hat einen Fehlercode zurückgesandt, wahrscheinlich '406' (= nicht akzeptabel). Dies bedeutet, dass die angeforderte Resource aufgrund ihres Accept-Headers oder Accept-Language-Headers nicht für den CSS-Validator akzeptabel ist. Wenn der Validator beispielsweise das Dokument 'http://www.example.org/style' anfordert, dann sieht die HTTP-Anfrage so (oder ähnlich) aus:

GET /style HTTP/1.1 Cache-Control: no-cache Connection: keep-alive Date: Mon, 07 Jul 2003 21:22:44 GMT Pragma: no-cache Accept: text/css,text/html,text/xml,application/xhtml+xml, application/xml,image/svg+xml,*/*;q=0 Accept-Language: de,en Host: www.example.org User-Agent: Jigsaw/2.2.0 W3C_CSS_Validator_JFouffa/2.0

Der Wert des Headers Accept-Language wird dabei von der Anfrage Ihres Browsers kopiert. Ist er 'de,en', bedeutet das, dass Sie Ihren Browser so konfiguriert haben, dass er Inhalte in deutscher oder englischer Sprache akzeptiert. Wenn die angeforderte Resource nun in Japanisch und Französisch, nicht aber in Deutsch oder Englisch zur Verfügung steht, führt das zur Ausgabe des Not-Acceptable-Fehlers. Dies gilt ebenso für den Accept-Header.

Wenn die Webresource, die Sie validieren möchten, durch eine Scriptsprache wie PHP generiert ist, dann bedeutet dieser Fehler, dass Ihr Webserver möglicherweise misskonfiguriert ist. Wenn es ein Apache-Server ist, werden SIe höchstwahrscheinlich in einer der Konfigurationsdateien eine Zeile wie diese finden:

AddType application/x-httpd-php .php

Sie sollten stattdessen die 'Addhandler'-Direktive verwenden. Falls Sie nicht wissen, wie Sie die Konfiguration ändern, wenden Sie sich an Ihren Webmaster oder an Ihren Webhoster.

Warum gibt der Validator aus:
`You have no background-color with your color` ?

Wenn Sie für ein Element nicht Vordergrund- und Hintergrundfarbe mit derselben Spezifizität deklarieren, dann kann es zwischen Ihrem Stylesheet und dem User-Stylesheet zu Problemen kommen. Um das zu vermeiden, spezifizieren Sie immer beide Eigenschaften, bitte beachten Sie dazu auch den Abschnitt Color Contrast der CSS Techniques for Web Content Accessibility Guidelines 1.0 oder den Artikel Betrachtungen über Farben der CSS Pointers Group

Warum validieren meine Deklarationen für Scrollbalken, Filter usw. nicht?

Der CSS-Validator vergleicht Ihr Stylesheet mit einem gegebenen Profil, wie CSS 1 oder CSS 2. Einige Browserfirmen haben aber zusätzliche Eigenschaften eingeführt, die in diesen Profilen nicht enthalten sind. So hat z. B. Microsoft seine scrollbar-base-color oder seine Filter und Mozilla sein -moz-opacity. Der Validator kennt diese Eigenschaften nicht, deshalb ist Ihr Stylesheet in Bezug auf die CSS-Spezifikationen nicht mehr valide. Entweder Sie entfernen alle diese Eigenschaften aus Ihrem Stylesheet oder Sie finden sich damit ab, dass Ihr Stylesheet nicht validiert. Sie können nicht beides haben.

Warum heißt es URI und nicht URL ?

Die Abkürzung URI steht für 'Uniform Resource Identifier', URL steht für 'Uniform Resource Locator'. URLs sind eine Untergruppe der URIs. Für mehr Informationen lesen Sie bitte die W3C-Artikel Naming and Addressing: URIs, URLs, ... und URIs, URLs, and URNs.

Wo kann ich den Validator herunterladen?

Die herunterladbaren Quellen für lokale Installation finden sich hier: http://www.w3.org/2001/05/05-19-cssvalidator.zip. Philippe Le Hagaret, der die Quellen für den Download zusammenstellte, schreibt dazu:

«Wenn Sie nicht selbst kompilieren wollen, laden Sie es nicht herunter. Makefile sind nicht mehr empfohlen, es gibt kein Konfigurationsscript oder andere hilfreiche Dinge. Mit Javac oder Java muss es gehen. Für die Kompilierung brauchen Sie Sax und Xerces. Einige dieser Quellen sind vier Jahre alt und wurden ebenfalls zu Testzwecken gebraucht (XML/CSS-Format, SVG, ATSC, CSS3, usw.)»

Wo finde ich das Logo für valides CSS?

In diesem Verzeichnis, die CSS-Icons sind dort als GIF-Image und als PNG-Image vorhanden. Mehr Logos und Hinweise zu deren Benutzung erhalten Sie unter W3C Logo and Icon Usage.

Falls dennoch Unklarheiten bleiben:

Sollten Sie alle Fragen und Antworten durchgegangen sein und haben die Antwort zu den letzten Fehlern in Ihrem Stylesheet noch nicht gefunden, dann können Sie sich mit Ihren Fragen auch an eine der auf der Validator-Feedback-Seite genannten Mailing-Lists wenden. Um dort aktiv zu posten, müssen Sie sich anmelden, die Archive sind aber öffentlich zugänglich.
TOP

Notizen: