デベロッパツールの新機能が便利! そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。

たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。

CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。

デベロッパーツールのキャプチャ

display: flex;ではないのにFlexboxのプロパティを設定

ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。

デベロッパーツールのキャプチャ

インライン要素にwidthを設定

デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。

サイトのキャプチャ

Find inactive styles -Can I DevTool

Chrome(Edgeも)107では試験運用版として、使用できます。
デベロッパーツールを開いて、「設定」から「試験運用版」のタブをクリックし、「Enable CSS Authoring hints...」をオンにします。フィルタに「author」と入力すると、すぐに見つかります。

Firefoxではすでに実装されており、Chromeは次の108で実装予定です。

デベロッパーツールのキャプチャ

「Enable CSS Authoring hints...」をオンに

オンにしたら、デベロッパーツールを再起動すると、使用できます。あとは通常通り、デベロッパーツールを使用するだけです。

サイトのキャプチャ

デベロッパーツールを再起動

当ブログで使用したところ、非アクティブなスタイルがなかったので、子要素にflex: auto;を追加してみました。当然これは無効なスタイルなので「i」マークが表示され、ホバーすると内容と修正方法が分かります。

デベロッパーツールのキャプチャ

非アクティブなスタイルを表示、修正方法をアドバイス

元ネタは、下記ツイートより。

sponsors

top of page

©2022 coliss