CSSの新機能「@scopeアットルール」。このルールを使えば、CSSセレクターに適用されるスタイルのスコープ（範囲）をHTMLの特定の一部分に限定できます。さらに、その開始点（ルート）や終了点（リミット）も柔軟に設定できます。 この記事では、CSSのスコープを制御できる@scopeの基本的な使い方や注意点を解説します。 @scopeを使用すると、以下のようなメリットがあります。 クラス名を複雑にしなくてすむ スタイルの衝突を防ぎやすくなる 保守性が高まる .titleや.buttonなどのよく使うクラス名も、スコープごとにスタイルを分けられます。その結果、複雑なクラス名を増やさずにすみ、意図しないスタイルの上書きも防ぎやすくなります。また、スコープを設定することで影響範囲が明確になり、あとからスタイルを修正したり追加したりしやすくなります。 @scopeの使い方は大きく2通りに分けられま
CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。 そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。 とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。 さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。 なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
