当前位置：首页 > news >正文

10 个最新 CSS 功能已在所有主流浏览器中得到支持

news 来源：原创 2025/6/23 2:25:21

前言

CSS 不断发展，新功能使我们的工作更快、更简洁、更强大。得益于最新的浏览器改进（Baseline 2024），许多新功能现在可在所有主要引擎上使用。以下是您可以立即开始使用的10 CSS新功能。

1. Scrollbar-Gutter 和 Scrollbar-Color

当浏览器显示滚动条时，布局会随着空间的占用而移动。使用 scrollbar-gutter，您甚至可以在滚动开始之前保留滚动条空间：

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

您还可以使用滚动条颜色来设置滚动条的样式：

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

这可确保外观一致并防止布局跳动。

它的好处：

scrollbar-gutter 通过为滚动条保留空间来保持布局稳定，防止滚动条出现时出现烦人的偏移。
scrollbar-color 可让您设置滚动条轨道和缩略图的样式，从而增强设计一致性，尤其是对于深色或主题 UI。

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;}

它有什么用处？

对于东亚排版至关重要，可以精确控制主文本上方或旁边的小注释（注音文本）。

对于教育或参考资料中的内联注释也很有用。

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

CSS 中的现代颜色处理包括相对颜色语法，它允许您调整现有颜色的亮度或饱和度等属性。此外，light-dark() 允许您轻松地在明暗颜色值之间切换：

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

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

它有什么好处？

相对颜色语法支持基于参考颜色进行饱和度或亮度等动态调整。

light-dark() 简化了在明暗颜色值之间切换，这是主题或暗色模式的常见需求。

5. 独占手风琴

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

<details name="exclusive">  <summary>Details</summary>  Something small enough to escape casual notice.</details>

details {  border: 1px solid #aaa;  border-radius: 4px;  padding: 0.5em 0.5em 0;}summary {  font-weight: bold;  margin: -0.5em -0.5em 0;  padding: 0.5em;}details[open] {  padding: 0.5em;}details[open] summary {  border-bottom: 1px solid #aaa;  margin-bottom: 0.5em;}

它的优点：

允许您一次显示一个面板，而无需复杂的 JavaScript 逻辑。
非常适合常见问题解答、菜单或任何只需打开一个详细信息的场景。

6. content-visibility

content-visibility 跳过屏幕外元素的渲染，直到它们滚动到视图中：

.lazy-load-section {  content-visibility: auto;}

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

它有什么好处？

推迟屏幕外元素的渲染，提高长页面或复杂布局的性能。

提高速度并减少内存使用量，尤其是在移动设备上。

7. font-size-adjust

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

.text {  font-family: "CustomFont", Arial, sans-serif;  font-size-adjust: 0.5;}

这可以在字体回退时保持相似的 x 高度和易读性。

它有什么好处？

当自定义字体不可用或加载缓慢时，保持一致的文本外观。

通过匹配回退字体的 x 高度，帮助保持可读性和设计。

8. transition-behavior

虽然 transition-timing-function 为我们提供了良好的服务，但 transition-behavior 引入了对动画的额外控制，例如，无需复杂的 JavaScript 即可反转或暂停过渡。这为更流畅的 UI 交互和高级动画场景铺平了道路。

.card {  transition-property: opacity, display;  transition-duration: 0.25s;  transition-behavior: allow-discrete;}.card.fade-out {  opacity: 0;  display: none;}

它有什么用处？

扩展基本过渡，提供可逆或更复杂的过渡，无需大量脚本。

适用于精致的 UI 效果、交互式组件和独特的动画场景。

9. CSS @property 和阶梯值函数

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

@property --animation-progress {  syntax: "<number>";  inherits: false;  initial-value: 0;}

您还可以获得新的阶梯值函数，如 round()、mod() 和 rem()，用于直接在 CSS 中进行计算，从而消除了许多 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");  offset-position: 0%;  transition: offset-position 2s ease;}

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

它的优点：

允许纯粹在 CSS 中实现基于路径的运动和动画。
非常适合交互式元素、动态图形或引导用户注意力沿着曲线轨迹移动。

结论

这些功能中的每一个都已在所有主流浏览器中得到支持。它们消除了许多 JavaScript 解决方法的需要，让您可以构建更简单、更快速、更易于维护的布局和交互。尝试一下，看看它们如何将您的项目提升到新的效率和优雅水平。祝您实验愉快！

关于优联前端

武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育，医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接开发Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。