尽管2022年已经过去了三分之一，但它并不会阻碍我们谈论今年将添加哪些新功能。这些特征中有些在主流浏览器中得到了支持，有些人仍处于实验阶段，但它们将会随着时间的流逝慢慢来。
@bramus在2022年的CSS中进行了整理，@bramus已在其上进行完善并添加了相应的练习示例。
引入集装箱查询类似于媒体查询。区别在于对象与基于基础的对象不同。介质查询基于浏览器窗口的大小，并且容器查询基于元素的父元素或祖先元素的大小。
有关容器查询的三个属性，它们是...
：制作一个容器作为查询，值的范围为...
：查询容器的名称
：和谐的简短方面
首先使用的方法需要将元素指定为查询容器。然后使用容器查询。
当父元素的宽度为红色时，背景颜色为红色。
当父元素的宽度增加时，查询会产生效果，文本的背景颜色将变为绿色。
对于每个属性的详细价值和特定含义，您可以在此处参考
浏览器支持
实践使用浏览器，需要在页面上手动打开。
https://code.juejin.cn/pen/709646734268715021
有时，当我们想覆盖组件的原始样式以应用我们的自定义样式时，我们将使用更高的优先级样式覆盖（或ID选择器或嵌套许多层）。很容易引起风格混乱和难以管理。
CO -LAYER类的诞生是解决上述问题。它允许CSS样式以我们定义中类的顺序显示，以控制不同样本之间的优先级。
使用方法可以定义链接的类。如下所示，我们定义了带有名称的等级联合层。
当有多个对联时，我们可以首先设置所有级别对联的名称，然后一一逐一补充规则。
多个耦合的优先级顺序是优先级越高，优先级越高，因此即使我们在co -layer类中使用了选择器，级别对联的优先级也越高。
浏览器支持
练习https://code.juejin.cn/pen/7093816225150533640
CSS颜色模块级别5添加了两个与颜色相关的功能：和谐，并扩展了先前存在的其他颜色函数（例如，等）的相关语法。
在定义颜色之前，我们需要清楚地指定每个通道的绝对颜色。新规范允许我们先定义基本颜色，然后在其上转换相对颜色。例如：例如：
结果，在转换之后。
Color-Mix（）可以在给定的颜色空间中将两种颜色混合到一种颜色中。
它接收3个参数，第一个参数是指定的插值方法，第二和第三参数是需要混合的颜色值。
与给定颜色（通常背景颜色）相比，颜色对比度（）用于查找颜色列表的颜色，该颜色具有最高的对比度并输出。
就语法而言，需要通过关键字比较的基本颜色和颜色列表。如果有目标比较阈值设置，则关键字与颜色列表分开（目标对比阈值用于控制比较值的最小范围。即使不是列表中对比度最高的人。）
计算对比度时，所有颜色都将转换为CIE XYZ颜色空间。然后通过以下公式计算最终对比度：
例如，如此多的概念，让我们举一个例子：
上述代码将与... ，，，，输出超过的第一种颜色（常数3）进行比较。
具体比较方法如下：
可以通过计算可以看出它是最对比度的颜色，但是我们有限制，因此我们会输出，因为第一个超过了（常数3）。
浏览器支持
介绍选择器也可以称为父级选择器，该子选择器接受选择器组作为参数。与之，我们可以在带有匹配元素的父类中应用一些样式。例如：
浏览器支持
实践使用浏览器，需要在页面上手动打开。
https://code.juejin.cn/pen/709463883666221069
引言属性可以重置表单组件的颜色，而无需更改浏览器的默认表单组件基本样式。当前的支持元素是：
浏览器支持
练习https://code.juejin.cn/pen/70855623907270690
介绍媒体询问不是一个新概念，这次是在语法中进行了优化的。它可以通过数学运算符来实现。样式，有必要应用它，现在可以直接编写。
同样，数学运算符的写入也适用于上面介绍的容器查询。
举个例子
以上是已在2022年添加或即将添加的新功能。哪个朋友最感兴趣？
本文的原始作者欢迎留言。
原始：https：//juejin.cn/post/7103409377821851662