2024，Chrome 为我们带来了哪些 CSS 新特性？表单字段宽度自伸缩、页面间切换效果、锚点定位……

面包爱好者
428 阅读7分钟

Chrome 的 CSS Wrapped 2024 新鲜出炉，为我们介绍了许多新特性。今年又是 CSS 更新许多的一年，许多新特性都引人注目：表单字段宽度自伸缩、页面间切换效果、锚点定位……有的使得长久以来使用 JavaScript 实现的效果大大简化，还有的使得 CSS 本身使用更加灵活，总的来说，前途一片光明🎉

OIP-C.jpg

不过，还不能高兴太早，其中很多特性都尚未得到完全支持，而是仅仅在最新 Chrome 上支持。尽管如此，相信随着时间推移，这些特性也会加入 Firefox、Safari 等其他各大浏览器，为我们的开发提供更大便利，本文也会在最后总结中提及相关支持情况。

当然，这篇文章只是概览，不会过多讲解使用方法。如果对使用方法感兴趣并仍抱有疑问，不妨点赞支持并留下评论，我会尽快查看解答。既然如此，就让我们开始概览吧👇

部件特性

表单字段宽度自伸缩

textarea、select 和 input等元素都将支持此特性，不再需要估算宽度，而是直接在 CSS 设置，就能适配文本长度。

textarea, select, input {
  field-sizing: content;
}

查看效果👇

field-sizing.gif

动画支持 height: auto 等非数字值

在过去的 CSS 中，transition 设置的动画不支持 min-content、max-content、fit-content 以及 height: auto，造成许多迷惑。现在，在 Chrome 可以在 CSS 中写入以下启用：

:root {
    interpolate-size: allow-keywords;
}

查看效果👇

animate-to-auto.gif

折叠部件

还记得 GitHub Markdown 的折叠部件吗？现在，原生 HTML 也支持了这样的折叠部件。只需如此写：

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

name 属性相同的 details 会构成一组，打开其中一个时，就会隐藏其他的，十分方便。

折叠部件的样式

和其他元素一样，也可以为折叠部件设置样式，例如，想要让折叠部件横排显示：

details {
  display: flex;
  flex-direction: row;
}

在 Chrome 131 之后，还可以用 ::details-content 设置折叠内容的样式，比如 transition 动画。

查看效果👇

animated-details-horizontal.gif

锚点定位

过去，为了找到悬浮提示、标签、设置等应有的位置，我们常常不得不动用 JavaScript 进行计算。但有了锚点定位，就能够用 CSS 轻松在两个元素之间进行相对定位。首先，我们要在所相对的元素上设置锚点：

.anchor {
  anchor-name: --over-easy;
}

然后，在需要定位的元素上用 position-anchor 声明锚点，并用 position-area 设置相对位置：

.positioned-element {
  position: fixed;
  position-anchor: --over-easy;
  position-area: block-end;
}

在最新 Chrome 中，position-area 有 20 种不同的值。你可以在下方图中看到它们的效果👇

anchoring.gif

用户交互

滚动条样式

过去，我们只能使用 ::-webkit-scrollbar-* 来设置滚动条样式，而且由于未成为标准兼容 Firefox 等浏览器，不能作为通用的设计方案。现在，终于有了设置滚动条样式的正式方案：

.scroller {
  scrollbar-color: hotpink blue;
  scrollbar-width: 10%;
}

页面间切换效果

页面间切换效果使得用户对网站有一致的体验，是一种常见设计。在过去，只有单页应用（SPA）能方便实现这样的设计，而随着 CSS 的更新，我们可以用原生方案来解决这个问题了。启用效果，需要在 CSS 中写上如下内容：

@view-transition {
  navigation: auto;
}

接下来，在需要承接变化的元素上使用 view-transition-name，通过 CSS 动画实现切换页面的效果。

查看效果👇

cross-document-view-transitions.gif

滚动驱动动画

页面阅读进度条、视差滚动是过去乃至现在都很流行的设计方案。如今，有了滚动驱动动画，我们可以不再占用 JavaScript，而使用 CSS 实现这些效果。

查看效果👇

HiTavHlNjHFrA3NLLDZq.gif

移动端滑动（snap）事件

