2025年CSS年终盘点：自定义下拉框终于来了！

转眼间，2025 年已接近尾声，前端领域又迎来了一波技术浪潮。今天，我们来聊聊 Chrome DevRel 团队推出的 CSS Wrapped 2025——这份年度回顾像 Spotify Wrapped 一样，用生动互动的方式总结了 Chrome 浏览器今年新增的 22 项 CSS 和 UI 特性。这些特性围绕“雕琢动态界面、拉伸想象力、创造互动体验”三大主题，协助开发者打造更原生、可定制的网页体验。

这份回顾的最大亮点，当属前端专家 Una Kravets 特别点名的自定义下拉框（Customizable Selects）。她称其为“绝对的游戏改变者”（absolute gamechanger），并强调自己很少这么夸张。

自定义下拉框：从痛点到突破

在前端开发历史上，HTML 的 <select> 元素一直是前端开发的“顽疾”。传统浏览器原生渲染让开发者难以通过纯 CSS 控制其外观，如颜色、字体、箭头样式或动画效果。这往往迫使团队转向 JavaScript 库（如 Select2 或自定义组件），从而增加代码量、性能开销和维护难度。

CSS Wrapped 2025 终于改变了这一局面。通过简单的 appearance: base-select; 声明，开发者可以全面解锁 <select> 的样式化能力。这是一个渐进增强的设计，开发者只需在特性查询中包裹样式（如 @supports selector(::picker(select)) { … }），即可确保旧浏览器兼容性。具体功能包括：

按钮和列表自定义：调整背景、边框、字体和过渡动画。例如，为下拉箭头添加 hover 效果，提升用户交互流畅度。
弹出层控制（:: picker(select)）：这个伪元素在浏览器顶层渲染，避免页面内容裁剪，并自动处理定位、视口翻转和溢出。
选项丰富化：<option> 目前支持嵌入 HTML 内容，如 <img>（例如国旗图标）或 <span>，但禁止交互元素（如链接）以维护安全性。
选中内容反射（selectedcontent）：新元素 <selectedcontent> 可反射选中的选项，并支持部分隐藏（如通过 display: none; 屏蔽额外描述）。

这一特性的支持标志着 CSS 向更 declarative（声明式）和 accessible（可访问性强）的方向演进，减少了对 JS 的依赖。客观而言，虽然自定义下拉框并非颠覆性创新，但它的确解决了长期痛点（还记得 IE 浏览下的处理过的 CSS Hack 吗？），尤其在表单密集型应用（如电商或后台系统）中，能显著提升开发效率。

需要注意的是，改特性目前主要在 Chrome 135 及以上版本稳定支持，开发者可以持续关注 Can I Use 网站检查跨浏览器情况，以思考是否可以在生产环境中使用。值得期待～～

2025 年其他亮点特性速览

CSS Wrapped 2025 将 22 项特性归为三大类别：Customizable Components（可定制组件）、Next-gen Interactions（下一代交互）和 Optimized Ergonomics（优化人体工程学）。这些更新大多从 Chrome 133 到 138 版本逐步落地，体现了浏览器厂商对 Web 标准的持续投资。以下是部分关键特性的精心整理，供大家了解：

可定制组件：Customizable Components

这一类别聚焦于增强 UI 组件的样式化和功能性，减少对 JavaScript 的依赖。

1. Invoker Commands

通过 commandfor 和 command 属性，实现无 JS 的声明式动作，如打开 <dialog> 或 [popover]。例如，使用 show-modal 命令触发模态框。从 Chrome 135 起可用，并提供 Invoker Commands Polyfill 支持旧浏览器。

<button commandfor="my-dialog" command="show-modal">Show Dialog</button>
<dialog id="my-dialog">...</dialog>

这一特性显著降低了交互逻辑的复杂性，尤其适合构建模态框或弹出层。客观来说，它提升了代码的可维护性，但目前仅限于 <dialog> 和 [popover]，未来可能扩展到更多元素。

2. Dialog Light Dismiss

引入 closedby 属性，控制 <dialog> 的轻量化关闭行为（如点击外部或按 ESC 键关闭）。可选值包括 none、closerequest 和 any。从 Chrome 134 起可用。

<dialog closedby="any">Click outside to close.</dialog>

这一特性借鉴 Popover API 的轻量化关闭机制，改善了模态框的用户体验。但需要开发者注意 closedby=”any” 可能带来的意外关闭风险。

