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