2025年10个强大 CSS 新特性-CSDN博客

翻译：The 10 Best New CSS Features in 2025 Already Supported in All Major Browsers | by Karsten Biedermann | Apr, 2025 | Medium

CSS 持续进化，带来了许多新功能，让我们的工作更高效、代码更简洁、能力更强大。得益于最新的浏览器技术进展（Baseline 2024），许多新特性现已在所有主流浏览器引擎上得到支持。以下是十个你可以立即开始使用的亮点功能。

想了解更多吗？ 来看看我的项目 CSSToday 吧： csstoday.dev/

1. Scrollbar-Gutter 和 Scrollbar-Color

当浏览器显示滚动条时，由于占用了空间，布局可能会发生位移。使用 scrollbar-gutter，你可以在滚动开始前就预留滚动条的空间：

.scrollable {
  scrollbar-gutter: stable both-edges;
}

你还可以使用 scrollbar-color 来设置滚动条的样式：

.scrollable {
  scrollbar-color: #444 #ccc;
}

这能确保外观一致，并防止布局位移。

适用场景 ✅

scrollbar-gutter 通过为滚动条预留空间来保持布局稳定，防止滚动条出现时产生恼人的布局位移。
scrollbar-color 允许你设置滚动条轨道和滑块的样式，增强设计一致性，尤其适用于深色或主题化界面。

2. ::target-text

::target-text 用于高亮通过内部链接（例如，点击同一页面上的锚点）到达的文本：

::target-text {
  background: yellow;
  color: black;
}

读者可以立即看到他们导航到的确切文本部分。

适用场景 ✅

高亮显示链接锚点指向的确切文本，让用户在长文档或文章中能立刻清晰地知道自己跳转到了哪个位置。

3. Ruby 布局 (ruby-align 和 ruby-position)

对于某些语言和注音场景，ruby-align 和 ruby-position 至关重要。它们允许你控制短注音（ruby 文本）相对于主文本的放置方式：

ruby {
  ruby-align: center;
  ruby-position: over;
}

适用场景 ✅

对于东亚文字排版至关重要，允许精确控制位于主文本上方或旁边的旁注标记（ruby 文本）。
在教育或参考资料中也适用于行内注释。

4. 相对颜色语法和 light-dark()

CSS 中现代的颜色处理方式包括相对颜色语法，它允许你基于现有颜色调整其亮度或饱和度等属性。此外，light-dark() 函数可以让你轻松地在浅色和深色值之间切换：

.element {
  background: light-dark(#ffffff, #000000);
}

你还可以使用 <color-interpolation-method> 在不同的颜色空间中创建更平滑的渐变。

适用场景 ✅

相对颜色语法能够基于参考颜色进行动态调整，例如调整饱和度或亮度。
light-dark() 简化了在浅色和深色值之间的切换，这对于主题或深色模式来说是一个常见需求。

5. 互斥手风琴效果

手风琴效果（Accordions）通常需要 JavaScript 来确保一次只打开一个面板，但 HTML 的 <details> 元素有助于简化这一点。下面是一个简短的代码片段，可以让面板保持互斥（一次只展开一个）(https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/name):

<details name="exclusive">
  <summary>详情</summary>
  一些容易被忽略的小细节。
</details>

<details name="exclusive">
  <summary>更多详情</summary>
  另一些细节。
</details>

details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em0.5em0;
margin-bottom: 0.5em; /* Added for spacing between details */
}

summary {
font-weight: bold;
margin: -0.5em -0.5em0;
padding: 0.5em;
cursor: pointer; /* Added for better UX */
}

details[open] {
padding: 0.5em;
}

details[open]summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}

适用场景 ✅

无需复杂的 JavaScript 逻辑，就能实现一次只显示一个面板的效果。
非常适合用于常见问题解答（FAQs）、菜单或任何只需要展开一个详情项的场景。

6. content-visibility

content-visibility 属性可以跳过屏幕外元素的渲染，直到它们滚动到视口内：

.lazy-load-section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Provide an estimated size */
}

注意：通常需要与 contain-intrinsic-size 配合使用，以减少布局抖动。

这减少了初始渲染成本，提高了长页面的性能。

适用场景 ✅

延迟渲染屏幕外的元素，提升长页面或复杂布局的性能。
提高速度并减少内存使用，尤其是在移动设备上。

7. font-size-adjust

当自定义字体不可用时，浏览器会回退到其他字体，这通常会破坏布局。font-size-adjust 有助于保持文本大小和可读性的一致性：

.text {
  font-family: "CustomFont", Arial, sans-serif;
  font-size-adjust: 0.5; /* 根据 CustomFont 的 x-height / font-size 计算得出 */
}

这可以在字体回退时保持相似的 x-height（小写字母 x 的高度）和易读性。

适用场景 ✅

在自定义字体不可用或加载缓慢时，保持文本外观的一致性。
通过匹配回退字体的 x-height，有助于保持可读性和设计感。

8. transition-behavior

虽然 transition-timing-function 已经很好用了，但 transition-behavior 引入了对动画的额外控制，例如无需复杂 JavaScript 即可反转或暂停过渡效果。这为更平滑的 UI 交互和高级动画场景铺平了道路。

.card {
transition-property: opacity, display; /* 注意：display 是离散属性 */
transition-duration: 0.25s;
/* 允许像 display 这样的离散属性参与过渡 */
transition-behavior: allow-discrete;
opacity: 1;
display: block; /* 初始状态 */
}

.card.fade-out {
opacity: 0;
/* 在过渡结束后应用 display: none */
display: none;
}

注意：allow-discrete 允许像 display 这样的属性在过渡结束时（对于 display: none）或开始时（对于非 none 值）瞬间切换。

适用场景 ✅

在基本过渡的基础上进行了扩展，无需大量脚本即可提供可逆或更复杂的过渡效果。
适用于精细的 UI 效果、交互式组件以及独特的动画场景，特别是涉及 display 变化的过渡。

9. CSS @property 和数学函数

@property 规则使得可以声明具有预定义语法、继承规则和初始值的自定义属性：

@property --animation-progress {
  syntax: "<number>"; /* 定义类型 */
  inherits: false; /* 是否继承 */
  initial-value: 0; /* 初始值 */
}

你还可以直接在 CSS 中使用像 round() (四舍五入)、mod() (取模) 和 rem() (取余) 这样的新函数进行计算，从而避免了许多 JavaScript 或预处理器的技巧。

适用场景 ✅

@property 将自定义属性转变为具有类型、默认值和继承规则的完全声明的变量，使得它们可以用于动画等场景。
像 round()、mod() 和 rem() 这样的函数使得在 CSS 中进行直接的数学运算成为可能，减少了对预处理器或 JavaScript 的依赖。

10. offset-position 和 offset-path

对于更复杂的动态设计，offset-position 和 offset-path 允许你让元素沿着自定义路径运动，而无需依赖重量级的 JavaScript 框架：

.move {
offset-path: path("M10,80 Q95,10 180,80"); /* 定义 SVG 路径 */
offset-position: 0%; /* 初始位置 */
offset-distance: 0%; /* 也可以用 offset-distance */
animation: moveAlongPath 2s ease infinite alternate; /* 添加动画 */
}

@keyframes moveAlongPath {
to {
    offset-distance: 100%; /* 或 offset-position: 100% */
  }
}

利用这些属性，你可以创建由 SVG 路径或简单曲线引导的精致动画。

适用场景 ✅