CSS-Validator
Die Zeile, die Eigenschaft, die Lösung
Dieser CSS-Validator liest ein Stylesheet so, wie ein Browser es liest, und meldet, was er verwerfen würde. Außerdem trägt jeder Hinweis eine Zeilennummer, die betroffene Eigenschaft und das, was der Parser erwartet hat. Nichts, was Sie einfügen, verlässt den Browser.
- KostenlosPreis
- 6Prüft
- KeineAnmeldung
- KeineUploads
CSS Validator
Read a stylesheet and name every declaration the browser would drop, with the line it sits on
Nothing read yet.
Nothing to report. Every name here is one the reader knows, and every value is one that property takes.
Bereit. Fügen Sie ein Stylesheet ein, oder drücken Sie eine der Beispieltasten.
Was ein CSS-Validator findet
Ein Browser ist bei CSS nachsichtig, und genau das ist das Problem. Daher verwirft der Browser eine Regel, die er nicht lesen kann, im Stillen, und die Seite sieht einfach falsch aus.
Dieser CSS-Validator benennt, was der Browser verwerfen würde. Außerdem trägt jeder Hinweis eine Zeilennummer, die betroffene Eigenschaft oder den Selektor und den Grund, aus dem der Parser anhielt.
Er liest das Stylesheet in der Reihenfolge und verfolgt, ob er in einer Regel, einer Zeichenkette, einem Kommentar oder einer At-Regel steckt. Denn der Zustand entscheidet, was ein Zeichen bedeutet, und so öffnet eine Klammer im Kommentar nie einen Block.
Dieser CSS-Validator prüft sechs Fehlerfamilien. Zwei davon brechen die Datei, und die anderen vier kosten eine Deklaration, ohne etwas zu brechen.
Alles läuft in diesem Tab. So unterscheidet sich ein Stylesheet für eine Seite unter Vertraulichkeitsklausel hier nicht von einem öffentlichen.
Wie ein CSS-Validator ein Stylesheet liest
Der Leser geht den Text einmal durch. An jedem Zeichen weiß er, in welchem von fünf Zuständen er ist: einem Selektor, einem Deklarationsblock, einem Wert, einer Zeichenkette oder einem Kommentar.
Aus diesem Zustand kann er sagen, ob eine Klammer einen Block öffnet, ob ein Doppelpunkt einen Wert beginnt und ob ein Semikolon eine Deklaration beendet. Die Grammatik selbst ist kurz, und das CSS-Syntaxmodul ist der Ort, an dem die Arbeitsgruppe sie aufschreibt.
Weil der Durchgang Zustand hält, ändert eine verirrte Klammer im Kommentar nichts. Ein Leser, der stattdessen Zeichen zählt, würde sie als Blockbeginn nehmen und jede Zeile danach verschieben.
Die Erholung zählt so viel wie die Erkennung. Trifft ein Browser auf eine Deklaration, die er nicht parsen kann, springt er zum nächsten Semikolon und macht weiter. So kostet ein schlechter Wert eine Deklaration statt der Datei.
Daher kann eine Regel, die eine Deklaration verloren hat, monatelang auf einer Live-Seite stehen. Die Seite funktioniert weiter, eine Eigenschaft kürzer, und nichts in der Konsole sagt es.
Warum stille Verwürfe es wert sind, gefunden zu werden
Ein Tippfehler in einem Eigenschaftsnamen ist der billigste Fehler in CSS und der am schwersten zu bemerkende. Ein Buchstabe daneben, und die Deklaration ist weg.
Weil der Rest der Regel weiter greift, behält das Element den größten Teil seines Stylings. So sieht die Seite fast richtig aus, und der fehlende Teil wird leicht etwas anderem zugeschrieben.
Dasselbe gilt für eine Einheit. Eine Länge ohne Einheit ist an wenigen Stellen gültig und an den meisten ungültig. Daher verwirft der Browser einen Außenabstand von zehn statt zehn Pixeln, und der Platz, den er schaffen sollte, erscheint nie.
Ein Validator macht aus dreien davon drei Zeilen Ausgabe. Das ist der ganze Wert: der Browser bleibt still, und die Seite nicht.
Die sechs Prüfungen und was jede bedeutet
Die erste Prüfung ist die Klammerbalance. Eine öffnende Klammer ohne Gegenstück, oder eine schließende ohne Öffner, bekommt einen Hinweis, der die Zeile nennt, an der die Zählung kippte. Außerdem ist dies der eine Fehler, der den ganzen Rest der Datei kosten kann.
Die zweite ist ein fehlendes Semikolon. Denn der Browser liest die nächste Eigenschaft dann als Teil des Werts, und ein fehlendes Zeichen schluckt zwei Deklarationen. Der Hinweis nennt beide Zeilen.
Die dritte ist eine unbekannte Eigenschaft. Der Leser meldet alles, was er nicht erkennt, als wahrscheinlichen Tippfehler und bietet den nächstliegenden Namen an, wenn es einen gibt.
Die vierte ist ein Wert, den die Eigenschaft nicht annimmt. Eine Farbe als Wort geschrieben, das kein Farbname ist, oder eine Länge als Prozentwert bei einer Eigenschaft, die keine Prozente nimmt.
Die fünfte ist eine falsch geschriebene Einheit. Eine Länge ohne Einheit, eine Einheit, die keine der erkannten ist, und eine Einheit bei einer Eigenschaft, die eine reine Zahl liest.
Die sechste ist ein Duplikat. Derselbe Selektor zweimal in einem Block, oder dieselbe Eigenschaft zweimal in einer Regel. Weil die spätere Deklaration gewinnt, kann ein alter Wert dort autoritativ aussehen und nichts tun.
Was gültig nicht heißt
Ein Validator beantwortet eine Frage: wird der Browser dies parsen. Er kann nicht beantworten, ob die Regel eine gute Idee war.
So kann ein Stylesheet jede Prüfung bestehen und dennoch falsch sein. Eine Farbe, die am Kontrast scheitert, eine feste Breite, die auf einem schmalen Bildschirm bricht, eine Schriftgröße in Pixeln, wo eine relative Einheit hingehörte. Nichts davon ist Grammatik.
Dasselbe gilt für die Unterstützung. Eine Eigenschaft kann völlig gültig sein und dennoch nichts tun, weil der Browser sie nicht umgesetzt hat. Die Validierung sagt dazu nichts, und ein grünes Ergebnis als Kompatibilitätsversprechen gelesen führt in die Irre.
Deshalb verlinkt diese Seite den Kontrast-Checker und den Selektor-Tester. Diese zwei beantworten die Fragen, die ein Validator nicht kann.
So nutzen Sie den CSS-Validator
Vier Schritte, und keiner braucht ein Konto.
- 1
Das Stylesheet einfügen
Fügen Sie also eine ganze Datei oder eine einzige Regel ein. Weil der Leser Text statt einer kompilierten Form nimmt, geht ein Fragment, solange die Klammern ausgeglichen sind.
- 2
Die Strenge wählen
Wählen Sie dann, ob eine unbekannte Eigenschaft ein Fehler oder eine Warnung ist. Da eine neue Eigenschaft diesem Leser einfach voraus sein kann, lässt die Warnstufe sie mit einem Hinweis durch.
- 3
Die Hinweise der Reihe nach lesen
Arbeiten Sie sich als Nächstes durch das Feld. Die Hinweise folgen der Zeilenfolge, und so verursacht der erste meist die zwei danach.
- 4
Beheben, neu prüfen, dann kopieren
Bearbeiten Sie das Sheet zum Schluss in Ihrem eigenen Editor und fügen Sie es wieder ein, um die Null zu bestätigen. Danach kopieren oder laden Sie die saubere Datei.
Warum diesen CSS-Validator nutzen
Fünf Gründe, und jeder erspart eine Debugging-Sitzung.
Er nennt die Zeile
Weil jeder Hinweis aus diesem CSS-Validator eine Zeilennummer trägt, gehen Sie direkt dorthin statt die Datei zu lesen. So ist ein Stylesheet mit zweihundert Zeilen eine Sache von zwei Minuten.
Er erklärt den Grund
Ein Hinweis aus dem CSS-Validator sagt, was der Parser erwartet hat, nicht nur dass er anhielt. Daher ist die Lösung meist schon aus dem Hinweis klar.
Er liest so, wie ein Browser liest
So verfolgt ein CSS-Validator Zeichenketten, Kommentare und At-Regeln genauso. Daher erzeugt eine Klammer im Kommentar keine falsche Meldung.
Nichts wird hochgeladen
Die ganze Prüfung läuft in diesem Tab. So unterscheidet sich ein Stylesheet unter Vertraulichkeitsklausel hier nicht von einem öffentlichen.
Er sagt nichts zum Geschmack
Weil Grammatik die ganze Aufgabe ist, äußert das Tool sich nicht zu Ihrer Benennung, Ihrer Verschachtelung oder Ihrer Wahl der Einheiten. So heißt ein grünes Ergebnis geparst, und nichts weiter.
Angewohnheiten, die ein Stylesheet sauber halten
Sechs Angewohnheiten, die ein Stylesheet lesbar und leicht prüfbar halten.
- Eine Deklaration pro Zeile So zeigt sich ein fehlendes Semikolon als rote Zeile in Ihrem Editor statt als Hinweis hier. Außerdem lassen sich mehrzeilige Regeln viel leichter vergleichen.
- Schreiben Sie nie eine Länge ohne Einheit Eine Null darf allein stehen, und sonst nichts. Weil der Browser eine Länge ohne Einheit verwirft, erscheint der Abstand einfach nie, und die Ursache ist schwer zu erraten.
- Schreiben Sie benutzerdefinierte Eigenschaften immer gleich Eine benutzerdefinierte Eigenschaft ist ein Name, den Sie erfinden, und so ist ein Tippfehler darin überall still. Daher deklarieren Sie ihn oben in der Datei und kopieren die Schreibweise statt sie neu zu tippen.
- Prüfen Sie vor dem Minifier, nicht danach Ein Minifier vertraut seiner Eingabe, und so kommt eine kaputte Regel kaputt und schwerer lesbar heraus. Da die Zeilennummern in der unminifizierten Datei überleben, prüfen Sie zuerst diese.
- Achten Sie auf die letzte Regel in einem Block Die letzte Deklaration ist die Stelle, an der ein fehlendes Semikolon am wenigsten schmerzt und sich am besten versteckt. Weil die nächste Zeile eine schließende Klammer ist, greift die Regel weiter, und der Hinweis erscheint nie.
- Behandeln Sie ein Hersteller-Präfix als normal Eine Eigenschaft mit Präfix ist gültig, und der Leser kennt sie. So ist eine Warnung dazu eine Liste zum Nachziehen und kein Fehler zum Beheben.
Sechs Wege, auf denen Stylesheets still brechen
Jeder davon lässt die Seite fast richtig aussehen, und genau das macht die Suche langsam.
Eine verlorene Deklaration in einer Kurzschreibweise
Achtung hier. Eine Kurzschreibweise wie margin, schlecht ausgeschrieben, verliert die ganze Zeile statt des einen Teils, und so verschieben sich vier Seiten statt einer.
Ein Wert, den die Eigenschaft nicht annimmt
Ein Prozentwert, wo die Eigenschaft eine Länge will, oder ein Wort, wo sie eine Zahl will. Weil der Browser zum nächsten Semikolon springt, überlebt die nächste Deklaration.
Eine doppelte Eigenschaft in einer Regel
Der spätere Wert gewinnt, und so kann ein alter dort autoritativ aussehen. Daher löschen Sie ihn statt ihn auszukommentieren, sonst vertraut der nächste Leser darauf.
Ein fehlendes Semikolon vor einer schließenden Klammer
Die letzte Deklaration in einem Block ist die eine Stelle, an der der Fehler nichts kostet. Daher übersteht er ein Review und zeigt sich erst, wenn jemand eine Deklaration dahinter setzt.
Ein nicht geschlossener Kommentar
Ein Kommentar, der nie schließt, schluckt alles danach, auch jede Regel. So rendert die Seite ab dieser Stelle ohne Styles, und die Datei sieht im Diff gut aus.
Einem grünen Ergebnis bei der Unterstützung trauen
Eine gültige Eigenschaft kann im entscheidenden Browser dennoch nichts tun. Da Validierung Grammatik ist, prüfen Sie die Kompatibilität mit Ihrem eigenen Ziel getrennt.
Fragen zum CSS-Validator
Ist dieser CSS-Validator kostenlos?
Ja. Es gibt kein Konto, kein Limit und keine Bezahlstufe. Also prüfen Sie so viele Stylesheets, wie Sie möchten.
Was prüft ein CSS-Validator?
Sechs Familien: Klammerbalance, fehlende Semikolons, unbekannte Eigenschaften, Werte, die die Eigenschaft ablehnt, falsch geschriebene Einheiten und Duplikate innerhalb einer Regel.
Prüft es mein CSS gegen die Spezifikation?
Es prüft die Grammatik, die das CSS-Syntaxmodul festlegt, dazu eine Liste bekannter Eigenschaften und der Werte, die jede annimmt. Daher kann dieser Leser eine brandneue Eigenschaft melden, bis seine Liste nachgezogen ist.
Warum sieht mein CSS richtig aus, wenn es einen Fehler hat?
Denn der Browser springt zum nächsten Semikolon und macht weiter. So kostet eine schlechte Deklaration eine Deklaration, und die Seite wird ohne sie weiter gerendert.
Verändert es mein Stylesheet?
Nein. Der Leser berichtet, und die Datei bleibt genau so, wie Sie sie eingefügt haben. Außerdem nehmen Sie jede Änderung in Ihrem eigenen Editor vor.
Wird mein Stylesheet irgendwohin hochgeladen?
Nein. Die ganze Prüfung läuft in diesem Browser-Tab. So bleibt ein Stylesheet unter einer Vertraulichkeitsklausel auf Ihrem Rechner.
Kann ich SCSS oder Less prüfen?
Nicht direkt. Diese legen Verschachtelung und Variablen über CSS, also schicken Sie sie zuerst durch den Präprozessor-Konverter und prüfen dann das reine CSS, das herauskommt.
Prüft es die Browser-Unterstützung?
Nein. Eine Eigenschaft kann gültig sein und im entscheidenden Browser dennoch nichts tun. Validierung ist also Grammatik, und Unterstützung ist eine andere Frage.
Was kommt einem echten Fehler am nächsten?
Eine unausgeglichene Klammer. Denn der Browser liest den Rest der Datei dann aus der falschen Tiefe, und eine fehlende Klammer kann jede Regel danach kosten.
Meldet es eine Eigenschaft mit Hersteller-Präfix?
Nein, der Leser kennt eine Eigenschaft mit Präfix und akzeptiert sie. So passiert ein Block mit sechs Präfixen für eine einzige Funktion ohne Hinweis.
Kann ich ein Fragment statt einer ganzen Datei prüfen?
Ja. Eine einzelne Regel oder eine Gruppe von Regeln funktioniert, solange die Klammern ausgeglichen sind. Dann bezieht sich die Zählung auf die eingefügten Zeilen statt auf eine Datei.
Prüft es benutzerdefinierte Eigenschaften?
Es prüft die Syntax und die Verwendung. Denn ein von Ihnen erfundener Name hat keine Schreibweise zum Abgleich, und so kann es nicht erkennen, dass zwei Schreibweisen eine sein sollten.
Was ist der Unterschied zwischen einem Fehler und einer Warnung?
Ein Fehler bedeutet, dass der Browser die Deklaration verwirft. Eine Warnung bedeutet, dass dieser Leser die Eigenschaft nicht kennt, was einfach heißen kann, dass sie neu ist.
Kann es meine Regeln und Selektoren zählen?
Ja. Die Zusammenfassung nennt die Anzahl der Regeln, Deklarationen und Selektoren, was beim Verkleinern einer Datei nützlich ist.
Formatiert oder minifiziert es das Stylesheet?
Nein, und das ist Absicht. Formatieren und Prüfen sind getrennte Entscheidungen. Außerdem übernimmt der Minifier hier die Leerzeichen.
Warum greift eine gültige Regel von mir trotzdem nicht?
Die übliche Ursache ist der Selektor, nicht die Deklaration. Also schicken Sie sie durch den Selektor-Tester, der fragt, ob sie überhaupt ein Element trifft.
Funktioniert es auf einem Handy?
Ja. Die Felder stapeln sich, und die Hinweise brechen um. So ist eine schnelle Prüfung auch abseits des Schreibtischs möglich, auch wenn eine lange Datei mit Tastatur leichter fällt.
Kann ich die Hinweise herunterladen?
Ja. Der Download speichert den Bericht als Textdatei, was für ein Ticket oder einen Review-Kommentar nützlich ist.
Gehört das Stylesheet weiter mir?
Vollständig. Diese Seite beansprucht keine Lizenz an Ihrer Datei, und es ist kein Credit zu geben.
Brauche ich ein Konto oder eine Erweiterung?
Nein. Es gibt keine Anmeldung, kein Plugin und keine Erweiterung. Also schließen Sie den Tab, wenn das Sheet sauber ist.
Tools, die zu diesem passen
Vier Seiten, zu denen dieselbe Aufgabe meist führt.
Sobald das Sheet sauber ist, nehmen Sie die Leerzeichen heraus. Weil ein Browser jeden Kommentar und jeden Zeilenumbruch lädt, minifizieren Sie nach dem Prüfen und nicht davor.
Tool öffnen →Prüfen Sie dann, ob ein Selektor etwas trifft. Weil eine Regel, die nichts trifft, still scheitert, ist das die andere Hälfte derselben Aufgabe.
Tool öffnen →Eine gültige Farbe kann am Kontrast scheitern. Also lesen Sie das Verhältnis, bevor Sie sich auf die Palette festlegen.
Tool öffnen →Ist die Quelle SCSS oder Less, machen Sie daraus zuerst reines CSS. Dann hat der Validator etwas, das er lesen kann.
Tool öffnen →
Finden Sie die Deklaration, die der Browser verworfen hat
Stylesheet einfügen, die Hinweise in Zeilenfolge lesen, den ersten beheben und erneut prüfen. Außerdem wird nichts hochgeladen und nichts auf Ihrem Rechner verändert. So sind die meisten Sheets sauber, bevor der Tee kalt wird.