#Newsletter #新动态 #前端 #CSS #HTML #JavaScript #WCAG #性能优化 #tools #AI
🚀 Frontend Focus #702 — July 23, 2025

AI 摘要：本期《Frontend Focus》第702期聚焦前端领域的最新动态、实用工具、深度文章与观点。内容涵盖SVG基础入门、HTML 2025年度调查、AI辅助调试、可访问性标准解读、CSS动画、性能优化、前端框架更新等多个方面，为开发者提供了丰富的学习资源和行业洞察，同时介绍了多款前端实用工具和库，以及一些趣味简讯和广告。

1. 社区动态
• HTML 2025 年度调查启动：第三届年度 HTML 调查，旨在了解开发者如何使用 Web 平台日益增长的能力，其结果将直接影响明年 Interop 项目的优先级。
• WCAG 纯英文版：让无障碍标准易于理解：一个可搜索的资源，为官方 Web 内容无障碍指南（WCAG）提供了一个初学者友好的指南，使其更易于消化。
• Firefox 141 发布：新版本增加了垂直标签页和 AI 标签组织智能功能。
• GitHub 支持欧盟主权技术基金：GitHub 正在倡导设立一项欧盟主权技术基金。
• 为什么不信任 WCAG 2.2 以及对 3.0 的期望：Daniel Schwarz 提出了他对 WCAG 2.2 的担忧，并探讨了 WCAG 3.0 如何改进这些问题。
2. 文章、观点与教程
• 时间不多，范围却很多：滚动驱动动画的 animation-ranges 速查表 —— 一篇关于滚动驱动动画及其可用选项的入门指南。
• 小屏幕，大影响：为功能手机开发 Web 应用的被遗忘艺术：探讨了功能手机在2025年仍有意义的原因，以及如何为这类设备构建和发布Web应用。
• Tailwind 是“最糟糕的综合体”：一篇观点文章，认为 Tailwind 是 “将 CSS 和现代 Web 开发中所有糟糕之处结合在一起的令人遗憾的倒退”。
• 2025 年前端性能检查清单：一份高层次的清单，列出了创建快速、高效 Web 应用时需要牢记的事项。
• 利用 Web Speech API 让你的网站开口说话：一种简单直接的方法，为网站添加语音功能。
• 糟糕导航的隐性成本：信息架构如何直接影响业务指标：探讨了信息架构对业务指标的直接影响。
3. 开发工具与资源
• Glass3D 生成器：一个生成 3D 玻璃效果的 CSS 工具：一个允许编辑背景滤镜设置、颜色和纹理的工具，并实时预览效果。
• Astro 5.12 发布：新版本特性包括升级的 Netlify 开发体验、内容加载器中的 TOML 支持等。
• Tiptap v3：无头富文本编辑器框架：为构建强大的富文本编辑体验提供了基础，v3 版本包含大量开发者体验改进，如动态UI的卸载和重新挂载、创建自定义视图的 “Markviews”、SSR 模式等。
• macOS 光标 PNG 图片集合：一个提供各种 macOS 光标 PNG 图片的网站。

author Frontend Focus 编辑团队

State of HTML 2025

Take the State of HTML survey

#Newsletter #前端 #JavaScript #CSS #新动态 #AI
🚀 Frontend Focus #701

AI 摘要： 本期《Frontend Focus》（第 701 期，2025 年 7 月 16 日）涵盖了前端开发的多个热点话题，包括在严格约束下创新的项目案例、Apple 在浏览器引擎选择上的争议、WebAssembly 的广泛应用、CSS 新特性和工具的使用，以及一系列实用的前端工具和资源。文章还提到 Mozilla 即将为 Firefox 添加 WebGPU 支持，并探讨了 AI 对开源开发者生产力的影响，旨在为前端开发者提供最新的技术动态和实用技巧。

