# @container

container query 是 media query 的替代方案：

* media query 是基于 viewport size
* container query 是基于元素的 container size

## 用法

要使用容器查询：在元素上声明 containment context（包含上下文），以便让浏览器知道待会可能想要查询该容器的尺寸。

```css
container-type: size | inline-size | normal;
```

举例：

```css
.post {
    /* 声明包含上下文 */
    container-type: inline-size;
}

/* 定义容器查询（基于具有包含上下文的最近祖先） */
@container (width < 700px) {
}
```

{% tabs %}
{% tab title="HTML" %}

```html
<article class="post">
    <section class="card">
        <h2>Title</h2>
        <p>xxx</p>
    </section>
</article>
```

{% endtab %}

{% tab title="CSS" %}

```css
.post {
    /* 声明包含上下文 */
    container-type: inline-size;
}

.post .card {
    color: green;
}

/* 定义容器查询 */
@container (width < 700px) {
    .post .card {
        color: red;
    }
}
```

{% endtab %}
{% endtabs %}

在容器查询的条件中，可以用：

1. `width`, `height`
2. `block-size`, `inline-size`
3. `aspect-ratio`
4. `orientation`
5. `style()` 实验中

相对于查询容器的长度单位：

1. `cqw`, `cqh`
2. `cqi`
3. `cqb`
4. `cqmin cqi`, `cqmax cqi`

## 命名包含上下文

在上一节中，容器查询是基于“具有包含上下文的最近祖先”应用的样式。

还可以给包含上下文定义一个名字，然后针对特定容器来设置容器查询。

```css
.post {
    container-type: inline-size;  /* 声明包含上下文 */
    container-name: sidebar;      /* 命名 */
    
    container: sidebar / inline-size;    /* 缩写 */
}

/* 定义容器查询，针对特定容器来定义 */
@container sidebar (width < 700px) {
}
```

## 主要参考

* [MDN: docs/Web/CSS/CSS\_container\_queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)
* [MDN: docs/Web/CSS/@container](https://developer.mozilla.org/en-US/docs/Web/CSS/@container)
