2026 年的 CSS：重塑前端开发的新特性

如果你已经建立网站一段时间了，你可能对 CSS 有一些既定的看法。这是设计和布局的明显选择，但一旦事情变得比基本动画更具交互性，大多数开发人员就会本能地使用 JavaScript。然而，得益于不断发展的平台，在构建网络功能时，“用于设计的 CSS 和用于交互性的 JavaScript ”不再是默认设置。

现代 CSS 现在足够强大，可以处理过去需要自定义脚本的复杂动画和用户交互。在这篇文章中，我们将探讨 CSS 中的一些最新功能，以及它们如何简化开发流程，同时仍然为你提供与 JavaScript 习惯的交互性。

想象一下，你可以在不编写任何 JavaScript 的情况下构建完全可定制的 <select> 元素，或者在不计算 scrollLeft 或连接多个事件监听器的情况下创建带有交互式标记的可滚动轮播。这正是这些新的 CSS 功能所能实现的，这绝对是值得期待的。

2026 年 CSS 有什么新功能？

让我们来看看其中一些最新功能，以及我们如何在代码库中实现它们。

注意：这些功能中的大多数都是非常新的，并且仍在浏览器中推广，因此它们还不适合生产使用。要更深入地了解这些功能是如何工作的，请查看 Chrome DevRel 团队的 CSS Wrapped 2025 文章：

现在，让我们来看一个结合了这些新功能的真实用例。

演示：自定义原生 HTML SELECT 框

这是多年来我一直期待的一个功能，让我们来看看它在实践中是如何运作的。<select> 元素是浏览器内置的解决方案，用于实现可访问的下拉菜单，但它的样式设置一直受到限制。如果你想做一些比调整填充或改变颜色更高级的操作，通常最终会使用额外的标记、JavaScript 处理程序以及试图模仿原生行为所带来的所有复杂性，来构建一个完全自定义的下拉菜单。

可自定义的选择器让你能够兼得两者之长：既有真实 <select> 的原生可访问性和语义，又拥有我们之前只能从 JavaScript 驱动的组件中获得的样式灵活性。

在下面的演示中，我们将使用三个较新的 CSS 特性来构建一个宝可梦选择器，该选择器：

• 使用原生的 <select> 元素以增强语义和可访问性
• 为每个选项显示一个图标和背景颜色
• 以交错的方式动画化选项滑入视图：

注意：这些特性需要 Chrome 135+：

所有这些都是通过一个 <select>元素和几个 data-* 属性来实现的。交互性来源于以下特性：appearance: base-select（以及 select picker）、树计数函数和类型化的 attr()。

appearance: base-select 和 select picker

第一步是将控件切换到其可自定义模式：

select, select::picker(select) {appearance: base-select; }

appearance: base-select 将 <select>  纳入新的可自定义渲染模型，这也使其成为一种可靠的渐进式增强方法。不支持该属性的浏览器将忽略该属性，并正常渲染 select。

一旦你选择启用，::picker(select) 伪元素就代表了下拉界面本身，因此你可以像设计其他用户界面面板一样来设计它：

select::picker(select) {
  margin-block-end: 1em;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

借助可自定义的选择器，浏览器会为你处理下拉菜单的许多复杂操作，包括：

自动溢出处理：如果下拉菜单的高度超过可用空间，浏览器会为你处理溢出问题。这包括限制选择器的高度，并在需要时使其可滚动，而不是让其溢出屏幕或迫使你手动计算高度。

• 锚点定位回退：选择器使用新的锚点定位语法锚定到触发元素，因此下拉菜单能够根据可用视口空间自动选择最佳位置：

• 内置焦点管理：焦点行为由系统原生处理，因此当 Select 打开时，焦点会以可预测的方式转移到选择器中，而当 Select 关闭时，焦点会相应地返回。你无需实现自己的焦点陷阱或“返回焦点以触发”逻辑。
• 全键盘导航（箭头键、Enter 键、Escape 键）：用户可以使用箭头键浏览选项，使用 Enter 键确认选择，使用 Escape 键关闭选择器，就像普通的 <select> 一样。
• 支持更丰富的选项内容：可以在每个 <option> 中包含除纯文本以外的更多内容，如图标、额外的标签或结构化内容。

在构建自定义下拉菜单时，这些内容通常需要手动编写脚本，但在这里，它们直接来自平台。

另一个主要优点是内置的渐进式增强模型。如果浏览器尚不支持可自定义的选择器，用户只会得到常规的原生 <select> 元素。一切照常运行。无需使用 polyfill，也无需维护组件的两个版本。

使用 sibling-index() 实现动画交错

接下来，我们添加动画效果。当下拉菜单打开时，每个选项都会在短暂的延迟后从侧面滑入。我们无需为每个选项手动分配索引，而是可以使用

option {
  transition:  opacity 0.25s ease, translate 0.5s ease;
  transition-delay: calc(0.2s * (sibling-index() - 1));
  @starting-style {
     opacity: 0;
     translate: 30px 0;
  } 
}

sibling-index() 函数会返回一个元素在其所有同级元素中的以 1 作为基准的位置。这意味着第一个可见选项的延迟为 `0.2s * (1 - 1)，即 0 秒。下一个选项的延迟为 0.2 秒，然后是 0.4 秒，以此类推。

如果你之后添加或移除选项，动画仍然看起来是正确的，因为时间设置是动态计算的，而不是在标记中硬编码。

在树计数函数出现之前，在 CSS 中实现相同的交错效果通常要麻烦得多。你要么必须使用一长串的 :nth-child() 选择器来硬编码延迟，要么手动为 HTML 中的每个项目添加一个 --index 自定义属性。这两种方法虽然都能奏效，但很快就会变得冗长繁琐，而且当列表发生变化时，很容易忘记更新。

用于数据驱动样式的高级 attr() 函数

最后，该演示使用类型化的 attr() 函数来保留 data-* 属性中的视觉细节。

attr() 函数已基本可用一段时间。但直到最近，它才可靠地适用于 content 属性。

借助 attr() 的新类型化版本，我们可以在 CSS 中的更多地方使用属性值，只要我们告诉浏览器期望的类型即可。

在这个演示中，每个选项都包含一个data-bg-color 属性，用于定义其悬停时的背景颜色，我们直接在 CSS 中读取该值：

//HTML
<option data-bg-color="#F8C9A0" value="charmander"> 

//CSS
option {  background-color: attr(data-bg-color color, transparent); }

因为我们明确地将该属性视为颜色，所以浏览器能够正确解析它，并且如果该属性缺失，我们可以安全地提供一个回退值。这样，我们就实现了一种更加数据驱动的样式方法：无需修改 CSS，你就可以在 HTML 中调整主题颜色。

appearance: base-select、select 选择器、树计数功能和类型化 attr() 共同作用，使得构建一个丰富且具有动画效果的下拉菜单成为可能，而该下拉菜单本质上仍然是一个真正的 <select> 元素。因此，你可以在保持原生行为和内置辅助功能的同时，实现所需的自定义。

相比之下，这是一个使用 JavaScript 构建的类似下拉菜单的效果（剧透：要实现与我们用 CSS 构建的示例足够接近的效果，大约需要 150 多行 JavaScript 代码）

):

2026 年的 CSS：未来前景展望

对我来说，这个演示展示了 CSS 未来发展方向中最令人兴奋的部分。仅用几个 CSS 特性就取代了 150 多行 JavaScript，这简直太不可思议了。我们能够实现与以往相同的复杂度，但现在所需的工作量却大大减少。