Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります

ようやくか、という声も聞こえてきそうですが、ChromeのデベロッパーツールでCSSの詳細度が表示されるようになります。

CSSを普段使用している人はセレクタを見ただけで詳細度が分かると思いますが、こういうちょっとしたアップデートが重ねられていくのは便利になりますね。

CSSの詳細度を表示できるようになったのは、先日アップデートされたChrome Canaryの最新版です。
Chrome 115の安定版は、7/12にリリース予定です。

Chrome Canary

デベロッパーツールでCSSのセレクタをホバーすると、詳細度が表示されます。

セレクタの詳細度を0にする:where()にももちろん対応しています。

:where()について詳しくは下記をご覧ください。

• CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！

実は、CSSの詳細度を表示できるのはChromeが初ではなく、Safariのデベロッパーはすでに対応しています。

Inspect CSS specificity -Can I Devtools

Safariのデベロッパーツールを使用するには、Safariで「設定」を開き、「詳細」から「メニューバーに開発メニューを表示」のチェックをオンにします。これで右クリックで「要素の詳細を表示」でデベロッパーツールが開きます。

Safariで詳細度を表示するには、要素タブでスタイル属性ペインでセレクタをホバーすると詳細度が表示されます。

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

The past months I’ve worked on and off to have @ChromeDevTools show Specificity info upon hovering selectors in the Styles Pane.

Today the CLs adding this feature got merged … keep an eye out for tomorrow’s Chrome Canary build which will include it 🤩https://t.co/sRjqqX2cvW pic.twitter.com/nUMeFGUlPE

— Bramus (@bramus) May 22, 2023