Web技术的发展已经不像十几年前，好几年才出一套新技术。现在几乎所有的Web技术都是小步快跑的形式往前发展，HTML Javascript CSS都是如此。CSS标准自从CSS2.1这个正式的版本以后，其实就不再以一整个大版本的形式向开发者推出了，而是以一个个小模块的形式，不断迭代的推出新特性。CSS3虽然是大家都知道的一个CSS版本，但是其实并没有一个完整版本的spec文档存在，它只是一堆独立模块所推出特性的集合。再后来就完全没有CSS版本的概念了。Web技术以快速迭代的方式，不断的往前发展。
另外在兼容性问题上，CSS和Javascript不太一样，Javascript新特性如果老版本浏览器不支持的话，我们可以通过Babel或者各种Polyfill工具来支撑我们使用新特性，但是CSS的新特性很难通过Polyfill或者语法转换的形式来兼容老版本浏览器。所以大家对CSS的新特性往往不太关注，因为对应To C的业务，一般都需要好几年用户设备上的浏览器才能升级到支持的新特性。不过尽管如此，为了保持我们的知识不落后，建议还是关注一下。
咱们就从容器查询新特性开始。
| 属性 | 内容 |
|---|---|
| 特性名称 | 容器查询 |
| 英文名称 | Container Queries |
| 所属CSS模块 | CSS Containment，具体属于CSS Containment Module Level 3 |
| 所属阶段 | Candidate Recommendation阶段（代表经过了广泛的测试和认可，但是还不是正式的CSS标准） |
| 浏览器支持情况 | 截止到2023年大部分主流浏览器均已支持。如果你的客户端不受你控制，那建议目前不要使用该特性。 |
以上内容我们会实时更新。
特性讲解如下。
容器查询 Container Queries这个名字从字面上看挺难看出它的功能的，但是`媒体查询相信大家都了解一些。
所谓媒体查询，就是根据承载信息设备的不同和其属性的限制规则对CSS进行查询，选出特定的CSS，所谓介质就是指打印机、屏幕、语音设备，所谓属性规则就是指设备的宽高、是否横放竖放等。
所谓容器查询，就是根据元素所在父容器的不同尺寸来对元素应用不同的CSS。
不管是媒体查询还是容器查询，其实相当于CSS有了if else的逻辑判断功能。
容器查询和媒体查询的语法对比如下：
容器查询：
@container side-items-container (width < 20px) {
/* 若干样式类*/
}
媒体查询：
@media (width > 800) {
/* 若干样式类 */
}
用中文标示出他们的意义是这样：
@container 容器的名字 (查询条件) {
/* 若干样式类 */
}
