CSSスコーピングの初期

CSSスコーピングは牽引力を獲得しており、現在の作業ドラフト仕様は大きな進歩を表しています。 Miriam Suzanneが先頭に立っているこの提案は、以前の試みの制限に対処しています。

コアコンセプトは、特定のHTMLコンポーネントをターゲットにしたスタイルの作成を中心にしています。 @scopeルールはこれを促進します。

<code><div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSSスコーピングの初期"><div>
    <p>...</p>
  </div>
</div></code>

この「コンポーネント」のスタイリングは非常に集中します：

 <code>@scope (.media) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code>

重要な利点は次のとおりです。

1. クリアコンポーネントレベルのスタイリング、メンテナンスの簡素化。
2. 競合の命名を避けます。スタイルはコンポーネント内に含まれています。

Parent Class Prependingは同様のスコーピング（ .media 、 .media img 、 .media .content ）を提供しますが、CSSネスティングはより簡潔な代替品を提供します。

 <code>.media { & img { } & .content { } }</code>

ただし、 @scope独自の機能を提供します。 「ドーナツスコーピング」により、スコープ境界を正確に制御できます。

 <code>@scope (.media) to (.content) { p { } }</code>

これにより、目的の領域を越えてスタイルの漏れが防止されます。

<code><div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSSスコーピングの初期"><p>これは範囲が様式可能です。</p>
  <div>
    <p>これは範囲が様式的ではありません。</p>
  </div>
</div></code>

また、このスペックは「最寄りの祖先」シナリオをエレガントに処理し、既存の方法よりも大幅に改善されています。 Miriamのブログは、重複するスコープやネスティングとの相互作用など、これやその他の複雑さの詳細な説明を提供します。彼女の作品のさらなる調査を強くお勧めします。

以上がCSSスコーピングの初期の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。