CSS のコードインスペクション
このトピックでは、CSS で利用可能なすべての JetBrains Rider コードインスペクション を一覧表示します。
エディター | インスペクション設定 | インスペクション重大度 | 他の言語 設定ページ  Ctrl+Alt+S で、特定のインスペクションを切り替えたり、その重要度レベルを変更できます。
潜在的なバグ
インスペクション | 説明 | デフォルトの重大度 |
|---|---|---|
セレクターリストにコンマがありません | 複数行セレクターを報告します。 ほとんどの場合、これは、複数の単一行セレクターが実際に意図されているが、1 つまたは複数の行の終わりにコンマがないことを意味します。 例:
input /* comma has probably been forgotten */
.button {
margin: 1px;
}
| |
汎用フォントファミリ名がありません |
一般的なフォントファミリ名は、 | |
非整数のピクセル単位の長さ | 整数以外の長さをピクセル単位で報告します。 例: width: 3.14px
|
コード品質ツール
インスペクション | 説明 | デフォルトの重大度 |
|---|---|---|
Stylelint | Stylelint リンターで検出された差異を報告します。 | |
W3C CSS バリデーター | W3C CSS バリデーター(英語)によって検出された不一致を報告します。 |
コードスタイルの問題
無効な要素
インスペクション | 説明 | デフォルトの重大度 |
|---|---|---|
無効な関数 | 不明な CSS 関数または誤った関数型パラメーターを報告します。 | |
無効なメディア特性 | 不明な CSS メディア機能または誤ったメディア機能値を報告します。 | |
無効なプロパティ値 | 誤った CSS プロパティ値を報告します。 | |
無効な疑似セレクター | 誤った CSS pseudo-class pseudo-element を報告します。 | |
無効なタイプセレクター | 不明な HTML 要素に一致する CSS タイプセレクターを報告します。 | |
誤った位置にある @import | 誤って配置された 仕様によれば、 | |
@charset の位置が誤っているか正しくありません | 誤って配置された | |
負のプロパティ値 | オブジェクトの幅や高さなど、ゼロ未満であるとは予想されない CSS プロパティの負の値を報告します。 | |
不明な @ ルール | 不明な CSS のルールを報告します。 | |
不明なプロパティ | 不明な CSS プロパティまたは間違ったコンテキストで使用されているプロパティを報告します。 不明なプロパティをカスタム CSS プロパティリストに追加して、検証をスキップします。 | |
'composes' ルールの未解決クラス | 有効なターゲットに解決できない 「作曲」(英語)ルールの CSS クラス参照を報告します。 例:
.className {/* ... */}
.otherClassName {
composes: className;
}
| |
未解決のカスタムプロパティ |
| |
未解決のファイル参照 |
|
その他インスペクション
インスペクション | 説明 | デフォルトの重大度 |
|---|---|---|
色を #-hex に置換可能 |
色関数を同等の 16 進表記に置き換えることをお勧めします。 例: rgb(12, 15, 255)
クイックフィックスが適用された後: #0c0fff
。 | |
色を rgb() に置換可能 |
このような色の値を同等の 例: #0c0fff
クイックフィックスが適用された後: rgb(12, 15, 255)
。 | |
上書きされたプロパティ | ルールセット内で重複した CSS プロパティを報告します。 省略形のプロパティを考慮します。 例:
.foo {
margin-bottom: 1px;
margin-bottom: 1px; /* duplicates margin-bottom */
margin: 0; /* overrides margin-bottom */
}
| |
安全にショートハンドに置換可能なプロパティ | 一連のロングハンドプロパティを報告します。 ロングハンド CSS プロパティの完全なセットを同等のショートハンドフォームに置き換えることをお勧めします。 例: 4 つのプロパティ: ショートハンドに切り替えると結果が変わる可能性があるため、ロングハンドプロパティのセットが不完全な場合(たとえば、ルールセットに | |
省略形に置換可能な可能性があるプロパティ | ロングハンド CSS プロパティのセットを報告し、ロングハンド CSS プロパティの不完全なセットをショートハンド形式に置き換えることを提案しますが、この場合は 100% と同等ではありません。 例: 2 つのプロパティ: このインスペクションは、ロングハンドプロパティの完全なセットを処理しません(ショートハンドに切り替える場合は 100% で安全です)。 このような場合は、代わりに「プロパティを省略形のインスペクションに安全に置き換えることができます」を参照してください。 |
|
プロパティは選択されたブラウザーと互換性がありません | 指定されたブラウザーでサポートされていない CSS プロパティを報告します。 MDN 互換性データ(英語)に基づいています。 | |
未使用のセレクター | セレクターには表示されるが HTML では使用されない CSS クラスまたは要素 ID を報告します。 完全なインスペクション結果は、コード | コードのインスペクションまたは コード | コードの解析 | インスペクション名を指定して実行から実行した場合のみ利用できます。 パフォーマンス上の理由により、スタイルシートファイルはオンザフライではインスペクションされません。 |