关于前端:2022年你不知道的CSS新特性

尽管2022年曾经过来了三分之一，然而也不障碍咱们来聊一聊，在往年CSS都会新增哪些新个性。其中有些个性曾经在支流浏览器中失去了反对，有些还在实验性阶段，但也会随着工夫的推移缓缓而来。

本文介绍的内容大多数整顿于@Bramus发表的CSS in 2022，有些在其根底上进行了欠缺，并减少了相应的实际例子。接下来让咱们一一来理解下吧。

容器查问（Container Queries）

介绍

容器查问@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进行容器查问。

<template>    <div id="app">      <div>          <button @click="add" id="add">+</button>          <button @click="sub" id="sub">-</button>        </div>        <div class="demo">          <a>我的背景色会随着demo元素的宽度而变动</a>        </div>    </div></template><style>.demo {  width: 200px;  height: 200px;  background: red;  container: inline-size;}@container (inline-size > 300px) {  a {    background: green;  }}</style>

当父元素的宽度为200px的时候，背景色是红色的。

当父元素的宽度减少到400px的时候，@container查问起到了成果，文字的背景色会变成绿色的。

具体的对于每个属性的取值及具体含意，能够参考这里

浏览器反对状况

实际

应用chrome浏览器，须要手动在chrome://flags页面开启Enable CSS Container Queries设置。

https://code.juejin.cn/pen/70...

级联层（Cascade Layers）

介绍

有时候当咱们想要笼罩组件原来的款式来利用咱们自定义的款式时，个别状况下咱们会采纳优先级更高的款式名来进行笼罩（或ID选择器或嵌套很多层），有时候又不得不利用!important ，这样很容易造成款式的凌乱，不好治理。

级联层的诞生就是为了解决上述问题，它能够让CSS款式依照咱们定义好的级联程序展现，起到管制不同款式间的优先级的作用。

应用办法

通过@layer能够定义一个级联层。如下咱们就定义了一个名字为A的级联层。

<template>    <div id="app">hello world</div></template><style>    #app {      width:100px;      height: 100px;    }    // 创立一个名为 A 的级联层    @layer A {      div {        background-color: red;      }    }</style>

当有多个级联层的时候，咱们能够先把所有级联层的名字起好，而后再一一补充规定。

@layer A, B, C;@layer A {  div {    background-color: red;  }}@layer B {  #app {    background-color: blue;  }}@layer C {  div {    background-color: green;  }}

多个级联层的优先级程序为越写在前面的优先级越高，所以级联层C领有最高的优先级，即便咱们在级联层B中应用了ID选择器。所以最初div将展现绿色的背景色。

浏览器反对状况

实际

https://code.juejin.cn/pen/70...

色彩函数（Color Functions）

CSS Color Module Level 5新增了两个无关色彩的函数：color-mix() 和 color-contrast() ，并且扩大了之前存在的其余色彩函数（例如rgb()、hsl()、hwb()等）的相干语法。

之前咱们定义一个色彩，须要明确的指定每一个通道的相对色彩。新的标准容许咱们首先定义一个根底色，而后在它之上进行绝对色彩的变换。比方：

--accent: lightseagreen;--complement: hsl(from var(--accent) calc(h + 180deg) s l);

lightseagreen的hsl(177deg 70% 41%)，因而变换后的hsl(357deg 70% 41%)。

color-mix()

color-mix()能够在给定的色调空间内将两个颜色混合成一个。

它接管3个参数，第一个参数为指定的插值办法，第二个和第三个参数为须要混合的色彩值。

color-mix(in lch, purple 50%, plum 50%)color-mix(in lch, purple 50%, plum)

color-contrast()

color-contrast() 用来查找色彩列表中与给定的色彩（个别为背景色）相比拟，对比度最高的色彩并将其输入。

在语法上，通过关键字vs来辨别须要进行比照的根底色彩与色彩列表，如果有指标对比度阈值设置，则通过关键字to与色彩列表进行分隔。（指标对比度阈值用来管制对比值的最小范畴，如果存在，会选取第一个超出该阈值的色彩输入，即便它不是列表中对比度最高的那个。）

在计算对比度时，会把所有的色彩都转换到CIE XYZ色调空间。而后通过以下公式来计算最终的对比度:

contrast = (Yl + 0.05) / (Yd + 0.05)，其中Yl为列表中色彩的明度，Yd为根底色的明度

举例

讲了这么多概念，上面咱们来举个例子：

color-contrast(wheat vs tan, sienna, #d2691e, darkgreen, maroon to AA-large)

上述代码将wheat与tan、sienna、#d2691e、darkgreen、maroon进行对比度的比拟，输入第一个超出AA-large（常量3）的色彩。

具体的比拟办法如下：

wheat (#f5deb3), the background, has relative luminance 0.749tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273#d2691e has relative luminance 0.305 and contrast ratio 2.249darkgreen (#006400) has relative luminance 0.091 and contrast ratio 5.662

通过计算能够看出，darkgreen是对比度最高的色彩，然而咱们有to AA-large的限度，所以会输入sienna，因为sienna是第一个超出AA-large（常量3）的。

浏览器反对状况

伪类选择器:has()

介绍

:has()选择器也能够叫做父类选择器，它承受一个选择器组作为参数。有了它，咱们能够给有匹配子元素的父类利用一些款式。例如：

a:has(span) // 只会匹配蕴含 span 子元素的 a 元素：

浏览器反对状况

实际

应用chrome浏览器，须要手动在chrome://flags页面开启Experimental Web Platform features设置。

https://code.juejin.cn/pen/70...

accent-color

介绍

accent-color属性能够在不扭转浏览器默认表单组件根本款式的前提下重置表单组件的色彩。目前反对的HTML元素有：

• <input type=”checkbox”>
• <input type=”radio”>
• <input type=”range”>
• <progress>

浏览器反对状况

实际

https://code.juejin.cn/pen/70...

媒体查问（Media Query Ranges）

介绍

媒体查问不是一个新概念，这次在语法上进行了优化。原来通过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新个性，小伙伴们对哪个最感兴趣呢？快去本人实际一下吧~

参考文章

• CSS in 2022
• CSS Container Queries
• Getting Started With CSS Cascade Layers