#前端 #新动态 #优质博文 #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

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