3. Popover = hint

创建临时工具提示或预览层（popover=”hint”），不会干扰其他弹出。结合 Interest Invokers，可通过 interestfor 和 interest-delay（默认 0.5 秒）实现 hover/focus 触发。从 Chrome 135 起可用。

<button interestfor="callout-1"></button>
<div id="callout-1" popover="hint">Product callout information here.</div>

这一特性简化了工具提示和预览层的开发，尤其适合多层 UI 设计。但需要开发者注意 interest-delay 的默认值可能影响用户感知速度。

4. Customizable Select

通过 appearance: base-select; 解锁 <select> 的完整样式化能力，包括按钮、列表和选项内容 customization。从 Chrome 135 起稳定支持，需检查 Can I Use 跨浏览器兼容性。

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

这是 CSS Wrapped 2025 的焦点特性，解决了长期痛点。但开发者需确保无障碍性（如 ARIA 支持）和跨浏览器兼容性。

5. :: scroll-button()

创建原生的滚动按钮伪元素，支持 left、right、up、down 等方向。按钮状态可样式化，并自动禁用不可滚动方向。从 Chrome 133 起可用。

.carousel::scroll-button(left) {
  content: "⬅" / "Scroll Left";
}

这一特性简化了轮播组件的开发，但需要开发者注意按钮的语义化和可访问性。

6. :: scroll-marker()

创建滚动标记伪元素，用于跳转到特定滚动位置。结合 :target-current 伪类，样式化当前激活项。从 Chrome 133 起可用。

.carousel > li::scroll-marker {
  content: ' ';
  width: 1em;
  height: 1em;
  border: 1px solid black;
  border-radius: 50%;
}

提升了滚动导航的视觉反馈，但需要开发者确保标记的语义清晰。

7. scroll-target-group

将锚点链接列表转换为滚动标记组，通过 scroll-target-group: auto 实现。从 Chrome 133 起可用。

.toc {
  scroll-target-group: auto;
}
.toc a:target-current {
  color: red;
  font-weight: bold;
}

这一特性简化了滚动导航的开发，但需要开发者注意锚点链接的语义和性能。

8. Anchored Container Queries

基于锚点定位的容器查询，样式化元素根据其锚点位置变化。从 Chrome 135 起可用，作为 Interop 2025 的一部分。

.tooltip {
  container-type: anchored;
}
@container anchored(fallback: flip-block) {
  .tooltip::before {
    content: '▼';
    top: 100%;
  }
}

这一特性提升了锚点定位的鲁棒性，但需要开发者注意查询条件的具体性。

9. Interest Invokers

通过 interestfor 属性实现 hover/focus 触发的声明式 UI，结合 interest-delay 控制触发延迟。从 Chrome 135 起可用。

<button interestfor="callout-1"></button>
<div id="callout-1" popover="hint">Product callout information here.</div>

简化了交互反馈设计，但需要开发者注意延迟设置的影响。

下一代交互：Next-gen Interactions

这一类别聚焦于提升交互的动态性和性能，涵盖动画、滚动和状态管理。

1. Scroll-state Queries

通过 container-type: scroll-state 查询滚动状态（如 stuck、snapped、scrollable），允许基于状态的动态样式。从 Chrome 133 起可用。

.parent {
  container-type: scroll-state;
}
@container not scroll-state(snapped: x) {
  opacity: 0.25;
}

提升了滚动交互的视觉反馈，但需要开发者注意状态查询的性能开销。

2. Tree Counting Functions

引入 sibling-index() 和 sibling-count()，计算兄弟元素索引和数量，便于交错动画或列表布局。从 Chrome 135 起可用。

li {
  transition-delay: calc(0.1s * (sibling-index() - 1));
}

简化了动态动画的开发，但需要开发者注意索引基数（1-based）的使用。

3. scrollIntoView() container

新增 container 选项，仅滚动最近的祖先滚动容器。从 Chrome 133 起可用。

element.scrollIntoView({ container: 'nearest', behavior: 'smooth' });

优化了嵌套滚动场景，但需要开发者注意滚动行为的细粒度控制。

4. Nested View Transition Groups

支持嵌套 ::view-transition-group，保留 3D 和剪切效果。从 Chrome 135 起可用。

