由CSS解決：甜甜圈範圍

想像您有一個可以顯示許多不同內容的Web組件。它可能在某個地方可以注入其他組件的地方。父組件還具有與其可能擁有的內容組件的樣式無關的樣式。 >

>這是一個具有挑戰性的情況：我們如何防止親本組件樣式向內洩漏？

這不是一個新問題 - 妮可·沙利文（Nicole Sullivan）在2011年描述了它！主要問題是編寫CSS，以免影響內容，她將其準確地創建為 Donut scoping 。 。

“我們需要一種說法，不僅在範圍開始的地方，而且在範圍結束的地方。因此，示波器甜甜圈”。

>即使甜甜圈範圍是網絡年份的古老問題，如果您在選擇的搜索引擎中快速搜索“ CSS Donut Scope”，您也可能會注意到兩件事：>

他們中的大多數都在談論仍然最近的@Scope At-Lule。

>

幾乎每個結果都是從2021年開始。

>即使有一個巧妙的“ CSS Donut Scope - @scope”查詢，我們也會獲得類似的結果，並且逐年逐年進行

甜甜圈範圍範圍
1. 表。似乎甜甜圈範圍一直呆在我們的腦海中，只是OL'CSS全球範圍的另一個頭痛，直到@Scope。
>和（擾流板！），而@Scope Atrule為甜甜圈範圍帶來了更輕鬆的途徑，但這些年來，我覺得一定有更多的解決方案。我們將冒險穿越它們，最後在今天的解決方案@Scope中停止。這是CSS歷史上的一個不錯的練習！
2. > 例如，以以下游戲屏幕為例。我們有一個帶有選項卡集和一個.content插槽的.parent元素，其中註入.Inventory組件。如果我們更改.parent顏色，那麼內部的顏色也是。

我們如何阻止這種情況發生？我想防止.content內部的文字繼承.parent的顏色。

> 只是忽略它！

>

第一個解決方案根本不是解決方案！

>這可能是最常用的方法，因為大多數開發人員可以在沒有甜甜圈範圍的樂趣的情況下過自己的生活（瘋狂，對嗎？）。讓我們在這裡更加切實，這不僅是公然忽略它，而且還要接受CSS的全球範圍和寫作風格。回到我們的第一個示例，我們假設我們不能阻止父母的樣式向內洩漏到內容組件，因此我們以較少的特異性編寫父母的樣式，因此內容樣式可以覆蓋它們。

>

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

>目前這種方法已經足夠了，但僅通過其特異性來管理樣式，隨著項目的發展而變得更大，充其量是乏味的，充其量是在最壞的情況下進行混亂。組件的行為可能會有所不同，具體取決於它們的插入位置，並且更改我們的CSS或HTML可能會以意想不到的方式破壞其他樣式。

>

>兩個CSS屬性走進了一個條。一個完全不同的欄中的bar凳掉落了。

thomas fuchs

>您可以看到在這個小例子中，我們必須兩次覆蓋樣式：

>淺甜甜圈範圍：不（）

我們的目標是只範圍範圍。因此，不是.content，而是其餘的.parent…不是.content…

：not（）！ 我們可以使用：not（）選擇器來範圍僅範圍。

以這種方式，.content樣式不會被其.parent中定義的樣式所困擾。

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

>當我們為每個示例打開DevTools時，您會看到巨大的差異：

與改進一樣好，最後一個例子有一個淺薄的範圍。因此，如果還有一個更深的插槽，除非我們事先知道它會被插入的位置，否則我們將無法達到。

>

這是因為我們正在使用直接後代選擇器（＆gt;），但是我找不到沒有它使它正常工作的方法。即使在內部使用複雜的選擇器的組合：Not（）似乎也無法在任何地方有用。例如，回到2021年，Lea Verou博士提到了Donut Scoping with：non（）使用以下選擇器雞尾酒：

但是，此片段似乎與.Container/.parent類而不是其後代匹配，並且注意到它仍然是淺的甜甜圈範圍： 直到所有現代瀏覽器現在都支持：Not（）！ ？

>測試：https：//t.co/rhsjardvsw

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

>甜甜圈範圍@scope



>因此，我們的甜甜圈範圍完成的最後一步是能夠超越一個DOM層。幸運的是，去年我們被@Scope Atrule有天賦（您可以在其《年鑑》中閱讀更多有關它的信息）。簡而言之，它使我們可以在DOM中選擇一個子樹，以便我們的樣式被瞄準，因此沒有更多的全局範圍！
>

更好的是，我們可以將插槽留在我們選擇的子樹內（通常稱為示波器根）。在這種情況下，我們希望在不划分的情況下對.parent元素進行樣式。

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

和更好的是，它可以檢測到內部的每個.content元素。因此，我們不需要擔心我們在哪裡寫老虎機。在最後一個示例中，我們可以編寫以下樣式來更改.parent中元素的文本顏色而無需觸摸。

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

>雖然列出要更改的所有元素似乎不便，但我們不能使用諸如Universal Selector（*）之類的東西，因為它會弄亂嵌套插槽的範圍。在此示例中，它會將嵌套的.content排除在範圍之外，而不是其容器。由於顏色屬性繼承，因此嵌套的.content將更改顏色，無論如何

>

和voilà！兩個.CONTENT插槽都在我們範圍的甜甜圈孔內： 使用此方法，仍然可以使用

淺範圍，我們只需要重寫我們的插槽選擇器，以便只有直接的。但是，我們必須使用：示波器選擇器，該示波器選擇器回到範圍的根，或者在這種情況下：

>。

在這種情況下，我們可以使用通用選擇器，因為它是淺範圍的。

>

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

結論

Donut Scoping是2011年創造的一項想法，終於在2024年栩栩如生。直到最近，它仍然令人困惑，它似乎是如何坐在我們腦海中的，只是CSS Global Scope的另一個後果，而它本身就有這麼多Quirks。但是，說這是不公平的，因為CSSWG（為新的CSS功能編寫規範的人們）顯然打算在為@Scope At-Rule編寫規格時解決這個問題以來，這是不公平的。

無論是什麼，我很感激我們可以在CSS中掌握真正的甜甜圈。在某種程度上，我們仍然必須等待Firefox支持它。 ？

此瀏覽器支持數據來自Caniuse，其中有更多詳細信息。一個數字指示瀏覽器在該版本及向上支持該功能。

桌面

移動 /平板電腦

以上是由CSS解決：甜甜圈範圍的詳細內容。更多資訊請關注PHP中文網其他相關文章！