#优质博文 #Baseline #前端 #浏览器兼容性 #CSS
2025 年 9 月基准每月摘要 | Blog | web.dev

AI 摘要：2025 年 9 月，Baseline 项目在浏览器兼容性标准化方面取得显著进展。最重要的变化是 Browserslist 原生支持 Baseline 查询，大幅简化项目集成流程；同时多个 Web 平台特性进入 “新近可用” 与 “广泛可用” 阶段，反映出跨浏览器功能互操作性的累积成果。此外，Interop 2026 提案阶段结束，未来关注点已确定；Baseline 时间轴工具亦获得用户体验升级，为开发者提供更直观的功能追踪与过滤体验。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. Baseline 与 Browserslist 集成
• Browserslist 现已内置 Baseline 查询支持，无需额外 npm 包。
• 新语法如 baseline widely available、baseline newly available、baseline 2022 等，可直接定位功能状态。
• 支持 “with downstream” 查询，用于包含下游浏览器的环境。
• 资料参考：Browserslist 现在支持 Baseline。

2. 9 月功能更新概览
• “Baseline 新近可用” 功能包括 content-visibility、<link rel="dns-prefetch">、URLPattern 等。
• “Baseline 广泛可用” 功能多达 21 项，涵盖 CSS、Web API、Wasm 等领域，如 Constructable Stylesheets、Import Maps、OffscreenCanvas、Push API 等。
• 这标志着功能互操作性（Interoperability）的稳步推进。

3. Interop 2026 提案总结
• Interop 是各主流浏览器厂商协作确定优先兼容领域的年度项目。
• 2026 年的提案阶段已完成，各供应商正筛选关键功能领域。
• 此过程与 Baseline 功能纳入周期紧密关联。

4. Baseline 时间轴工具优化
• 由 Rick Viscomi 创建的 Baseline 时间轴工具 获得 UX 改进。
• 新增键盘快捷键（如 -w、-n、-i 等）以快速筛选不同可用性级别的特性。
• 有助于开发者更高效地浏览和评估 Web 平台功能状态。

5. 展望与社区反馈
• 官方邀请社区通过 Issue Tracker 提交 Baseline 相关内容与建议。
• 预计未来 Baseline 将持续扩展新功能，并强化浏览器协同。

author Jeremy Wagner

web.dev

2025 年 9 月基准每月摘要  |  Blog  |  web.dev

了解 2025 年 9 月 Baseline 的各种动态。

#前端 #新动态 #优质博文 #css #html
1. 现在可以使用 CSS 自定义 <select> 元素 —— 多亏了 appearance: base-select，现在有了一种可访问的标准化方法来创建可风格化的 <select> 元素。Adam 分享了这一 “多年酝酿 ”的过程，经过 “数小时的工程设计和协作规范工作”，我们现在拥有了一个不会在旧版浏览器中崩溃的丰富组件。下面我们就来看看 Chrome 浏览器（第一个实现支持的浏览器）是如何运行的，以及如何使用它。 【棒诶，Codepen Example 在这里 】
2. 如何看待 Baseline 和 Polyfill —— 尽管 polyfills 并未作为 Baseline 项目的一部分，但 Baseline 仍能帮助人们在决定是否使用它们时做出一些细微的调整。 #兼容性

在采用网络平台功能时，是否应该使用 Polyfills 的规则并不明确。就像你在网络上做的任何事情一样，在权衡收益和风险的同时，还需要深思熟虑。回顾一下，处理这个问题的一套粗略规则是
• 要明白，虽然 Polyfills 功能在某些方面具有优势，但它们也会带来潜在的性能和可访问性成本，而且可能无法忠实复制未实现的网络功能。
• 如果可能，利用用户数据确定 Baseline 阈值。如果不可能，Baseline 广泛可用功能集是一个很好的起点，可以考虑使用 RUM 洞察数据来做出明智的决定。
• 利用这些数据，评估如果浏览器不支持您希望使用的功能，有多少用户会受到影响，并评估影响的严重程度。
• 与项目利益相关者沟通，确定哪些功能是可以接受的，适合项目目标和业务需求。
• 如果必须使用有限可用性功能，请评估受众和使用风险。除非您的用户只能使用一个浏览器引擎，否则您无法保证兼容性，即使使用多填充功能也是如此。

这些原因就是为什么 Polyfill 不包含在 Baseline 中。Baseline 的作用是告知您所有主流浏览器引擎都支持哪些功能。您仍然需要知道有多少用户可以使用 Baseline 功能，并根据您的用户和项目需求做出决定。Baseline 广泛可用是一个很好的默认设置，并且在许多情况下通常会为用户提供最广泛的 Web 功能支持。

3. 重新审视 CSS border-image —— 深入了解强大的 border-image 属性以及如何以各种创造性的方式使用它：“ 通过切片、重复和设置图像，您可以用最少的代码创建复杂的边框、装饰元素甚至动态覆盖 ”。
4. 网页设计中认知可访问性的最佳实践 —— 这里有很多很好的实用建议，涵盖了改善网站认知可访问性的方法。 #无障碍 #WCAG
5. 25 个令人印象深刻的 HTML5 Canvas 实验 【其中几个我还用过，乐呵】 #webgl #demo
6. 用于 Playwright 和浏览器自动化的 MCP 服务器 —— MCP（模型上下文协议）服务器使某些基于代理（例如 Claude、Claude Code 和 Cursor）能够在其常用沙盒之外的系统上执行操作。微软的这个新项目使这些代理能够以结构化的方式与网页进行交互（就像 Playwright 允许您通过 Python 或 JavaScript 代码进行交互一样）。 #AI #MCP
7. Fancy Components：不断增长的即用型动画 React 组件库 —— 包含大量用于制作各种文本动画的组件，以及用于背景、物理相关动画、SVG 滤镜等的组件。 #组件库 #react #tailwind
via Frontend Focus 685

Chrome for Developers

现在可以使用 CSS 自定义 <select> 元素  |  Blog  |  Chrome for Developers

界面保持不变，焕然一新。