.card {
  view-transition-name: card;
  overflow: clip;
}
.card img {
  view-transition-name: photo;
  view-transition-group: nearest;
}

提升了复杂动画的视觉效果，但需要开发者注意性能开销。

5. DOM State-Preserving Move

通过 moveBefore 替代 insertBefore，保留元素状态（如视频播放、输入焦点）。从 Chrome 133 起可用。

document.body.moveBefore($iframe, $newSibling);

显著提升了动态布局的流畅性，但需要开发者注意兼容性回退。

优化人体工程学：Optimized Ergonomics

这一类别聚焦于优化 CSS 的表达能力和人体工程学，涵盖条件逻辑、函数扩展和文本布局。

1. Advanced attr() Function

扩展 attr() 函数，支持类型解析（如 <color>、<custom-ident>），应用于更多 CSS 属性。从 Chrome 135 起可用。

div {
  color: attr(data-color type(<color>), red);
}

提升了属性值的灵活性，但需要开发者注意类型转换的准确性。

2. ToggleEvent.source

新增 ToggleEvent.source，标识触发弹出或模态框的元素。从 Chrome 135 起可用。

$cookiebanner.addEventListener('toggle', event => {
  if (event.source === $btnYes) {
    // Give the user a cookie
  }
});

提升了交互逻辑的准确性，但需要开发者注意事件监听的性能。

3. Text-box Features

通过 text-box-trim 和 text-box-edge 优化文本垂直居中。从 Chrome 135 起可用。

h1, button {
  text-box: trim-both cap alphabetic;
}

改善了文本布局的视觉效果，但需要开发者注意字体指标的差异。

4. Shape() Function

创建响应式剪切路径，支持复杂形状和动画。从 Chrome 135 起可用。

.flag {
  clip-path: shape(from 0% 20px, curve to 100% 20px with 25% 0% / 75% 40px, ...);
}

提升了图形设计的灵活性，但需要开发者注意路径复杂度的性能影响。

5. If() Statements

在 CSS 中嵌入条件逻辑，支持 media()、supports() 和 style() 查询。从 Chrome 135 起可用。

.responsive-layout {
  display: flex;
  flex-direction: if(media(orientation: landscape): row; else: column);
}

简化了响应式设计的表达，但需要开发者注意条件嵌套的 readability。

6. Custom Functions

通过 @function 声明可复用函数，优化样式逻辑。从 Chrome 135 起可用。

@function --negate(--value) {
  result: calc(-1 * var(--value));
}

提升了 CSS 的模块化和可维护性，但需要开发者注意函数调用的性能。

7. Expanded Range Syntax

在 style() 查询和 if() 语句中支持范围语法（如 >、<=）。从 Chrome 135 起可用。

@container style(--rain-percent > 45%) {
  .weather-card {
    background: linear-gradient(140deg, blue, lightblue);
  }
}

提升了样式逻辑的表达能力，但需要开发者注意范围查询的准确性。

8. Stretch Sizing Keyword

通过 stretch 关键字填充容器边距框，忽略 box-sizing。从 Chrome 135 起可用。

.element {
  height: stretch;
}

优化了布局的灵活性，但需要开发者注意边距计算的差异。

9. Corner-shape

通过 corner-shape 自定义角落形状，支持 round、bevel、notch 等。从 Chrome 135 起可用，实验性特性。

.top-left-petal {
  corner-shape: round round scoop;
  border-radius: 50%;
}

提升了视觉设计的多样性，但需要开发者注意实验性的稳定性。

这些特性总计 22 项，覆盖从组件到交互的多个层面。从客观视角看，这些更新增强了 CSS 的逻辑处理能力（如状态管理和条件），但并非所有都已跨浏览器标准化——Interop 2025 项目正推动 Popover API 和锚点定位的基线支持，Safari 和 Firefox 的跟进将决定实际采用率。

未来展望

CSS Wrapped 2025 的发布，正值 Web 技术高速演进。根据 StatCounter 数据，2025 年 Chrome 全球市场份额稳定在 71.17%左右，这意味着这些新特性有望快速普及，推动更多纯 CSS 解决方案的落地。对开发者而言，将进一步降低对 JS 的依赖，提升了性能和可访问性，但也要求我们关注兼容性和测试。

展望 2026 年，对于前端开发者而言，将更多期待如自定义函数（@function）或高级 attr()的扩展。