Check mit W3C CSS Validierungsdienst

[wigraf]

Und noch einmal ein Hallo an das Community,
zu meiner Website www.graffenberger.de habe ich eine Frage: Wie kann es sein, dass ein Check mit dem W3C CSS Validierungsdienst,
(Adresse: https://jigsaw.w3.org/css-validator/) so viele Fehler anzeigt obwohl die Seiten doch vernünftig dargestellt werden? css_validierung.PNG
Was kann ich am CSS ändern, damit diese Fehler verschwinden? Aus den Fehlermeldungen werde ich nicht schlau.
Für einen Hinweis wäre ich dankbar.
Mit freundlichen Grüßen
Wilhelm Graffenberger (wigraf)

[mlweb]

Ganz grundsätzlich ist häufig ein Fehler die Ursache für weitere Fehler (Folgefehler).
Dann sollte man unterscheiden zwischen Fehlern und Warnungen. Viele Warnungen beziehen sich auf Vendor-Prefixe.
Wenn man die Vendor.Prefixe bewusst eingesetzt hat um auch alte Browser zu unterstützen, kann man diese Meldungen vergessen.

Wie kann es sein, dass ein Check mit dem W3C CSS Validierungsdienst,
so viele Fehler anzeigt obwohl die Seiten doch vernünftig dargestellt werden?

Die Browser versuchen auch bei fehlerhaftem css das Beste draus zu machen.

Was kann ich am CSS ändern, damit diese Fehler verschwinden?

Man kann die Fehler/Warnungen einzeln durchgehen und schauen welche beseitigt werden sollten (z.B. ob alle Vendor-Prefixe benötigt werden).
Auf den ersten Blick werden etliche Meldungen durch das MediaElement.js ausgelöst. Da würde ich erst mal gar nichts machen, zumal die erste Fehlermeldung sich auf eine Eigenschaft bezieht, die derzeit noch von keinem Browser komplett unterstützt wird.

Nachtrag: Man kann auch testweise bestimmte Bereiche des css auskommentieren um die Ursache für Fehler zu finden bzw. in Deinem Fall das MediaElement.js ganz ausschalten um zu prüfen, ob der restliche Code standardkonform ist.

[wigraf]

Hallo mlweb,
danke für die Antwort auf meine Anfrage. Leider verstehe ich die Fehlermeldungen des CSS Checks meiner website nicht und deshalb kann ich da auch in meinen CSS Dateien nichts korrigieren.
Ich habe allmählich den Eindruck das contao sites nicht mit diesen Testprogrammen für CSS getestet werden können. Denn Testseiten von mir ohne contato z. B. diese: http://www.graffenberger.net/ bestehen den Test.
Nochmals Danke und Gruß Wigraf

[BugBuster]

Denn Testseiten von mir ohne contato z. B. diese: http://www.graffenberger.net/ bestehen den Test.

Logisch, denn dort werden keine Browser Prefixe verwendet um nur einen Grund zu nennen, jedenfalls habe ich stichprobenartig keine gefunden.

[mlweb]

Leider verstehe ich die Fehlermeldungen des CSS Checks meiner website nicht und deshalb kann ich da auch in meinen CSS Dateien nichts korrigieren.

Was genau verstehst Du den nicht? Im Prinzip muss man sich durch die Fehlermeldungen durchbeißen, wenn man es genau verstehen möchte. Manche Fehlermeldungen sind eindeutig, andere treten nur auf weil es Folgefehler sind.
Mit einigen Dingen kann der Validator einfach nicht umgehen. Eine Suche bei Google fördert so etwas zu Tage. So sind z.B. einige Eigenschaften nicht in den Validator implementiert. Meist handelt es sich dabei um neue noch nicht entgültig fertige Eigenschaften. Außerdem sind natürlich alle Vendor-Prefixe nicht standardkonform, dennoch werden diese ggf. benötigt.

Ich habe allmählich den Eindruck das contao sites nicht mit diesen Testprogrammen für CSS getestet werden können.

Doch können sie, man muss die Ergebnisse nur interpretieren. Der Test ist eine Hilfe kein Dogma.
Schalte doch bei Dir mediaElement.js mal ab, dann dürften sich die Fehler deutlich verringern.

[Andreas]

Nur mal am Beispiel box-sizing. Geh mal auf diese Seite http://caniuse.com/#feat=css3-boxsizing und klicke auf den weißen Button "show all". Jetzt siehst du, dass einige Browser dies zwar unterstützen, aber nur mit Vendor-Prefix. Eigenschaften mit Vendor-Prefix sind aber nicht Standard konform und deshalb siehst du in dem Validator die Warnungen.

Wenn du nur die Standard konformen Eigenschaften benutzen möchtest, müsstes du dein CSS komplett selber schreiben. Fertige Komponenten wie Contao oder MediaElement.js usw. versuchen immer auch ältere Browser zu unterstützen.

Eigentlich fehlt bei diesem CSS-Validator sone Option, dass er Vendor-Prefixe erlauben soll. Hier gibt es einen, wo man alles Möchliche ein und ausschalten kann http://csslint.net/ Leider ist die Bereitstellung und weitere Analyse des Ergebnisses für mich da aber nicht zufriedenstellend.

[wigraf]

Hallo mlweb, hallo Andreas,
mlweb Du hattest völlig recht, ein CSS Test ohne jQuery ergab nur noch 4 Fehler und die werden durch die runden Ecken verursacht.
Meine website habe ich jetzt einmal mit vier verschiedenen Browsern angeschaut und bei allen sehen die Seiten vernünftig aus. Dami will ich es jetzt auch genug sein lassen und keine weiteren CSS Test durchführen.
Zu Deinem Hinweis Andreas, auch dafür danke. Ich habe ja meine Seite nur so für mich gebaut um Contao etwas kennenzulernen. Ich will jetzt auf meine alten Tage nicht noch so tief einsteigen und das ganze CSS selber schreiben.
Mit freundlichen Grüßen, wigraf

[Andreas]

Ne, würde ich auch nicht machen. Ich selber benutze zwar eigenes CSS, aber bei den Komponenten wie Colorbox, Slider usw. benutze ich natürlich auch das mitgebrachte CSS dieser Komponenten.

Contaos CSS benutze ich nicht, ich habe ein eigenes Reset, normalize, basic, layout usw., welches ich selber als fertige Dateien aus files/css/ einbinde. Dabei benutze ich die Vendor-Prefixe sehr spärlich, weil es mir z.B. egal ist, ob ältere Browser da keine runden Ecken oder Farbverläufe usw. anzeigen. Bei wichtigen Sachen, wie z.B. box-sizing, benutze ich dann die Vendor-Prefixe, weil das sonst das Layout zerschießen könnte.

[mlweb]

So in etwa arbeite ich auch. Wieviele Vendor-Prefixe ich nutze hängt von den Projektanforderungen ab. Und die Styles von Komponenten wie Colorbox etc. passe ich nur dann updatesicher an wenn es das Layout erfordert.