集裝箱風格查詢的初期

>容器查詢仍處於起步階段，缺乏廣泛的瀏覽器支持。 儘管Chromium已經支持他們，但Safari的支持始於16版，而Firefox的實施很快就會。 早期討論通常會在容器查詢和媒體查詢語法之間引起相似之處。 考慮以下示例：

兩個示例目標

<code>/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}</code>

。 但是，介質查詢對視口寬度有反應，而容器查詢響應

<code>/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}</code>

>元素的計算寬度。

。 在此基礎上，CSS封裝模塊3級規格介紹了min-width: 600px.posts容器樣式查詢

，允許查詢容器的計算樣式。 該規格將它們描述為單個樣式特徵的布爾組合，每個特徵都查詢特定屬性。 語法，鏡像CSS聲明，如果計算屬性值匹配指定值（也相對於容器計算），則評估為true，未知是否無效或不支持，否則為false。 布爾邏輯類似於CSS特徵查詢（

）。 > 一個假設的例子：@supports

請注意，

（或它的缺席）是暗示的；所有容器查詢默認情況下（當前）成為樣式查詢。 Miriam Suzanne的作品通過這種方法強調了潛在的挑戰。

<code>.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}</code>

查詢容器樣式的實際應用仍在出現，但潛在用途包括：

container-type: style

自定義屬性值：

對用作狀態指標的自定義屬性的更改做出反應。

• 暗模式實現：基於身體背景的切換調色板更改。
• 複雜的查詢條件：結合尺寸和样式條件。
• >容器樣式查詢還可以解決樣式複雜性，例如在斜體化塊中覆蓋斜體文本：>

以上是集裝箱風格查詢的初期的詳細內容。更多資訊請關注PHP中文網其他相關文章！