インモビインモビ

私が議論するつもりなら に対して @scope、新しいCSS機能、私はCSSと言うかもしれません すでに持っています 範囲。同様に、すべてのセレクターは「スコープ」です。あなたが言うなら .el、あなたは「「EL」のクラス名を持つ要素にこのCSSをスコープする」と言っています。しかし、誰かがあなたに言うかもしれません、 わかりました、でも「ドーナツスコープ」はどうですか 🍩？？ドーナツスコープは、スコープの方法です 停止。 キース・グラントは、最近の記事でそれを示しています：

@scope (.card) to (.slot) {
  /* Scoped styles target only inside `.card` but not inside `.slot` */
  :scope {
    padding: 1rem;
    background-color: white;
  }

  .title {
    font-size: 1.2rem;
    font-family: Georgia, serif;
  }
}

このHTMLに適用されると想像してください：

<div class="card">
  <h3 class="title">Moon lander</h3>
  <div class="slot">
    <!-- scoped styles won’t target anything here! -->
  </div>
</div>

正直なところ、私がそれについてどう感じているのかわかりません。嫌いではありませんが、本当に本当に欲しかった時を考えられません。それはそれが存在しなかったので、私の脳がそれに到達しようとしなかったからかもしれません。しかし、コンテナクエリも以前に存在していませんでした。それでも、それは少し+1です @scope それは私たちが他の方法ではできないことだからです。

私がまだ反対していた場合 @scope、それから私は言う、まあ、それは実際にあなたがいることが判明した できる 別の最新のCSS機能のおかげで、ドーナツスコープを再現してください。 :has()、 Bramusがブログに書いたように：

.from ~ :has(~ .to) {
  outline: 1px solid red;
}

そして実際、あなた 必要さえありません それ。

だから私は@scopeに与えたポイントを取り消さなければならないのではないかと心配しています。その袖に他のトリックはありますか？それはそれを持っています！それは呼ばれています 近接。 これはCSSの一種の残念な状況です。

<div class="green">
  <p>I’m green</p>
  <div class="blue">
    <p>I’m blue</p>
  </div>
</div>

このようなCSSを書いた場合：

.blue p {
  color: blue;
}
.green p {
  color: green;
}

その後、両方の段落は緑です。 グリーンセレクターが2番目になったからです。それがまさにCSSセレクターの動作です。どちらも同じ特異性を持っているので、後者は勝ちます。これをスコープで修正できます。

@scope (.green) {
  p {
    color: green;
  }
}

@scope (.blue) {
  p {
    color: blue;
  }
}

2番目の段落は、より近いスコープが勝つために適切に青くなっています（そして、それらがどんな順序であるかは関係ありません）。これは、クラスを使用してDOMのテーマ「Highter Up」を変更する場合に色をテーマにしています。しかし、他のセレクターの特異性の向上から救われることはありません。これは、おそらくより一般的な「バグ」です。それでも、これは+1の価値があると言います！

それでも、私は唾を吐きません @scope。それは私が個人的に持っていた大きな痛みのポイントを解決しません。しかし、多分それはあなたのためにそうです、ウェブは大きな場所なので、すべて良いです。

前に言ったことがありますが、 <style scoped> どこでもドンに入り、それらのスタイルを親にスコープすることはまだクールなアイデアであり、実際に問題を解決します。と結合します :scope { } つまり、要素を選択する方法の名前を考える必要さえありませんが、それでも擬似要素などを適用する能力を得ることさえできません。したがって、より多くの能力を備えたインラインスタイル。また、何も名前を付けなくても、スタイルが他の場所にリークする方法はありません。確かに、aで漏れるスタイルを止めるのはすてきです @scope また、クラスに適用しなければならないので、ように非常に不明瞭なクラスを作る必要があります .card_987adf87d （ビルドツールの懸念事項）それが実際に心配なく「スコープ」すること。

Source link

Views: 0