CSS container容器查询

这篇文章发布于

由 DeathGhost 编辑， 归类于 css » 当前评论 0 条。

@container规则是CSS 根据指定容器尺寸发生变化时，在满足条件的情况下设置其内部元素样式。如同@media一般，不同的是@container针对容器元素，而@media针对的是浏览器窗口。

根据规则字面意思，页面整体结构布局响应继续交给@media去处理，我们可以通过@container处理元素（组件模块）内部响应样式。

@media screen and (max-width: 1024px){
  // ...
}

页面布局过程中，@media可以根据其浏览器窗体大小处理页面整体样式响应；但某些场景下，子元素若想响应也得继承这个条件，多少会略显勉强。

所以下面就看看这个CSS @container 容器查询。

CSS container容器查询
CSS container容器查询

CSS container容器查询示例

示例：当宽度超过400像素时，文本样式变更及隐藏元素显示。

使用方法和其他规则类似。

示例代码如下：

<div class="demo_container_wrap">
  <div class="container">
    <h1>新码笔记</h1>
    <p>http://www.deathghost.cn</p>
    <p>By DeathGhost</p>
    <p><mark>光标移到边框右下角横向拖动查看效果。</mark></p>
  </div>
</div>
.demo_container_wrap {
  resize: horizontal;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  padding: 1em;
  outline: 2px #999 dashed;
  overflow: hidden;
  font-weight: normal;
  text-align: center;
}
.demo_container_wrap .container {
  /* container-name: test; */
  container-type: inline-size;
  /* container: test / inline-size; */
}
.demo_container_wrap .container h1{
  font-size: 1.5em;
}
.demo_container_wrap .container p:last-of-type{
  display: none;
}
@container (min-width: 400px) {
  .demo_container_wrap .container h1 {
    font-weight: bold;
    font-size: 2em;
    color: orange;
  }
  .demo_container_wrap .container p {
    color: #999;
  }
  .demo_container_wrap .container p:last-of-type{
    display: block;
  }
}

使用方法

// @media
@media (hover: hover) {
  abbr:hover {
    color: limegreen;
    transition-duration: 1s;
  }
}

@media not all and (hover: hover) {
  abbr::after {
    content: ' (' attr(title) ')';
  }
}
// @container
@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

使用前先对元素定义容器属性container（container-name 与 container-type），由于 container-type 默认值 normal，不执行容器查询，所以，需要定义类型（size: 水平与垂直方向 / inline-size: 水平方向）。

container-type: normal;
container-type: size;
container-type: inline-size;

同时对元素设置resize属性(控制一个元素的可调整大小)，进行测试。

示例代码：当宽度超过'400px'时，@container 中的样式将会应用在所定义得属性元素上。

.container{
  container-type: inline-size;
}
@container (min-width: 400px){
  // 
}

容器上下文关联

container-name的使用，当页面存在多个不同的@container定义时，可以使用container-name对其命名关联。

// nav
container-name: nav;
// content
container-name: content;
@container nav (min-width: 400px){
  // ...
}
@container content (min-width: 400px){
  // ...
}

container 属性简写语法

container: <name> / <type>
container: nav / inline-size;
// 等同于
container-name: nav;
container-type: inline-size

容器查询逻辑关键字

and / or / not 可定义条件

@container not (width < 400px) {
  /* <stylesheet> */
}

@container (width > 400px) and (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) not (height > 400px) {
  /* <stylesheet> */
}

最后就是兼容性问题，现代浏览器最新版基本支持，具体可参考caniuse。

CSS @container规则 @container容器查询 container-name container-type CSS 容器响应 CSS 容器尺寸变更 布局响应 @media resize

上一篇：