这么香的技术还不快点学起来英文，详解16个CSS新特性（2024最新版-上，真牛皮

本文链接：https://blog.csdn.net/2301_82101171/article/details/137523205

Demo: https://codepen.io/airen/full/yLMLKyo

注意，在空元素上即使使用伪元素 ::before 或 ::after 创建内容，也能被:empty 识别。

:blank 要比 :empty 灵活地多，只要该元素中无任何子元素都能被识别。

不过 W3C 规范对该伪类选择器的定义更趋向于作用到表单控件中，比如用户没有在 input 或 textarea 中输入内容时，提交表单能被识别到。有点类似于表单验证的功能。

早在 2018 年 Zell Liew 在推特上就针对 :empty 和 :blank 做过相关的讨论，并发表一了篇有关于这方面的博文《:empty and :blank》：

到目前为止，:empty 已得到主流浏览器支持，可以用于实际生产中，但 :blank 伪类选择器还是存在一定的争议的。

▐ :focus-visible 和 :focus-within

CSSer 对于 :focus 应该不会感到陌生，早期对于可聚焦元素可以使用 :focus 来给元素设置焦点状态下的 UI 风格，即焦点环样式：

Chrome 86 开始，另外引入了 :focus-visible 和 :focus-within 两种伪类选择器来帮助我们更好的控制 UI 焦点环的样式：

虽然 :focus 、:focus-within 和 :focus-visible 都可以用来设置焦点环的样式，但他们之间还是有一定的差异：

:focus ：当用户使用鼠标点击焦点元素或使用键盘的 Tab 键（或快捷键）触发焦点元素焦点环的样式
:focus-visible ：只有使用键盘的 Tab 键（或快捷键）触发焦点元素焦点环的样式。如果仅使用 :focus-visible 设置焦点环样式的话，那么用户使用鼠标点击焦点元素时不会触发焦点环样式
:focus-within：表示一个元素获得焦点，或该元素的后代元素获得焦点。这也意味着，它或它的后代获得焦点，都可以触发 :focus-within

来简单的看一个示例：

button:focus {

outline: 2px dotted #09f;

outline-offset: 2px;

}

button:focus-visible {

outline: 2px solid #f36;

outline-offset: 2px;

}

你会发现，分别使用鼠标点击按钮和按Tab 让按钮获得焦点时焦点环样式效果不同：

不过需要注意的是，:focus 和 :focus-visible 也会涉及到选择器权重的问题，就上面的示例来说，如果我们把 :focus 选择器对应的样式放置到 :focus-visible 之后：

button:focus-visible {

outline: 2px solid #f36;

outline-offset: 2px;

}

button:focus {

outline: 2px dotted #09f;

outline-offset: 2px;

}

这个时候，你会发现不管用户使用键盘 Tab 键还是鼠标让获得焦点时，焦点样式都会采用 :focus 对应的样式：

如果我们要让 :focus 和 :focus-visible 可以有独自的样式，可以借助CSS选择器中的 :not() 来处理：

button:focus:not(:focus-visible) {

outline: 2px dotted #416dea;

outline-offset: 2px;

box-shadow: 0px 1px 1px #416dea;

}

button:focus-visible {

outline: 2px solid #416dea;

outline-offset: 2px;

box-shadow: 0px 1px 1px #416dea;

}

这个时候按 Tab 键盘和鼠标点击时焦点环样式就有相应的差异：

Demo: https://codepen.io/airen/full/YzGdoLq

或许你想到这样的场景了，如果你在做 A11Y 方面的优化，希望在移动端和PC端上对焦点元素设置不同的焦点环样式，那用上面这种方案来说就会非常的灵活。

对于 :focus-within 而言，它其实有点类似于 :has() 伪类选择器，可以在子元素得到焦点时，触发父元素：

上图描述了 :focus-within 和 :focus 之间的差异。更简单的说，它有点类似于 JavaScript 的事件冒泡，从可获得焦点元素开始一直冒泡到HTML的根元素，都可以接收触发 :focus-within 事件。比如：

.box:focus-within,

.container:focus-within {

box-shadow: 0 0 5px 3px rgb(255 255 255 / 0.65);

}

body:focus-within {

background-color: #2a0f5bde;

}

html:focus-within {

border: 5px solid #09f;

}

复制代码

Demo: https://codepen.io/airen/full/JjRxoLE

借助于 :focus-within 伪类选择器的特性，我们就可以让一些交互效果变得更为简单，比如下面这个示例，使用 :focus-within 就可以实现，不再需要任何 JavaScript 代码：

Demo: https://codepen.io/airen/full/KrPLmV

有了 :focus 、:focus-visible 和 :focus-within 会让我们更好的管理焦点元素在焦点状态下焦点环的 UI 效果。

在 CSS 的世界中，除了这里提到的伪类选择器之外，还有很多其他的伪类选择器（或伪元素），比如 ::marker 、:in-range 、:out-of-range 。

