CSS Doctor / Rule reference 1.0.0

CSS Doctorの公開診断ルール

21ルールそれぞれについて、何を検出するか、どの根拠を使うか、修正安全度、手動確認が必要な範囲を公開しています。

CSS Doctorで診断する
CSS-CASCADE-002Tier B

CSS詳細度の競合

同じ要素・プロパティに複数の宣言が一致し、強い詳細度または後の宣言が勝っています。

HYBRID · v1.0.0
CSS-CASCADE-003Tier A

同一ブロック内の重複宣言

同じCSSブロックで同一プロパティが複数回指定され、後の値が前の値を上書きしています。

STATIC · v1.0.0
CSS-CASCADE-006Tier B

影響範囲が広いセレクター

要素セレクターだけの指定が、ページ内の同種要素すべてへ影響します。

STATIC · v1.0.0
LAYOUT-001Tier C

ページ全体の横はみ出し

プレビューのscrollWidthが表示領域より大きく、横スクロールを実測しました。

RUNTIME · v1.0.0
LAYOUT-002Tier C

表示領域外へ出ている要素

要素の境界が現在の表示幅を超えています。

RUNTIME · v1.0.0
LAYOUT-003Tier B

固定幅がコンテナを超える

px固定のwidthまたはmin-widthが現在の表示幅を超える可能性があります。

HYBRID · v1.0.0
LAYOUT-004Tier A

Flexアイテムが縮められない

min-width:autoと長い内容が組み合わさり、Flexアイテムが親幅より縮まなくなっています。

HYBRID · v1.0.0
LAYOUT-006Tier B

改行できない文字列のはみ出し

長いURLや連続文字列が改行されず、要素幅を超えています。

RUNTIME · v1.0.0
LAYOUT-007Tier A

画像・SVG・動画のはみ出し

メディアの固有幅が親要素より大きく、最大幅の制限がありません。

HYBRID · v1.0.0
POSITION-001Tier A

stickyの開始位置がない

position:stickyはありますが、topなど固定開始の基準がありません。

HYBRID · v1.0.0
POSITION-002Tier C

stickyを制限するoverflow親

祖先のoverflow:auto・scroll・hiddenがstickyの固定範囲を変えています。

RUNTIME · v1.0.0
POSITION-003Tier C

stickyが動ける範囲がない

親の高さがsticky要素とほぼ同じで、固定状態へ移る移動範囲がありません。

RUNTIME · v1.0.0
STACK-001Tier C

祖先の重なり順に閉じ込められている

大きいz-indexでも、祖先のstacking context内から外へ出られません。

RUNTIME · v1.0.0
STACK-002Tier B

z-indexが効く条件を満たしていない

z-indexがありますが、位置指定要素でもFlex・Gridアイテムでもありません。

HYBRID · v1.0.0
VIEWPORT-001Tier B

モバイルの100vhリスク

100vhだけの高さ指定はモバイルブラウザの可変UIで余分なはみ出しになる場合があります。

HYBRID · v1.0.0
A11Y-001Tier B

キーボードフォーカスが見えない

操作要素へフォーカスしてもoutline・border・shadowなどの変化がありません。

RUNTIME · v1.0.0
A11Y-004Tier C

重複したHTML id

同じidが文書内に複数あり、ラベル参照やアンカーの対象が一意になりません。

STATIC · v1.0.0
MOTION-001Tier B

動きを減らす代替がない

animationまたは大きなtransitionがありますが、prefers-reduced-motion向けの分岐がありません。

STATIC · v1.0.0
WP-001Tier A

Gutenbergクラス欄の先頭ドット

追加CSSクラス欄にはドットなしの名前、CSS側にはドット付きセレクターを使います。

STATIC · v1.0.0
WP-002Tier B

WordPressコアブロックへの広い上書き

.wp-block-*だけの指定がサイト内の同種ブロックすべてへ影響します。

STATIC · v1.0.0
WP-004Tier B

WordPressテーマCSSとの競合

WordPress系セレクターまたは!importantの宣言がカスタムCSSより強く適用されています。

HYBRID · v1.0.0