虽然年已经过去了三分之一，但是也不妨碍我们来聊一聊，在今年CSS都会新增哪些新特性。其中有些特性已经在主流浏览器中得到了支持，有些还在实验性阶段，但也会随着时间的推移慢慢而来。
本文介绍的内容大多数整理于\
Bramus[1]发表的CSSin[2]，有些在其基础上进行了完善，并增加了相应的实践例子。接下来让我们逐个来了解下吧。容器查询（ContainerQueries）image.png介绍容器查询
container类似于媒体查询media，区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小，容器查询依据的是元素的父元素或者祖先元素的大小。有关容器查询的属性一共有三个，分别是container-type、container-name、container。
container-type：标识一个作为被查询的容器，取值范围为size、inline-size、block-size、style、state
container-name：被查询的容器的名字
container：container-type和container-name的简写
使用方法首先需要使用container-type或者container属性指定一个元素作为被查询的容器。然后使用
container进行容器查询。templatedivid="app"divbutton
click="add"id="add"+/buttonbuttonclick="sub"id="sub"-/button/divdivclass="demo"a我的背景色会随着demo元素的宽度而变化/a/div/div/templatestyle.demo{width:px;height:px;background:red;container:inline-size;}container(inline-sizepx){a{background:green;}}/style复制代码当父元素的宽度为px的时候，背景色是红色的。
image.png当父元素的宽度增加到px的时候，
container查询起到了效果，文字的背景色会变成绿色的。image.png详细的关于每个属性的取值及具体含义，可以参考这里[3]
浏览器支持情况image.png实践使用chrome浏览器，需要手动在chrome://flags页面开启EnableCSSContainerQueries设置。