CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方

CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimgはターゲットにされません。 A quick introduction to CSS @scope by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS @scopeがなぜ必要なのか CSSカスケードの仕組み CSS @scopeの基本的な使い方 @scopeのさらに優れた使い方 はじめに CSSの@scopeについてご存じですか？ @sco

[coliss]

セレクタの適用範囲を設定できる、CSS @scopeの基礎知識と使い方。

[hirolognet]

2023/12時点でFirefox非対応 https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

[sabotem]

あまりピンときてなく、クラス付与してしまえばいいじゃんと思ったけど、CSSだけ切り替えて別の表示を得る必要がある時とかには便利そう。

[sezemi]

important を理詰めにして殴り合う感じよな

[lost_and_found]

@scopeはセレクタの範囲を制限するものであり、継承を止めたり防いだりするものではない

[w_bonbon]

我々はこれからSafari16問題と向き合う事になる…。（iPhone 8とXの限界値）

[tofu-kun]

scopeも嬉しいけど、ShadoDOMみたいに全てのカスケードを無視するreset的なものが欲しい。独立したDOMツリーをCSSだけで実現したい。