CSSチェックツール–CSS構文とプロパティをチェック
CSSチェックツールは、css-treeでCSSをパースし、行番号と列番号付きで構文エラーを報告します。最初のエラーで止まらずに続けてチェックできるため、さらに多くの問題を見つけられます。CSS仕様表にないプロパティ名をタイプミスの可能性として警告し、カスタムプロパティ（--*）とベンダープレフィックスは無視します。結果とあわせて、ルール数、宣言数、@ルール数も確認できます。
CSSチェックツールは、css-treeでスタイルシートをパースするブラウザベースのCSS構文チェックツールです。行番号と列番号付きで構文エラーを報告し、最初のエラーで止まらずに続けるため、さらに多くの問題を確認できます。CSS仕様表にないプロパティ名をタイプミスの可能性として警告し、ルール数、宣言数、@ルール数を表示します。
検証中はCSSがパースされ、構文の問題が位置付きで報告されます。CSS仕様表にないプロパティ名は警告されますが、カスタムプロパティ（--*）とベンダープレフィックスはそのチェックで無視されます。そのため、バリデーターはタイプミスの可能性と、スキップ対象として設計されたプロパティ名パターンを区別するのに役立ちます。
CSSはスタイルのルールと宣言を記述し、バリデーターは指定されたスタイルシートがパースできるか、プロパティ名がCSS仕様表にあるかをチェックします。CSSチェックツールを使うと、開発者は実行時に失敗するパーサーにCSSが届く前にエラーを調査したり、生成された出力を検証したり、ファイルを手動で探さずに問題を特定したりできます。
CSSチェックツールは完全にお使いのブラウザ上で動作します。入力はお使いのデバイス上で処理され、サーバーへの送信は行われません。ページの読み込み後はオフラインでも動作するため、その後は接続なしで利用できます。無料で使え、開発者やDevOpsエンジニアはスタイルシートのチェックや検証結果の確認に利用できます。
手順1: CSSをツールに貼り付けまたはドロップします。チェックしたいスタイルシートを含めます。
手順2: CSSチェックを実行します。ツールが入力をパースし、見つかった構文エラーを報告します。
手順3: 報告された各エラーの位置を確認します。行番号と列番号の情報を手がかりに、CSSの該当箇所を特定します。
手順4: プロパティ警告と件数を確認します。ツールは認識できないプロパティ名を警告し、ルール数、宣言数、@ルールの合計を表示します。
用途: CSSファイルがパーサーに届いて実行時に失敗する前にチェックします。構文の問題を早期に見つけるのに役立ちます。
用途: ファイルを手動で二分探索するのではなく、構文エラーの行番号と列番号を特定します。報告された位置を確認して調査範囲を絞れます。
用途: 別のツールの出力が、一見それらしく見えるテキストではなく有効なCSSであることを確認します。パーサーが見つけた構文エラーを報告します。
用途: スタイルシートのプロパティ名のタイプミスの可能性を探します。バリデーターはカスタムプロパティとベンダープレフィックスを無視しながら、CSS仕様表にない名前を警告します。
用途: CSSの生成や編集後に、ルール数、宣言数、@ルール数を確認します。合計値はスタイルシートの内容を素早く把握するのに役立ちます。
用途: カスタムプロパティやベンダープレフィックス付きプロパティを使うスタイルシートをチェックします。これらはプロパティ名チェックで無視されるため、不明なプロパティとして警告されません。