CSS範圍的初期

CSS範圍正在獲得吸引力，目前的工作草案規范代表了重大進展。由Miriam Suzanne率領的這一提議解決了以前嘗試的局限性。

核心概念以明確針對特定的HTML組件的樣式為中心。 @scope規則促進了這一點：

<code><div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" 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. 避免命名衝突；樣式包含組件中。

雖然父母課程預備提供類似的範圍（ .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/?x-oss-process=image/resize,p_40" class="lazy" alt="CSS範圍的初期"><p>這在範圍中是可說的。</p>
  <div>
    <p>這在範圍上不可用。</p>
  </div>
</div></code>

該規格還優雅地處理了“最近的祖先”場景，對現有方法的重大改進。 Miriam的博客提供了有關此復雜性和其他復雜性的詳細說明，包括重疊的範圍和與嵌套的互動。強烈建議進一步探索她的工作。

以上是CSS範圍的初期的詳細內容。更多資訊請關注PHP中文網其他相關文章！