讲解 CSS At Rules 容器查询 — @container

前言

什么是 At 规则 ？

一个 CSS 语句，用来指示 CSS 如何运行, 它以 at 符号 @ 开头，后跟一个标识符，直到包括下一个分号的所有内容或下一个 CSS 块，先到者为优先匹配。比如我们比较熟悉的 媒体查询 @media 查看详情

  /* 移动端响应布局 */
  @media (min-width: 300px) {  
    body{
      font-size: 18px
    } 
  } 
  
  @media (min-width: 600px) {  
    body{
      font-size: 20px
    } 
  }
  
  @media (min-width: 960px) { 
    body{
      font-size: 22px;
    } 
  }
  
  @media (min-width: 1200px) { 
    body{
      font-size: 24px;
    } 
  }
  

什么是 容器查询 ？

容器查询 即 @container 规则，它可以使你能够根据元素容器不同的大小尺寸，对其内部元素进行特定样式的设置和布局。例如：如果容器在周围的上下文中可用的空间很少，你可以隐藏某些元素或使用较小的字体。

与 媒体查询 什么区别？

• @media 关注匹配的是浏览器窗口尺寸 (视区大小)
• @container 关注匹配的是父容器元素尺寸

往往组件样式是需要根据父容器尺寸进行不同的适配和布局，但由于媒体查询的局限性，以往通常通过 JavaScript 介入来完成此类需求。但有了容器查询以后，这个问题就可以通过 CSS @container 完美解决，Good！

所以业界有这样说法，@media 媒体查询适用于宏观布局，@container 容器查询适用于微观布局。

容器查询

容器查询单位 Query Units

随着 CSS 容器查询一起出现的是 CSS 容器查询单位，它指定相对于查询容器维度的长度。单位主要有：cqw、cqh、cqi、cqb、cqmin和cqmax。

从某种程度上讲，容器查询单位和媒体查询单位语法和含义是一致的，只是一个是相对于容器尺寸，另外一个是相对于视区尺寸

单位说明

单位	说明
cqw	表示容器查询宽度占比，1cqw 等于容器宽度的 1%
cqh	表示容器查询高度占比，1cqh 等于容器高度的 1%
cqi	表示容器查询内联方向尺寸占比。默认情况下，Inline-Size指的就是水平方向，对应的是宽度，因此，1cqi 通常可以看成是容器宽度的 1%
cqb	表示容器查询块级方向尺寸占比。默认情况下，Block-Size指的就是垂直方向，对应的是高度，因此，1cqb 通常可以看成是容器高度的 1%
cqmin	表示容器查询较小尺寸的占比，例如容器尺寸是 300px * 500px，则 100cqmin 对应的是尺寸较小的宽度 300px
cqmax	表示容器查询较大尺寸的占比，例如容器尺寸是 300px * 500px，则 100cqmax 对应的是尺寸较大的高度 500px

代码范例演示

浏览器兼容性

目前在主流浏览器环境中兼容性良好（除IE外）

容器尺寸查询 Size Queries

容器查询中的大小查询提供了一种查询容器大小的方法，并有条件地将CSS应用于该容器的内容。

CSS 属性定义

要使用容器查询，你需要在元素上声明一个局限上下文(即定义父容器)，以便浏览器知道你可能希望稍后查询此容器的尺寸。为此需要使用 container 属性 (container-type 和 container-name)

• container-type

  • 值为 size 时，查询基于容器行向和块向尺度，将布局、样式和大小的限制应用于容器元素，同时会给元素应用 contain: layout style size 样式（了解 contain）

  • 值为 inline-size 时，查询基于容器行向尺度，将布局、样式和大小的限制应用于容器元素，同时会给元素应用 contain: layout style inline-size 样式（了解 contain）

  • 值为 normal 时，该元素不是任何容器尺寸查询的查询容器，但仍然是容器样式查询的查询容器

• container-name

  为局限上下文命名，可以在 @container 查询中使用该名称以选择特定容器。这个属性在页面中存在多个容器元素的时候很有用

• container

  container-name 和 container-type 的简写方式，格式 container-name/container-type

CSS 查询使用

  <style type="text/css">
    .container {
      /* conatiner: sidebar/inline-size; // 简写方式 */
      container-type: inline-size;
      container-name: sidebar;
    }
   
    /* 容器尺寸查询 */
    @container sidebar (min-width: 700px) {
      /* stylesheet */
    }
  </style>

代码范例演示

浏览器兼容性

目前在主流浏览器环境中兼容性良好（除IE外）

容器样式查询 Style Queries

容器查询中的样式查询提供了一种查询容器当前样式的方法，并有条件地将额外的CSS应用于该容器的内容。

CSS 查询使用

  <style type="text/css">
    .container {
      display: flex;
      container-type: inline-size;
      container-name: style-queries;
    }
   
    /* 容器样式查询 */
    /* 目前暂不支持 style(dispaly: flex) */
    /* 需要魔改下，在代码范例中有具体的示范 */
    @container style-queries style(dispaly: flex) {
      /* stylesheet */
    }
  </style>

代码范例演示

浏览器兼容性

目前在主流浏览器环境中兼容性有待提高。根据提示，谷歌浏览器可能需要打开 chrome://flags，启用 Experimental Web Platform features