CSS Scoping

Safari TP 185がCSS Scopingをサポートした。

※2024-07-22時点、Chrome118、Edge118、Safari17.4でのみ利用可能

HTML内で書く場合

<article class="article">
  <style>
  @scope {
    .title { color: red; }
  }
  </style>
  <!-- 赤文字になる -->
  <h2 class="title">CSS @scope</h2>
</article>

<!-- default-colorの色になる -->
<h2 class="title">Out of scope</h2>

CSSで書く場合

@scope (scope root) to (scope limit) { ... }

/* .articleクラス配下の要素にのみ適応される */
@scope (.article) {
  .title { ... }
}

/* .articleクラス配下の要素から.footer要素までに適用される（.footer配下には適用されない） */
@scope (.article) to (.footer) {
  ...
}