堪比 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. 首字母跨行

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

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

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

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

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

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

initial-letter 属性接受两个值:

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

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

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

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

3. 相对颜色语法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(0)
上一篇 2024年3月27日 上午10:17
下一篇 2024年3月27日 上午10:28

相关推荐

发表评论

登录后才能评论