適用されていないCSSを検出するChrome拡張を作った

経緯 CSSを書いていて「あれ、なんで効かないんだっけ」ってなることないでしょうか。 私はしょっちゅうあります。 span { width: 200px; } DevToolsを開いてもプロパティはちゃんと適用されてる。打ち消し線もない。でも見た目は変わらない。 しばらくして「ああ、インライン要素だから width 効かないんだった...」と気づくやつです。 他にも z-index を position: static のまま書いてたり、gap を flex でも grid でもない に書いてたり。 CSSって構文的に正しければブラウザは何も言ってくれない...

経緯 CSSを書いていて「あれ、なんで効かないんだっけ」ってなることないでしょうか。 私はしょっちゅうあります。 span { width: 200px; } DevToolsを開いてもプロパティはちゃんと適用されてる。打ち消し線もない。でも見た目は変わらない。 しばらくして「ああ、インライン要素だから width 効かないんだった...」と気づくやつです。 他にも z-index を position: static のまま書いてたり、gap を flex でも grid でもない に書いてたり。 CSSって構文的に正しければブラウザは何も言ってくれない...