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

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca

[coliss]

デベロッパーツールの新機能、CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる。

[fellfield]

『Firefoxではすでに実装されており、Chromeは次の108で実装予定』……みんなFirefox使ってくれー。

[strawberryhunter]

position: sticky が機能していないとかは指摘してくれないだろうな。あとmarginが相殺されて機能しないとか、変な余白ができてるけど原因はどれなんだとかは、きっと教えてもらえない。つまり何も解決されないんだ(絶望)。

[mohritaroh]

Firefoxだと何もしなくても以前から使えてる便利機能でとても便利

[spark7]

関係ないけどエラーメッセージの日本語ローカライズが流暢ですげえなと思ってしまった。裏側のニッチ機能にまで手間かけてんのね。

[yarumato]

“デベロッパーツールの新機能「Find inactive styles」で、要素に適用されている非アクティブなスタイルを見つけることができます。それがなぜ機能しないのか、どう修正すればよいのか教えてくれる。”

[flyingfinn]

Firefoxユーザーはこんな便利な機能を独り占めしていたのか！

[hogashi]

便利そう

[mizdra]

便利！

[SuiJackDo]

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

[daira4000]

とっくにあったよな？と思ったけど俺がfirefox使ってるからだった

[manami0sec]

flex効いてないのにflexboxの属性つけちゃうのよくやる…！　さっそくオンにした🔛

[sonota88]

「Firefoxではすでに実装されており」

[miruto]

Firefoxユーザーなのであって当たり前の機能だった！

[Lewisik]

事件はFirefoxで起きてるんじゃない！Safariで起きてるんだ！ でも助かるー。

[kazuomabuo]

これは凄い。CSSを頑張って雰囲気学習していた身としては非常に助かる。

[phantast]

CSS苦手で修正する時はいつもうんうん唸ってたから助かる！

[Helfard]

うはーべんりー。

[take-it]

変な余白は*{outline:1px solid red;}で洗い出してる。

[igrep]

Firefoxではすでに使えるって！？ホントだ気づいてなかった！

[Keisuke69]

自分のようなCSS苦手勢にはこれは便利そう

[ducktoon]

いままでなかったのがおかしい

[retore]

!impotant つければええやろ(ﾊﾅﾎｼﾞ

[ultimatebreak]

Lintでもできないかなー(scssのネスト構文でギリギリできるかって感じそうだけど)

[snaflot]

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

[mayumayu_nimolove]

初心者には良いかも

[azukiazusa]

すごい、便利だ