CSS バリデーター

Q: ブラウザのサポート状況はチェックしますか？

いいえ、構文と文法だけです。

css-tree の文法データを使い、CSS の構文エラー、閉じられていないブロック、未知のプロパティ、無効な値をチェック。すべての問題を行と列付きで、ブラウザ内で表示します。

CSS の入力

css-tree の文法データに基づき、構文、未知のプロパティ、不正な値をチェックします。カスタムプロパティと var() を使った値はチェックしません。

すべてブラウザ内で実行されます。データがアップロードされることはありません。

CSS バリデーターとは？

CSS バリデーターは、構造上のエラー（閉じられていない波括弧、文字列、コメント、括弧）、解析エラー、未知のプロパティ、無効なプロパティ値、未知の at ルールを、それぞれ行と列付きで報告します。プロパティと値のチェックには css-tree に同梱された CSS の文法データを使い、W3C の CSS 検証サービスではありません。

CSS バリデーターの使い方

CSS を入力欄に貼り付けます。
検証をクリックします（結果は入力中に更新されます）。
概要と、エラーおよび警告の一覧を読みます。
表示された行と列を使って、各問題を修正します。

例

入力

a { colr: red; color: bluee; }

出力

Errors: 2 · Warnings: 0
Line 1, column 5 Unknown property "colr"
Line 1, column 16 Invalid value for "color": bluee

CSS バリデーターを使うべき場面

colr や bluee のようなタイプミスの発見、長いファイルの閉じられていない波括弧の発見、デプロイ前の手書き CSS のチェックに使います。ごく新しいプロパティは文法データにない場合があります。ブラウザのサポート状況はチェックしません。

CSS バリデーターの仕組み

スキャナーが {} と () が釣り合っていて、文字列とコメントが閉じられているかをチェックします。その後、スタイルシートは css-tree（CSSO に同梱）で解析され、解析エラーが報告されます。すべての宣言は、lexer.matchDeclaration で css-tree のプロパティ文法と照合されます。未知のプロパティはエラー、ベンダープレフィックス付きの未知のプロパティ（-moz-foo）は警告、文法に合わない値（たとえば値が 5 個ある margin）はエラーです。カスタムプロパティ（--x）と、var()、env()、attr() を使う値は静的にチェックできないため、スキップされます。