一個新的容器查詢多填充，恰好有效

改變遊戲的集裝箱查詢多填充物已經到來，在瀏覽器之間提供了無縫的兼容性。由Chrome開發的這種多文件可確保直接實現：有條件地將其加載到缺乏本機支持的瀏覽器，使用標準容器查詢語法編寫CSS，並享受完美的功能。

這種用戶友好的多填充可顯著簡化開發，與諸如CQFILL之類的較早解決方案形成鮮明對比，CQFILL需要其他CSS和PostCSS處理。

這是加載多填充以進行輕量級集成的方法：

 //支持測試
const supportSuptionScontainerqueries = document.documentElement.Style中的“容器”;

//有條件導入
如果（！supportScontainerqueries）{
  導入（“ https://cdn.skypack.dev/container-query-polyfill”）;
}

NPM是另一個選擇，但是此方法使事物簡化。

使用容器查詢需要圍繞樣式內容的包裝元素。您無法直接查詢您的樣式元素。例如，考慮一個天氣小部件：

<div class="weather-wrap">
  <dl>
    <div>
      <dt>星期日</dt>
      <dd>
<b>26°</b> 7°</dd>
    </div>
    <div>
      <dt>週一</dt>
      <dd>
<b>34°</b> 11°</dd>
    </div>
  </dl>
</div>

包裝器被定義為容器：

 .weather-wrap {
  容器：內線大小 /天氣 - 帶;
  /* 或者： */
  /*容器類型：內聯尺寸； */
  /*容器名稱：Weather-Wrapper; */

  / *可選：調整測試大小 */
  /*調整大小：兩者; */
  /*溢出：隱藏； */
}

然後應用全球和容器劃分的樣式：

 。天氣 {
  顯示：Flex;
}
@Container Weather-Wrapper尺寸（最大寬度：700px）{
  。天氣 {
    撓性方向：列；
  }
}

提供了一個更全面的演示，可以提供帶有天氣小部件的多填充的演示（鏈接到輸入中未提供的演示）。 Bramus的博客還具有有用的卡片示例。

瀏覽器支持和考慮：

由於依賴ResizeObserver ， MutationObserver和:is() ，多填充物支持Chrome/Edge 88，Firefox 78和Safari 14。雖然多填充文檔詳細介紹了較小的限制，但核心用例已完全涵蓋。

有了官方的規格草稿狀態和Chrome的範圍支持，預計將提供廣泛的瀏覽器支持。但是，確切的時間表仍然不確定。

Polyfill的小尺寸（約2.8kb）使其成為忽略不計的開銷，可能會驅動增加的容器查詢。

未風格的內容（FOUC）的閃光燈：

多填充的異步性質引入了潛在的fouc。在緩解此問題的同時，需要延遲渲染（通常是不希望的），但簡短的FOUC比內容延遲更可取。一旦本機瀏覽器支持變得無處不在，該問題將自我解決。

今天使用這種強大的多填充物來包含容器查詢的力量！分享您自己的演示和經驗。

以上是一個新的容器查詢多填充，恰好有效的詳細內容。更多資訊請關注PHP中文網其他相關文章！