关于前端: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.749
tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501
sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273
#d2691e has relative luminance 0.305 and contrast ratio 2.249
darkgreen (#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