值得关注的 CSS 新特性

CSS 作为前端的重要组成部分，虽然受瞩目的程度逊于 JS，但是也在不停地进步。CSS 可以让我们的开发环境更好，用户体验更佳，所以大家也需要保持关注。这里记录一些值得关注的新特性（评判标准由我主观决定），有些已经实装，可以取代旧样式，提供更好的效果；有些还没有普及，但是可以逐步应用到我们的产品当中，渐进式增强。

overflow-wrap

这个属性我还是通过 TailwindCSS 学到的。它可以用来处理文本换行，拥有 3 个可选值：

1. overflow-wrap: normal 默认值，按照标准模式换行
2. overflow-wrap: anywhere 可以在任意处换行
3. overflow-wrap: break-word 尽量利用宽度，只在超宽时打破单词换行

我们知道，中文一个字就是一个字，随时可以换行；而英文则把一个单词算作一个字，单词内部不能随意断开。但是有时候，容器宽度不够，文字就会撑破容器。以前我们只有 word-break: break-all，但是 word-break: break-all 会在单词的任意位置断开，甚至在不必要的时候断开；而 overflow-wrap: break-word 会尝试把单词放到独立一行，如果还是不行，那就再断开。所以它的效果会更好。推荐大家使用。

Scoped CSS

CSS 的优先级非常重要，平时常常用到，面试的时候也会常常问到。CSS 优先级分成若干层级：

1. #id
2. .class
3. element
4. [attr="value"]
5. :pseudo-class

这样的优先级规划在大部分场景下，都能正常工作，但是当我们需要使用公共仓库，或者开发公共仓库的时候，就会遇到困难。

比如 Awesome Comment 项目，它是一个嵌入页面的评论框，用户可以把它嵌入到自己的网站当中，给自己的网站添加评论功能。我们使用 TailwindCSS + DaisyUI 作为样式库，直接使用一切都好，但是当我们要把它嵌入别的网页时，就可能跟目标页已有的样式产生各种冲突。于是，在 Scoped CSS 尚未普及的今天（主要是 Safari 不支持），我们就必须给所有样式加上 ac- 前缀，非常影响开发效率。还有一位同学，他想给现在使用 bootstrap 的项目里引入 TailwindCSS，也面临严重问题。

如果有了 Scoped CSS，我们只需要这样：

@scope (.awesome-comment) {
  .a { }
}

就可以非常轻松地让我们的样式只在 .awesome-coment 节点内生效，且盖过其它样式。可以大大提升我们集成别人的样式，或别人使用我们样式时的效率。相信以后这个功能会大大改善第三方框架的开发。

更多更详细的用法，建议大家深入阅读：@scope – CSS: Cascading Style Sheets | MDN (mozilla.org)。

<textarea> 根据内容自动缩放

这项目功能目前还在讨论之中：[css-ui] ? Allow <textarea> to be sized by contents. · Issue #7542 · w3c/csswg-drafts (github.com)。大概意思是，<textarea> 用途非常广泛，让它能够根据内容长度自动调整大小会非常有价值。不过，具体选用什么方案，目前还没有定论。

我搜了一下，目前无论 form-sizing 还是 field-sizing 都还没有进入规范，也没有间接实现方案（比如 PostCSS），所以大家先保持关注吧。

View Transition 视图切换动画

View Transition 让我们的产品可以在页面切换时，复用一些页面元素，展现出漂亮的动画，让用户更加理解页面逻辑。如下面这则视频所示，当用户点击列表中的链接时，大标题、作者等信息会以动画形式，移动到页头位置；当用户回到列表页的时候，它们又会移回列表里的相应位置。

使用 View Transition 的方法比较复杂，我暂时还没有 Demo，所以就不详细说明了，大家感兴趣的话，可以看下面两个链接：

1. Getting started with View Transitions on multi-page apps | daverupert.com
2. https://developer.mozilla.org/en-US/docs/Web/API/View_Transit...

light-dark() 函数

light-dark() 函数可以接受两个参数，分别作为 light 模式和 dark 模式下生效的属性。如以下代码所示：

body {
  background-color: light-dark(white, black);
}

不过我觉得这个函数的作用不会很大，我还是喜欢集中定义和管理这些变量。

color-mix() 函数

相对来说，我觉得 color-mix() 函数的作用就大多了，它可以基于一个颜色，生成新的值。比如，我们先约定一批颜色，分别作为 primary、secondary、success、error 等，然后使用 color-mix() 函数，生成一些衍生颜色，以便适用在 disabled，active，highlight 等场景下。

使用方式也比较简单，它接受 3 个参数：混合模式，颜色1，颜色2。比如下面的代码，就是两种颜色各取一半，以 srgb 模式混合，得到新颜色。其中百分比也可以调整，比较好理解。

/* 减淡，即混合白色 */
color: color-mix(in srgb, var(--primary) 50%, white);
/* 加深，即混合黑色 */
background-color: color-mix(in srgb, var(--primary) 50%, black);

有兴趣的同学可以深入了解：color-mix() – CSS: Cascading Style Sheets | MDN (mozilla.org)。

原生嵌套 CSS

嵌套 CSS 相信大家在使用预处理工具的时候都会用到：

.a {
  .b {
    .c { }
  }
}

因为确实有用，所以如今原生 CSS 也开始支持嵌套，可惜有些浏览器还没有支持。我建议大家先配合 TailwindCSS 使用，等到将来都支持了，再去掉 TailwindCSS 即可。

// postcss.config.js
export default {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {}, // 不需要 TW 的话可以不要这行
    autoprefixer: {},
  },
}

详细规范请继续阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/...。

CSS 容器查询

我猜大部分同学都用过 @media query，以适配不同设备和分辨率。但我们现在已经是组件化开发的时代，很多时候，我们需要让自己的组件能够适配不同的使用场景，于是仅仅根据分辨率调整布局就不够了。万一被用在桌面显示器上，但是本身只占据一小块空间，那就无法保证用户体验。
这个时候我们可以使用 CSS 容器查询（Container query），它的用法很简单，首先，假设我们的组件渲染出来的 HTML 是这样的：

<!-- component.html -->
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

接着，我们要把目标容器标记为“容器控制上下文”（containment context）。未特意标记的容器不会产生容器查询，我猜这样可以减轻浏览器布局的计算负担。最后，使用 @container 查询，让容器在某个尺寸时，内部某些样式生效，即可：

/* component.css */
.post {
  container-type: size;
}

/* 默认样式 */
.card h2 {
  font-size: 1em;
}

/* 仅在容器 >= 640px 时才生效的样式
@container (min-width: 640px) {
  .card h2 {
    font-size: 2rem;
  }
}

容器查询还有一些进阶用法，大家可以深入阅读：CSS container queries – CSS: Cascading Style Sheets | MDN (mozilla.org)

总结

好的，先写这么多。感谢所有标准贡献者、开源软件开发者、社区参与者，我们 Web 开发者能收获现在的成就，跟所有贡献者的辛勤工作分不开。

希望新特性能尽早进入实装，成为我们开发时的利器。

如果你有什么想补充的，或者有问题想讨论一下，欢迎留下评论。

---

本文参与了SegmentFault 思否写作挑战赛活动，欢迎正在阅读的你也加入。