Skip to content

Spezialfälle: akzeptabler Verzicht auf valides CSS ::: was sagt der Validator?

Normalerweise bin ich ja der Meinung, dass Webstandards eingehalten werden sollen. Damit verbunden sind normalerweise auch Seiten, deren CSS valide ist. Ab und zu eine Ausnahme, ist für mich in einigen Situationen akzeptabel. In meiner Session beim Blogcamp in Zürich kam von einigen der Hinweis, dass die Meldungen des Validators teils unverständlich seien. Deshalb werde ich versuchen, ab sofort diese Meldungen mit zu erklären, wenn ich grad dabei bin.

-moz-border-radius

Wenn es um besondere Eigenschaften geht, die gerade noch nicht dem aktuellen Standard entsprechen, z.B:

  • -moz-border-radius: 5px;

statt der in CSS 3 kommenden Eigenschaft

  • border-radius: 5px;

führt zwangsläufig dazu, dass der Validator meldet: Diese Eigenschaft existiert nicht.
In diesem Fall ist das jedoch kein Problem, denn interpretiert wird die Eigenschaft nur von Mozilla-Browsern, die sie verstehen, alle anderen ignorieren die Definition.

Zuweilen nutze ich solche Spielereien daher ganz gern. Allerdings kann das natürlich zu Problemen führen, wie z.B. bei mir letztens mit radius und Firefox 3. Inzwischen habe ich nochmal ein bisschen damit experimentiert.

Bei relativ langen Seiten scheint Firefox 3 grundsätzlich dann Schwierigkeiten mit dieser Definition zu haben, wenn sie sich im ghref="http://miradlo.net/bloggt/index.php?148-s"">radius und Firefox 3. Inzwischen habe ich nochmal ein bisschen damit experimentiert.

Bei relativ langen Seiten scheint Firefox 3 grundsätzlich dann Schwierigkeiten mit dieser Definition zu haben, wenn sie sich im gleichen div-Container befindet, wie eine größere Menge Text und ein Hintergrundbild. Nach wie vor konnte ich dieses Problem im Firefox 2 zumindest nicht in diesem Ausmaß feststellen, dort kann es mal etwas langsamer werden, aber kein Vergleich… Im Seamonkey gibt’s gar keine Probleme, da ruckelt und wackelt gar nichts.

Transparenzeffekte

Jegliche Transparenzen werden ebenfalls angemahnt, z.B:

  • -moz-opacity:0.75

Alle Eigenschaften, die mit sowas wie -moz oder -webkit (für Safari) beginnen, stammen aus CSS 3 und werden irgendwann kommen, zur Zeit ist jedoch noch CSS 2 oder CSS 2.1 aktuell. Ebenso wird natürlich die proprietäre Eigenschaft der Internet Explorer als Einlesefehler gewertet:

  • filter:alpha(opacity=75);

Hacks für den Internet Explorer

Weitere Hacks für den Internet Explorer, wie z.B. die Eigenschaften, die mittels expression eingebunden werden, versteht der Validator ebenfalls nicht:

  • height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);

Hier meldet der Validator:

  • Ungültige Nummer: height Lexical error at line 149, column 81. Encountered: “?” (63), after : “” ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);
  • Ungültige Nummer: height Parse error - Unrecognized }

Die erste Meldung bezieht sich darauf, dass nach height ein Wert stehen sollte, z.B:

  • height:150px;

Die zweite Meldung ist ein typischer Folgefehler, da der Wert für die Eigenschaft fehlt, versteht der Validator nicht, warum jetzt bereits die Klammer für die Deklaration geschlossen wird.

Bei speziellen Definitionen für den IE, bevorzuge ich Extra-Stylesheets für den jeweiligen IE, die per Conditional Comment eingebunden werden. Damit liest nur der betroffene Browser diese Definitionen ein, alle anderen ignorieren den Kommentar.

Das Beispiel hier stammt aus dem CSS der thickbox, die z.B. vom WordPress-Plugin Ajax-Edit-Comments genutzt wird. Dort wird es nicht per CC eingebunden, was jedoch nicht so schlimm ist, da durch die Transparenzeigenschaften das CSS thickbox.css sowieso nicht valide ist.

Validatormeldungen verstehen

Was man sich beim Korrigieren von Fehlern immer angewöhnen sollte:

  • immer zuerst den obersten Fehler reparieren
  • zwischendurch erneut prüfen

Häufig verschwinden mehrere Fehler, sobald ein Fehler korrigiert ist. Den ersten Fehler zunächst korrigieren, ist sinnvoll, um nicht etwaige Folgefehler zu suchen, die vielleicht schon gar nicht mehr existieren.

Hm, zu verstehen, was welche Meldung bedeutet, ist wohl Übungssache. Für mich ist meist klar, was gerade nicht passt, Beispiele:

  • Diese Eigenschaft existiert nicht.
    • bedeutet genau das, so wie es im CSS steht, ist die Eigenschaft nicht zulässig, also z.B: -moz-border-radius
  • Einlese-Fehler opacity=75)
    • Der Validator hat etwas nicht verstanden, in diesem Fall die Eigenschaft filter:alpha( deshalb meldet er einen Einlesefehler, weil der Wert nicht interpretiert werden kann.
  • Ungültige Nummer: margin-top Lexical error at line 60, column 105 Encountered: “&” (38), after : “” & &document.documentElement.scrollTop | document.body.scrollTop) + ‘px’);
    • Lexical error bedeutet hier, dass ein Zeichen benutzt wurde, was da nicht hingehört, in diesem Fall ein “&”
  • Parse error - Unrecognized }
    • Der Validator kann die Klammer an dieser Stelle nicht korrekt analysieren, da sie hier nicht hingehört. Mögliche Fehlerquellen
      • vorher war eine Definition nicht ok
      • es fehlt ein Semikolon nach einer Definition
    • deshalb kommt die Klammer unerwartet.
  • Ungültige Nummer : display inline-block ist kein display-Wert : inline-block
    • Die Eigenschaft gibt es in der geprüften Version nicht, zur Zeit wird im Standardfall auf CSS 2 geprüft, die meisten Browser verstehen jedoch auch CSS 2.1. Dort existiert inline-block, deshalb kann man es zwar verwenden, muss jedoch auf CSS 2.1 prüfen, um ein korrektes Ergebnis zu bekommen.

Trackbacks

Keine Trackbacks

Kommentare

Dieter am :

Dieter Hallo Ute,
sehr schöne Erläuterungen. Man kann übrigens beim Validator unter weitere Optionen auch CSS3 einstellen. Dann werden zwar die CSS3-Eigenschaften mit vorgestelltem -moz-, -webkit- etc weiterhin als Fehler ausgewiesen, aber nicht CSS3-Eigenschaften in "Reinkultur" wie etwa border-radius.
Liebe Grüße
Dieter
PS: Spielst Du gerade an Deinem Theme?

ute am :

ute Hi Dieter,

ja, ich weiß, dass das einstellbar ist, der Default ist jedoch im Moment noch CSS2, für die meisten, die noch nicht so geübt sind, ist daher noch nicht klar, dass es da Unterschiede gibt.

Ich spielte nicht nur am Theme, sondern so ziemlich an allem, außer dir ist ja sonst um diese Zeit meist niemand da... ;-) Deshalb ist das eigentlich ideal, um dran rumzuschrauben...

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck