2022年你所不知道的CSS新特性

虽然2022年已经过去了三分之一，但不妨碍我们聊一聊今年CSS会有哪些新特性。其中一些功能已经在主要浏览器中得到支持，还有一些仍处于试验阶段，但会随着时间的推移慢慢实现。本文介绍的大部分内容均由@Bramus发布的2022年CSS编译而成，并在此基础上进行了一些改进，并增加了相应的实例。接下来，让我们一一了解。容器查询（ContainerQueries）简介容器查询@container类似于媒体查询@media，不同之处在于查询所基于的对象不同。媒体查询基于浏览器视口的大小，容器查询基于元素的父元素或祖先元素的大小。与容器查询相关的属性有3个，分别是container-type、container-name、container。container-type：标识要查询的容器，取值范围为size、inline-size、block-size、style、statecontainer-name：要查询的容器名称container：container-type和container的简写-name方法首先需要使用container-type或者container属性来指定一个元素作为要查询的容器。然后使用@container进行容器查询。当父元素的宽度为200px时，背景色为红色。当父元素的宽度增加到400px时，@container查询就生效了，文本的背景色会变成绿色。各个属性的取值和具体含义可以参考这里的浏览器支持情况。要练习使用chrome浏览器，您需要在chrome://flags页面上手动启用启用CSS容器查询设置。https://code.juejin.cn/pen/70...CascadeLayers介绍有时候当我们想要覆盖组件原有的样式来应用我们自定义的样式时，一般我们会使用优先级较高的样式名来使用override（或者ID选择器或者多层嵌套），有时候还得套用!important，容易造成样式混乱，不好管理。级联层就是为了解决上述问题而诞生的。它可以让CSS样式按照我们定义的级联顺序显示，起到控制不同样式优先级的作用。可以使用@layer定义级联层。如下，我们定义一个级联层，名字为A。当有多个级联层时，我们可以先给所有的级联层命名，然后再逐层添加规则。@layerA,B,C;@layerA{div{背景颜色：红色；}}@layerB{#app{背景色：蓝色；}}@layerC{div{背景色：绿色；}}多个级联层的优先级顺序是后写的优先级高，所以级联层C的优先级最高，即使我们在级联层B中使用了ID选择器。所以最后div会显示绿色背景色。浏览器支持实践https://code.juejin.cn/pen/70...颜色函数（ColorFunctions）CSSColorModuleLevel5新增了两个与颜色相关的函数：color-mix()和color-contrast()，并扩展了之前存在的其他颜色函数（如rgb()、hsl()、hwb()等）的相关语法。在定义颜色之前，我们需要明确指定每个通道的绝对颜色。新规范允许我们首先定义基色，然后在其上执行相对颜色转换。例如：--accent:lightseagreen;--complement:hsl(fromvar(--accent)calc(h+180deg)sl);lightseagreen的hsl(177deg70%41%)，所以转换后的hsl(357deg70%41%)。color-mix()color-mix()可以在给定的颜色空间内将两种颜色混合成一种颜色。它接收3个参数，第一个参数是指定的插值方式，第二个和第三个参数是要混合的颜色值。color-mix(inlch,purple50%,plum50%)color-mix(inlch,purple50%,plum)color-contrast()color-contrast()用于查找给定颜色(一般是比较背景色），输出对比度最高的颜色。在语法上，关键字vs用于区分基色和需要比较的颜色列表。如果有目标对比度阈值设置，则使用关键字to来分隔颜色列表。（目标对比度阈值用于控制对比度值的最小范围。如果存在，将选择第一个超过此阈值的颜色输出，即使它不是列表中对比度最高的那个。）计算对比度时，所有颜色都转换为CIEXYZ颜色空间。然后用下面的公式计算最终的对比度：contrast=(Yl+0.05)/(Yd+0.05)，其中Yl是列表中颜色的明度，Yd是基础色的明度。示例：color-contrast(wheatvstan,sienna,#d2691e,darkgreen,maroontoAA-large)上面的代码比较了wheat和tan,sienna,#d2691e,darkgreen,maroon之间的对比度，并输出第一个超过AA-large(const3)颜色。具体对比方法如下：小麦（#f5deb3），背景，相对亮度0.749tan（#d2b48c）相对亮度0.482，对比度1.501sienna（#a0522d）相对亮度0.137，对比度亮度比4.273#intensityhasrelative0.305andcontrastratio2.249darkgreen(#006400)hasrelativeluminance0.091andcontrastratio5.662通过计算可以看出darkgreen是对比度最高的颜色，但是我们对AA-large有限制，所以sienna会被输出，因为sienna是第一个超过AA-large（常数3）的。浏览器支持伪类选择器：has()简介：has()选择器也可以称为父类选择器，它接受一个选择器组作为参数。有了它，我们可以将一些样式应用于具有匹配子元素的父元素。例如：a:has(span)//只会匹配包含span子元素的a元素：browsersupport实际使用chrome浏览器，需要在chrome上手动开启ExperimentalWebPlatformfeatures设置：//标志页面。https://code.juejin.cn/pen/70...accent-color介绍accent-color属性可以在不改变浏览器默认表单组件的基本样式的情况下，重新设置表单组件的颜色。目前支持的HTML元素有：浏览器支持实践https://code.juejin.cn/pen/70。..媒体查询范围（MediaQueryRanges）介绍媒体查询并不是一个新概念，这次对语法进行了优化。原来通过max-width和min-width实现的，现在可以通过数学运算符>=,<=来实现。与原来的写法相比，新的语法更容易理解。比如实现750px以下屏幕的样式，需要申请@media(max-width:750px)，现在可以直接写@media(width<=750px)。同样，数学运算符的写法也适用于上面介绍的容器查询@container。例子//原创写法@media(max-width:750px){...}@media(min-width:750px){...}@media(min-width:375px)and(max-width:750px){...}//新的写法@media(width<=750px){…}@media(width>=750px){…}@media(375px<=width<=750px){…}结论以上是添加的还是将在2022年添加新的CSS特性，你对哪一个最感兴趣？自己去实践吧~参考2022CSSContainerQueriesGettingStartedWithCSSCascadeLayers一文CSS