如果你感兴趣的话，可以尝试着使用 :in-range 、:out-of-range 给一些 input (比如 type 为 number、range 的 input 元素，他们都有 min 和 max 属性的设置) 在用户输入范围值和非范围值时，提供不同的 UI 效果。

CSS 颜色

CSS 颜色模块自从 Level 4 开始，除了新增了一些新的函数值，比如 hwb()、lch()、lab() 、color-mix() 、 color-contrast() 和 color() 之外，对原本的 rgb() 、hsl() 以及 #rrggbb 等颜色值定义语法规则也做出调整。

比如，原本我们熟悉的描述颜色值的方式：

#09f

#90eafe

rgb(123, 123, 123)

rgba(123, 123, 123, .5)

hsl(220, 50%, 50%)

hsla(220, 50%, 50%, .5)

都有了新的语法规则，特别是对于 rgb()、rgba() 、hsl() 和 hsla() ，以往用逗号（,）作为分割符，现在可以直接使用空格做分割符，并且rgb() 和 hsl() 函数在第三个值和第四个值之间加上 / 可以取替 rgba() 和 hsla() ：

另外，十六进制描述颜色，也可以在原本的语法规则中最后两位添加新的位值来描述透度明。比如 #rrggbbaa 或 #rgba 。在Chrome 浏览器代码审查器中，已经可以看到这种语法规则的身影了：

也就是说，我们现在可以这样来描述颜色值：

#hex-with-alpha {

color: #0f08;

color: #00ff0088;

}

#functional-notation {

color: hsl(0deg 0% 0%);

color: hsl(2rad 50% 50% / 80%);

color: rgb(0 0 0);

color: rgb(255 255 255 / .25);

}

#lab-and-lch {

–ux-gray: lch(50% 0 0);

–rad-pink: lch(50% 200 230);

–rad-pink: lab(150% 160 0);

–pale-purple: lab(75% 50 -50);

}

另外，我们现在描述颜色都是在sRBG 色值空间，而颜色色值空间是一个复杂的体系，除了 sRGB 之外还有其他的色值空间，比如说 LCH：

正如上图所示，LCH 颜色空间的颜色数量要比 sRGB 颜色空间的多，而且描述的颜色更为细腻。

如上图所示，可以在color() 函数中指定颜色空间：

#color-function {

–rad-pink: color(display-p3 1 0 1);

–rad-pink: color(lab 50% 150 -50);

–rad-pink: color(srgb 100% 0% 50%);

}

注意，使用了color() 函数指定颜色空间除了要考虑该函数支持度（浏览器的兼容性）还需要考虑硬件设备对颜色空间的支持度。

在 CSS 中可以借助媒体查询 @media 来做相应的判断，比如下面的示例，如果终端设备支持的话，就会采用指定颜色空间的色值：

