デベロッパツールの新機能が便利！ その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」マークが表示され、ホバーすると内容と修正方法が分かります。

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

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

Hot off Chrome Canary! 🔥 See which CSS props has no visual effects and understand why is that so. pic.twitter.com/mqScvjUdb4

— Jecelyn Yeen (@jecfish) October 12, 2022