CSS 中有移动端滑动（snap）这一比较少见的内置事件，我们可以用 scroll-snap-type、scroll-snap-align 和 scroll-snap-stop 设置其呈现方式，包括相对于最初按下位置可滑动的长度、能否滑过按下位置所在元素等。

如今，这一事件成为了 JavaScript 中可直接引用的事件：scrollsnapchange 和 scrollsnapchanging，对应滑动松开和滑动对象改变。结合使用这两个事件，我们能够让用户在滑动过程中收到界面反馈，达到更加丝滑的交互效果。

查看效果👇

snap-changing.gif

开发者体验

::backdrop 继承

过去，::backdrop 伪元素不参与继承，整个页面使用相同的 ::backdrop。能够继承后，我们能让不同的 dialog 有不同的背景，还能结合自定义属性 attr() 更方便地使用。

light-dark()

在这次的新特性中，light-dark() 可能是最有用的之一了。随着深色模式的设计逐渐常见，CSS 曾加入了 prefers-color-scheme 获取系统的深浅主题设置，但必须分开设置颜色方案，不利于对照。如今，只要写明 color-scheme: light dark，我们就能用 light-dark() 更方便地设置深色模式的颜色，其中前一个是浅色模式的颜色，后一个是深色模式的颜色：

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

此外，这种写法也让我们能结合 :has()，使用 CSS 就控制颜色方案的切换：

:root {
  &:has(input[name="color-scheme"][value="light dark"]:checked) {
    color-scheme: light dark;
  }
  &:has(input[name="color-scheme"][value="light"]:checked) {
    color-scheme: light;
  }
  &:has(input[name="color-scheme"][value="dark"]:checked) {
    color-scheme: dark;
  }
}

更适合懒人的一点是，只要如下设置，就能采用默认的字体和背景的深色配色——一般是黑底白字，无需再自己写配色：

#demo {
  color: CanvasText;
  background: canvas;
}

@property（CSS 变量类型）

TypeScript 的风终于还是吹到了 CSS现在，我们可以在 CSS 中为变量设置类型了。这不仅让变量内容更加清晰，更重要的是，还能设置初始默认值，在修改导致的意外发生时也正常工作。

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes adjust-angle {
  to {
    --angle: 360deg;
  }
}

div {
  --angle: 0deg;
  animation: 10s adjust-angle linear infinite;
  rotate: var(--angle);
}

Popover（弹出框）

话不多说：

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

如此简单，就能实现弹出框的效果。

@starting-style（进场样式）

如题，能够实现元素加入到页面时的样式，实现进场动画，例如 dialog：

dialog[open] {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

可换行和设置间距排列方式的 ruby（读音标注）

查看效果👇

ruby-align.png

paint-order （文字相关效果的图层）

过去，文字相关效果渲染的顺序总是：fill、stroke、markers，导致了很多预期之外的效果。现在，能够使用 paint-order 来调整顺序了。

查看效果👇

paint-order.gif

CSS 嵌套外层后写上的样式不再提升

新 CSS 中，下面的代码效果会是红色背景，而不是绿色：

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }
    
    background-color: green;
}

总结

下表“支持情况”，只介绍 Firefox 和 Safari 的情况，“Chrome”表示只有较新版本的 Chrome 和 Edge 支持，“Baseline”表示在 2024 Baseline 或在新版四大浏览器均支持，具体可到 caniuse、MDN、web.dev 等网站查询。

关键词功能简介支持情况
field-sizing表单字段宽度自伸缩Chrome
interpolate-size非数字宽高支持 CSS 动画Chrome
details折叠部件Baseline
::details-content折叠部件内容样式Chrome
Anchor positioning锚点相对定位Chrome
Custom scrollbars滚动条样式Firefox 支持，Safari 部分支持
@view-transition页面间切换效果Safari 支持
Scroll-driven animations滚动驱动动画Chrome
scrollsnapchange / scrollsnapchanging移动端滑动（snap）事件Chrome
::backdrop inheritance::backdrop 继承不同 dialog，可使用不同背景
light-dark()默认深色模式和统一颜色配置等Baseline
@propertyCSS 变量类型Baseline
Popover APIHTML 内置弹出框Baseline?
@starting-style进场样式Safari 支持
ruby-align文字读音标注设置间距排列方式Firefox 支持
paint-order文字相关效果的图层Baseline?

希望这篇文章能帮到你，也欢迎点赞支持和评论交流！

avatar
文章
阅读
粉丝