@media (dynamic-range: high) {

.neon-pink {

–neon-glow: color(display-p3 1 0 1);

}

.neon-green {

–neon-grow: color(display-p3 0 1 0);

}

更为强大的是 CSS 颜色模块 Level 5 版本，对颜色函数能力做了进一步的扩展。比如，可以在 rgb()、hsl() 、hwb() 、lab() 和 lch() 函数基础上添加 from 关键词，实现基于一个颜色的基础上，只对某个参数做调整：

rgb() = rgb([from ]? {3} [ / ]? ) | rgb([from ]? {3} [ / ]? )

hsl() = hsl([from ]? [ / ]? )

hwb() = hwb([from ]? [ / ]? )

lab() = lab([from ]? [ / ]? )

lch() = lch([from ]? [ / ]? )

复制代码

来看一个 hsl() 的示例：

上图展示的是，基于 --theme-primary （原色，即 hsl(274, 61%, 50%)）颜色只对l 参数做调整，从 50% 调整到 30% ，从而获得一个新的颜色，即 hsl(274, 61%, 30%) 。使用这样的方式，我们就可以很轻易的获取基于某个颜色参数改变得来的颜色面板：

除此之外，颜色模块 Level 5 版本还新增了一些新的函数用来描述颜色，比如 color-mix() 、color-contrast() 、color-adjust() 等：

.color-mix {

–pink: color-mix(red, white);

–brand: #0af;

–text1: color-mix(var(–brand) 25%, black);

–text2: color-mix(var(–brand) 40%, black);

}

.color-contrast {

color: color-contrast(

var(–bg)

black, white

);

}

–text-on-bg: color-contrast(

var(–bg-blue-1)

var(–text-subdued),

var(–text-light),

var(–text-lightest)

);

.color-adjust {

–brand: #0af;

–darker: color-adjust(var(–brand) lightness -50%);

–lighter: color-adjust(var(–brand) lightness +50%);

}

简单介绍一下这几个颜色函数。其中 color-mix() 函数接受两个值，并在给定的颜色空间中以指定的数量返回它们混合的结果。如果没有特殊说明，否则在 lch() 颜色空间中进行混合。比如下图所展示的就是在lch() 颜色空间（默认）中将 red 和 yellow 混合，每个 lch 通道的红色值占65%，黄色值占 35%，即 color-mix(red yellow 65%) ：

color-contrast() 函数很有意思，它可以帮助我们提高Web可访问性方面的能力。其主要作用是获取一个颜色值，并将其与其他颜色值的列表进行比较，从列表中选择对比度最高的一个。

比如 color-contrast(white vs red, white, green) ，分别会拿 red 、white 和 green 与 white 对比，其中 green 与 white 对比度最高，最终会取 green 颜色：

color-adjust() 函数可用来在给定颜色空间中通过指定的变换函数对该颜色进行调整，除非另有规定，否则调整是在 lch() 色彩空间中进行的。比如 color-adjust(#0af lightness +50%) 是颜色 #0af 在 lch 颜色空间中高度增加 50% 。

也就是说，在不久的未来，这些颜色函数可以很好的帮助我们控制Web中的颜色值。因为这些颜色函数都已成为主流浏览器的实验性属性，特别是 Safari 浏览器，对这方面的支持度要高于 Chrome 和 Firefox 浏览器。

CSS 背景

CSS 的 background 属性是一个简写属性，这个对于大家来说再熟悉不过了。不过在这里着重想把 background-position 和 background-repeat 单独拿出来和大家聊聊。你可能会问，这两个属性又不是什么新属性了，有什么值得聊的呢？其实未必，这两个属性虽然老，但有几个小细节对于很多开发者来说还是会感到陌生的。咱们先从 backgroundd-position 开始。

▐ background-position

background-position 主要是用来指定背景图片在容器中的位置。大家较为熟悉的是，背景图片左上角（顶点）相对于容器左上角计算，如下图所示：

不过，有的时候，希望背景图片能相对于容器右侧边缘或底部边缘计算，比如下图：

要让背景图片距离容器右侧边缘和底部边缘都是 50px 。针对这样的场景，你或许首先会想到使用容器大小和背景图片大小进行计算，得出距离顶部和左侧边缘的距离，然后将计算出来的值运用于 background-position 中。当然，熟悉 CSS 的同学或许会想到使用 calc() 函数：

:root {

–xPosition: 50px;

–yPosition: 50px;

}

.container {

background-position: calc(100% - var(–xPosition) calc(100% - var(–yPosition)))

}

使用 calc() 动态计算要比通过容器和背景图片尺寸大小计算方便得多。

事实上呢？background-position 提供了另一种特性，我们可以通过关键词 top 、right 、bottom 和 left 来指定方向。比如我们熟悉的用法：

background-position: 50px 50px;

// 相当于

background-position: top 50px left 50px;

那么，我们要实现上图的效果，就可以使用 right 和 bottom 关键词，让事情变得非常简单：

:root {

–xPosition: 50px;

–yPosition: 50px;

}

.container {

background-position: right var(–xPosition) bottom var(–yPosition);

}

最终效果如下：

Demo: codepen.io/airen/full/…

注，示例中左侧是使用 calc() 计算的效果，右侧使用的是关键词实现的效果。

background-position 使用还有一个小细节需要注意，即 background-position 采用百分比值。因为使用百分比值的 background-position 计算会相对于其他单位值复杂：

正如上图所示，背景图片原始尺寸是 100px x 100px ，容器的尺寸（使用该背景图片的元素）是 410px x 210px ，如果使用 background-position: 75% 50% 时，它的计算如下：

// background-position的x轴坐标

x = (容器宽度 - 背景图片宽度) x background-position的x坐标的百分比值 = (410 - 100) x 75% = 232.5px

// background-position的y轴坐标

y = (容器高度 - 背景图片高度) x background-position的y坐标的百分比值 = (210 - 100) x 50% = 55px

就该示例而言，background-position: 75% 50% 就相当于 bacckground-position: 232.5px 55px。

注意，如果我们把 background-size 和 background-position 取百分比值场景结合起来使用的时候，会让事情变得更为复杂，特别是background-size取值为cover 或contain 更会让你感到蛋疼。为什么会这样呢？这已经超出来这篇文章所要探讨的话题，如果你感兴趣的话，可以以此为课题，深入探讨一下。

▐ background-repeat

在 background-repeat 属性上除了可以使用我们熟悉的 no-repeat 和 repeat (或者 repeat-x 和 repeat-y) 之外还可以使用 round 和 space 。

我们都知道，使用 repeat 的时候，有可能会造成背景图片在平铺的时候被裁剪。如果希望背景图片在平铺时不被剪切，那么可以使用 round 来替代，它的最大特色就是背景图片在平铺的时候会根据容器的宽高对背景图片做相应的尺寸调整。而 space 会留出相应的空间，即在保证背景图片不被裁剪的情况之下，对多出来的空间以空白的方式在背景图片之间留出。