CSS のコードインスペクション

セレクターリストにコンマがありません

複数行セレクターを報告します。ほとんどの場合、これは、複数の単一行セレクターが実際に意図されているが、1 つまたは複数の行の終わりにコンマがないことを意味します。

例:

警告

汎用フォントファミリ名がありません

font-family プロパティに、フォールバックの代替として一般的なフォントファミリ名が含まれていることを確認します。

一般的なフォントファミリ名は、serif、sans-serif、cursive、fantasy、monospace です。

警告

非整数のピクセル単位の長さ

整数以外の長さをピクセル単位で報告します。

例:

弱い警告

Stylelint

Stylelint(英語) リンターによって検出された不一致を報告します。

ハイライトは、個々のルールごとに Stylelint 設定ファイル(英語)で指定されたルールの重大度に基づいています。

無効

W3C CSS バリデーター

W3C CSS バリデーター(英語)によって検出された不一致を報告します。

無効

セミコロンがありません

宣言の最後に欠落しているセミコロンを報告します。

無効

冗長な測定単位

仕様で単位が必要とされていない場合に、ゼロ値の測定単位を報告します。

例:

警告

無効な関数

不明な CSS 関数または誤った関数型パラメーターを報告します。

エラー

無効なメディア特性

不明な CSS メディア機能または誤ったメディア機能値を報告します。

エラー

無効なプロパティ値

誤った CSS プロパティ値を報告します。

エラー

無効な疑似セレクター

誤った CSS pseudo-class pseudo-element を報告します。

エラー

無効なタイプセレクター

不明な HTML 要素に一致する CSS タイプセレクターを報告します。

警告

誤った位置にある @import

誤って配置された @import ステートメントを報告します。

仕様によれば、@import ルールは、@charset ルールを除く他のすべてのタイプのルールに先行する必要があります。

警告

@charset の位置が誤っているか正しくありません

誤って配置された @charset at-rule または誤った文字セット値を報告します。

警告

負のプロパティ値

オブジェクトの幅や高さなど、ゼロ未満であるとは予想されない CSS プロパティの負の値を報告します。

エラー

不明な @ ルール

不明な CSS のルールを報告します。

エラー

不明なプロパティ

不明な CSS プロパティまたは間違ったコンテキストで使用されているプロパティを報告します。

不明なプロパティをカスタム CSS プロパティリストに追加して、検証をスキップします。

警告

'composes' ルールの未解決クラス

有効なターゲットに解決できない「作曲」(英語)ルールの CSS クラス参照を報告します。

例:

エラー

未解決のカスタムプロパティ

var() 関数の引数の中でカスタムプロパティへの未解決の参照を報告します。

エラー

未解決のファイル参照

@import ステートメントのパスが正しくないなど、未解決のファイル参照を報告します。

エラー

色を #-hex に置換可能

rgb()、hsl()、その他のカラー関数を報告します。

色関数を同等の 16 進表記に置き換えることをお勧めします。

例:

クイックフィックスが適用された後:

.

無効

色を rgb() に置換可能

hsl() または hwb() カラー関数または 16 進カラー表記を報告します。

このような色の値を同等の rgb() または rgba() 色関数に置き換えることをお勧めします。

例:

クイックフィックスが適用された後:

.

無効

上書きされたプロパティ

ルールセット内で重複した CSS プロパティを報告します。省略形のプロパティを考慮します。

例:

警告

安全にショートハンドに置換可能なプロパティ

一連のロングハンドプロパティを報告します。ロングハンド CSS プロパティの完全なセットを同等のショートハンドフォームに置き換えることをお勧めします。

例: 4 つのプロパティ: padding-top、padding-right、padding-bottom、padding-left は、単一の padding プロパティに安全に置き換えることができます。

ショートハンドに切り替えると結果が変わる可能性があるため、ロングハンドプロパティのセットが不完全な場合（たとえば、ルールセットに padding-xxx プロパティが 3 つしかない場合）、このインスペクションは表示されないことに注意してください。このような場合は、「プロパティはおそらく省略形のインスペクションに置き換えられる可能性があります」と考えてください。

弱い警告

省略形に置換可能な可能性があるプロパティ

ロングハンド CSS プロパティのセットを報告し、ロングハンド CSS プロパティの不完全なセットをショートハンド形式に置き換えることを提案しますが、この場合は 100% と同等ではありません。

例: 2 つのプロパティ: outline-color と outline-style は、単一の outline に置き換えることができます。省略形は省略されたすべてのサブ値を初期状態にリセットするため、このような置換は 100% と同等ではありません。この例では、outline の省略形に切り替えると、outline-width も初期値である medium に設定されます。

このインスペクションは、ロングハンドプロパティの完全なセットを処理しません（ショートハンドに切り替える場合は 100% で安全です）。このような場合は、代わりに「プロパティを省略形のインスペクションに安全に置き換えることができます」を参照してください。

ハイライトなし、修正のみ

プロパティは選択されたブラウザーと互換性がありません

指定されたブラウザーでサポートされていない CSS プロパティを報告します。MDN 互換性データ(英語)に基づいています。

無効

未使用のセレクター

セレクターには表示されるが HTML では使用されない CSS クラスまたは要素 ID を報告します。

完全なインスペクションの結果は、コード | を介して実行した場合にのみ利用可能であることに注意してください。コードまたはコードをインスペクションする | コードを分析する | 名前でインスペクションを実行します。パフォーマンス上の理由により、スタイルシートファイルはその場でインスペクションされません。

警告