一个新的容器查询多填充，恰好有效

改变游戏的集装箱查询多填充物已经到来，在浏览器之间提供了无缝的兼容性。由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中文网其他相关文章！