1. “I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since”：通过一个项目案例，Mike Hall 展示了在带宽和处理能力等严格约束下的创新设计，提醒开发者考虑更广泛的用户需求，设计更具包容性的产品。 #性能优化
2. “Apple’s Browser Engine Ban Persists, Even Under the DMA”：Open Web Advocacy 指出 Apple 在 iOS 浏览器引擎选择上未能有效遵守欧盟《数字市场法案》（DMA），存在阻碍竞争的问题。
3. “WebAssembly: Yes, But for What?”：Andy Wingo 在 ACM Queue 上分享了 WebAssembly 在浏览器和服务器端的广泛应用，探讨其如何逐渐渗透到各个领域。 #WASM
4. 简讯（IN BRIEF）：
• Mozilla 将在 Firefox 141 中添加 WebGPU 支持（初期仅限 Windows，后续扩展至 macOS 和 Linux）。
• 一份报告分析了 AI 对开源开发者生产力的影响。
• Firefox 团队寻求用户对 Mozilla 浏览器的真实反馈。
• Andy Bell 分享了一个 CSS 代码片段，为锚定 URL 添加必要的空间，提升用户体验。
5. 文章、观点与教程（Articles, Opinions & Tutorials）：
• CSS 行长度设置 - Daniel Schwarz 介绍如何利用 clamp() 和 calc() 等工具更轻松地设置文本行长度，并展望未来发展。
• 纯 HTML 和 CSS 编写 - Joel Dare 分享为何在 2025 年仍坚持使用纯 HTML 和 CSS。
• ARIA 角色与属性使用 - Michael Beck 讲解如何有效使用 ARIA 角色和属性。 #WCAG
• 滚动行为设计 - Megan Chan 探讨何时应保存用户的滚动位置。
• AI 与网页设计 - Noah Davis 认为模板而非 AI 才是网页设计的真正“杀手”。
6. 工具、代码与资源（Tools, Code & Resources）：
• SveltePlot - Gregor Aisch 开发的 Svelte 可视化框架，基于 D3，支持多种图表类型。
• Eleventy LibDoc - IT Automotive Design System 提供的一个 Eleventy 起步项目，用于创建美观直观的文档站点。
• SplitThing - Florian Reintgen 开发的工具，可将图像分割为自定义网格并下载。
• Chili3D - xiange chen 开发的基于 Web 的 3D CAD 应用，利用 WebAssembly 和 Three.js 实现接近原生性能。 #webgl
• designtokens.fyi - Design Systems House 提供的设计令牌术语词汇表，包含 33 个相关术语解释。
• Check Server-Side Rendering (SSR) - Punit Sethi 开发的工具，帮助检查网页元素的服务器端渲染情况。
• FontGen - 智能字体配对工具，包含 1000+ 字体（需注册）。
• Pandabox - StJohn 开发的 Astro 轻量级灯箱和画廊组件。

Medium

I’m more proud of these 128 kilobytes than anything I’ve built since

I once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content Accessibility Guidelines (WCAG) and aesthetically pleasing. ‘It can be pretty…

#优质博文 #前端 #CSS #WCAG
Setting Line Length in CSS (and Fitting Text to a Container)

AI 摘要：本文详细探讨了在 CSS 中设置文本行长和使文本适应容器的方法，强调了行长对可读性的重要性，并提供了具体的 CSS 技术和代码示例。文章从行长的基本概念出发，结合 WCAG 指南和研究数据，建议最佳行长为 50-75 个字符，同时介绍了如何使用 ch 单位、 clamp() 和 min() 函数实现响应式设计。此外，文章还介绍了通过 JavaScript 和纯 CSS 方法让文本适应容器宽度，并展望了未来可能出现的 text-grow 和 text-shrink 属性，旨在简化文本适配过程。

author Daniel Schwarz

CSS-Tricks

Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.

#优质博文 #前端 #无障碍 #WCAG
Please, can we have ARIA Notify

AI 摘要：本文作者 Nic Chan 强烈呼吁推动 ARIA Notify API 的实现，以解决当前 ARIA Live Regions 在无障碍开发中的诸多问题。文章详细分析了 Live Regions 的局限性，包括隐藏元素时的无效性、模态对话框中的管理复杂性、开发者的实现难度、规范内置的不一致性以及国际化翻译支持的不足。作者通过自己在 Audiom 项目中的经验，阐述了 Live Regions 在实际应用中的困境，并对 ARIA Notify API 寄予厚望，认为它能提供更精细的控制和更好的用户体验，同时希望未来能解决翻译等问题，避免成为另一个技术上存在但实用性受限的工具。

author Nic Chan

Nic Chan

Please, can we have ARIA Notify

A hate letter to live regions.

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

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