深入挖掘容器樣式查詢

>我一段時間以前就寫了一些關於容器風格查詢的想法。還很早。它們已經在CSS遏制模塊3級規範中定義（目前處於編輯的草案狀態），但仍有一些出色的討論。

>基本思想是，我們可以根據其計算的樣式定義容器，然後將樣式應用於其後代。

到目前為止，我見過的最好的例子是從類似＆＆gt; em＆lt; i＆gt;和＆＆lt q＆gt; q＆gt;當它們在內容已經斜體化的上下文中使用時：

@container <name>? <conditions> {
  /* conditional styles */
}</conditions></name>

>

這是一個總體想法。但是，如果您不知道，Spec的編輯Miriam Suzanne將在公開可用的集裝箱樣式查詢上保留一套持續而徹底的個人筆記。前幾天，它進行了更新，我花了一些時間在那裡試圖將我的頭纏繞在樣式查詢的更多細微差別方面。這是非正式的東西，但我想我會記下一些對我來說突出的事情。誰知道？也許是我們最終可以期待的東西！

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

>

每個元素都是樣式容器

>

>我們甚至不需要解釋分配一個容器名稱或容器類型來定義樣式容器，因為默認情況下，所有內容都是樣式容器。 >

>那麼，您在上面看到了刪除斜體的示例嗎？請注意，它無法識別容器。它使用style（）函數直接跳到查詢。那麼，要查詢什麼容器？這將是接收應用樣式的Elements

最接近的相對容器才能優先。 > 我喜歡那個。查詢要搜索一場比賽是非常CSS-y，然後繼續冒泡直到找到匹配條件。 >我的小腦很難理解為什麼我們可以根據樣式逃脫一個隱式容器，但在處理尺寸和內線大小等維度查詢時並不是那麼多。 Miriam很好地解釋了：

尺寸查詢需要在容器的尺寸，佈局和样式上進行CSS

contemment >基於樣式的查詢沒有相同的限制。

>在CSS中，後代風格無法對祖先的計算樣式產生影響。 >，因此不需要遏制，並且在將元素建立為樣式的Query COURARY COUNER COUNER CONELER CONELER CONELER CONERER 。 （強調礦山）

>這一切都歸結為後果 - 只要一切都不是一個樣式查詢容器。

如果找到一個容器：在該容器中解決條件。

如果多個容器匹配：最接近的相對容器優先。

>
• 如果找不到匹配：未知返回。
>與其他CSS的精神相同。
• >
一個容器可以支持尺寸和样式查詢

>假設我們希望在沒有明確的容器名稱的情況下定義樣式查詢：>

>這是因為

>所有元素都是樣式容器

，無論容器類型如何。這就是使我們能夠隱式查詢樣式並依靠最近的比賽的原因。這完全可以，因為建立樣式容器時也沒有不利的副作用。

>我們必須使用明確的容器類型來進行維數查詢，但對於樣式查詢而言並不多，因為每個元素都是樣式查詢。這也意味著此容器既是樣式

@container <name>? <conditions> {
  /* conditional styles */
}</conditions></name>

>和

dimensional查詢：> 排除容器不被查詢

也許我們不希望容器參與匹配過程。那就是可以設置容器類型的地方：

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

顯式樣式查詢容器提供更多控制

的更多控制權

如果我們要編寫用於填充的樣式查詢，則沒有可靠的方法來確定最佳的匹配容器，無論我們是使用明確命名的容器還是最近的直接父母。那是因為填充不是繼承的財產。

>因此，在這些情況下，我們應該使用容器名稱來解釋可以從哪些容器中刪除的瀏覽器。我們甚至可以給一個容器多個明確的名稱，以使其匹配更多的條件：

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

>

oh，並且容器名稱接受容器的任何數量的可选和可重複使用的

名稱！在幫助瀏覽器搜索比賽時，這更加靈活。

我有點想知道，如果一個容器被傳遞給一個容器，這是否也可能被視為“後備”。

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

>樣式查詢可以組合

>或和和和和和和和和和和and and and and and and and and and and and and and and and and and and and and and and and and and and and and and and and和and and and and and and and and and and and and and和and and和and and and and and and and and and and和and and and and and and and和and and and and and and and和and and and and and and and and and and and wueries以保持乾燥：

@container <name>? <conditions> {
  /* conditional styles */
}</conditions></name>

>切換樣式

>在容器樣式查詢與定義toggle（）函數的工作之間存在一些重疊。例如，我們可以循環循環兩個字體式的值，例如斜體和正常值：

>

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

酷。但是CSS切換的建議表明toggle（）函數將是一種更簡單的方法：>

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

但是，除了這種二進制用例之外，其他任何東西都不太合適。但是，樣式查詢是很好的。 Miriam確定了樣式查詢比toggle（）更合適的三個實例：

>

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

>樣式查詢求解“自定義屬性切換hack”

請注意，樣式查詢是“ CSS自定義屬性切換技巧”的正式解決方案。在那裡，我們設置了一個空的自定義屬性（ - foo：;），並使用逗號分隔的後備方法將“切換”屬性“切換”，然後將自定義屬性設置為真實值。

>超級酷，也是很多樣式容器查詢的工作。

.some-element {
  container-type: none;
}

>樣式查詢和CSS生成的內容

>對於由::之前的內容屬性產生的生成的內容和偽元素之後的:: :: ::匹配的容器是生成內容的元素。

>

樣式查詢和Web組件

.card {
  container-name: card layout theme;
}

>我們可以將Web組件定義為容器，並按樣式查詢。首先，我們有＆lt;模板＆gt;組件的：

然後，我們使用：主機偽元素作為容器來設置容器名稱，容器類型和某些高級屬性：

>

.theme {
  container-name: theme;
}
.grid {
  container-name: layout;
}
.card {
  container-name: card layout theme;
}

>元素內部的元素;可以查詢＆lt; Media-host＆gt;元素：

@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
  .bubble::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

/* is the same as... */
@container bubble style(--arrow-position: start start) {
  /* etc. */
}
@container bubble style(--arrow-position: end start) {
  /* etc. */
}

下一步是什麼？

再次，我在這裡記下的所有內容都是基於Miriam的筆記，這些筆記不能替代官方規格。但是，它們表明正在討論的內容以及未來可能降落的地方。我感謝Miriam鏈接了一些仍在進行的傑出討論，我們可以遵循這些討論，以保持最大的態度：

em, i, q {
  font-style: italic;
}

@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

更高級別的自定義屬性，該屬性控制多個聲明＃5624

>

> style（）查詢應該允許！重要標誌嗎？ ＃7413

>將標準屬性的樣式查詢移至級別4＃7185
• >
添加測試設備前奏的能力＃6966

以上是深入挖掘容器樣式查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！