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;
  }
}

使用前先对元素定义容器属性containercontainer-namecontainer-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

上一篇: