堪比 ES6 的史诗级升级，2023 年度 CSS 牛逼闪闪的新特性！

大家好，这里是大家的林语冰。

“鸡娃”是网络流行词，指的是监护人给被监护人“打鸡血”，持续裹挟后者去内卷的人类迷惑行为。鸡娃中的卷王，又被称为“牛蛙”。

从 JS 1.0 开始，“JS 之父”和后来的 TC39 技术委员会就不断给 JS 打鸡血，疯狂加入各种新功能。其中最赫赫有名的版本升级当属 ES6/ES2015。

从 ES5 到 ES6，虽然只是 JS 的 1 个主版本升级，但练习时长却高达整整 6 年，增量更新的功能特性数不胜数，所以 ES6 说是 JS 的“牛蛙时刻”名副其实。举一反一，2023 对 CSS 生态而言，也是一个极具里程碑意义的“牛蛙时刻”。

谷歌官网贴心地列举了 CSS 2023 的诸多年度重量级更新，主要包括了 6 大分类的新功能：

1. 架构基础
2. 排版
3. 颜色
4. 自适应设计
5. 交互
6. 组件

其中，每个模块又细分若干具体的 CSS 新语法，既有最新推出、适用于主流浏览器的所有稳定版功能，也有主流浏览器仅部分兼容的实验性特性。

在本文中，我会科普一下 3 个个人觉得牛逼闪闪的 CSS 新功能，包括但不限于：

1. 架构基础：CSS 嵌套
2. 排版：首字母跨行
3. 颜色：相对颜色语法

1. CSS 嵌套

地球人都知道，CSS 全称 Cascading Style Sheets（层叠样式表），元素应用的样式由继承和层叠的选择器优先级决定。

在实际开发中，我们通常需要组合父级规则和后代选择器规则辅助定义样式，这往往产生了一大坨重复父级规则的“代码屎山”。

举个栗子，当我们在定义一只可爱猫猫头的样式时，就可能会反复组合父级选择器，如下所示：

.head {
  /* 猫猫头部整体样式 */
}

.head .eye {
  /* 猫猫头部水汪汪的大眼睛 */
}

.head .mouth {
  /* 猫猫头部可爱的嘴巴 */
}

如你所见，这样写的好处在于样式的继承和层叠比较直观，同时可以按需灵活定义局部样式的优先级。

但是问题在于，我们需要反复编写父级规则，比如上述代码就多次使用 .head 类选择器，冗余代码明显增加。为了搞定这个痛点，SCSS/Less 等 CSS 预处理器中人气爆棚的功能之一是，支持嵌套的样式语法。

嵌套的代码风格类似于我们使用了不同的方式背诵圆周率：

// 以前
3.14 ...
3.1415 ...
3.141592 ...

// 以后
3.14 ...
-> 15 ...
-> -> 92 ...

他山之石，可以攻玉。如今，CSS 也效仿 SCSS/Less 等 CSS 预处理的语法精华，原生内置支持 & 嵌套选择器，使得样式继承和层叠的结构更加直观，同时可以精简冗余的代码量。

举个例子，我们可以使用 & 嵌套选择器重构上面的可爱猫猫头样式，如下所示：

/* 猫猫头部整体样式 */
.head {
  /* 猫猫头部水汪汪的大眼睛 */
  & .eye {
  }
  /* 猫猫头部可爱的嘴巴 */
  & .mouth {
  }
}

如你所见，使用 & 嵌套选择器重构之后，我们有且仅有使用了 1 次数 .head 类选择器，不再需要反复组合。

CSS 嵌套选择器可以辅助我们减少重复选择器的需求，同时还能将相关层级元素的样式规则集中在一起。

2. 首字母跨行

在文本创意排版中，首字母跨行膨胀是一个常见的需求，但一直没有一个精简的解决方案。

举个栗子，假设我们期望实现的文本排版效果如下所示：

针对上述需求，目前比较普遍的解决方案是，诉诸 ::first-letter 伪元素来实现。但是，这种解决方案也有痛点，在计算第一个字母尺寸的时候，比如跨多少行、如何偏移和对齐时，可能还需要结合 float 等属性或 1h 等 CSS 新单位来微调。

上述实现的 bug 在于，首字母是直接撑开文本的第一行，但有时我们可能期望首字母垂直占据段落的前两三行，而不是直接撑开首行。

现在，CSS 支持全新的 initial-letter 属性，我们可以更精准地实现文本首字母跨行效果。

initial-letter 属性接受两个值：

1. 第一个参数定义字体大小和占用行数。字母会保持宽高比放大，禁止使用负值，但允许使用小数值。
2. 第二个参数可以视为字母所在位置的偏移量，可写可不写，禁止为负数。

举个栗子，我们可以使用 initial-letter 重构上述需求，效果如下所示：

如你所见，这次我们的首字母就不会直接撑开第一行文本，而是垂直占位。

3. 相对颜色语法

在 UI 设计理论中，颜色搭配可以说是永恒的主题、设计的灵魂。

举个栗子，不知道大家有没有想过，红绿灯为什么偏偏是红\绿、黄这三种颜色呢？

这其实跟“色轮”有关。色轮上的相对颜色成为互补色。由于互补色如此对立，所以完美搭配是选取一种主色，另一种则是主色的互补色。

在色轮上，红绿色就是一对互补色，能够起到色觉上的强调效果，至于黄色，则考虑到了三色组的色觉快感和光学波长的色觉效果。

CSS 2023 的新功能之一就是增加了相对颜色语法。

在相对颜色语法之前，如果我们想修改颜色的不透明度，我们需要为颜色通道创建自定义属性，并将它们组合成最终颜色或最终变体颜色。这意味着，我们需要管理大量颜色块，可以预见不久后就会形成“代码屎山”。

相对颜色语法是对 color-mix() 的补充，用于创建颜色变体。它比 color-mix() 更强大，但对颜色的使用策略也不同，可以通过编程方式降低或调高亮度。

相对颜色语法允许我们对颜色执行相对和绝对操作。相对变化是指使用当前饱和度或亮度的值，并使用 calc() 进行修改。绝对变化是指将通道值替换为全新的值，比如将不透明度设为 50%。

事实上，CSS 2023 还增加了其他许多关于颜色的强大功能，让我们能够更便捷灵活地自定义调色板和主题。

本期话题是 —— 你最喜欢或期待的 CSS 新功能是哪一种呢？

欢迎在本文下方自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端猫猫教》每日 9 点半更新，坚持阅读，自律打卡，每天一次，进步一点。

原文链接：https://juejin.cn/post/7350556449615085608 作者：前端猫猫教