Web 每周 #140 (#博客文章)
内容提要
《Web Weekly》回归，已有超过5000名订阅者。文章讨论了生成CSS内容的替代文本、链接的键盘可访问性功能、重新实现浏览器原生功能的挑战、下一个ECMAScript规范的批准、在操作附近显示反馈的重要性、letter-spacing CSS属性的行为、吸引眼球的CSS、新的Chrome滚动事件、程序化复制和粘贴、改进Chrome中的性能指标、在React中使用inert属性以及text-underline-position CSS属性。文章还介绍了有价值的项目，提到了Whirl上的加载旋转器，并以呼吁捐赠和反馈作为结尾。
延伸解读
重新实现原生功能的隐藏成本
文章以链接为例，指出浏览器原生元素内置了大量键盘可访问性功能，且这些功能因浏览器和操作系统而异。用 JavaScript 重新实现时，开发者很容易忽略这些细节，导致用户体验下降。因此，除非有充分理由，否则应优先使用原生 HTML 元素，避免重复造轮子带来的可访问性风险。
CSS 属性的意外行为：letter-spacing
设置 letter-spacing 时，字符之间会增加间距，但最后一个字符的外侧也会多出相同的间距。这个细节常被忽视，却可能影响标题或按钮的视觉对齐。文章提醒开发者注意这一行为，并在需要精确控制间距时采取相应调整，例如通过负边距或容器内边距来抵消。
生成 CSS 内容的替代文本进入基线
Safari 17.4 和 Firefox 128 已支持为生成的 CSS 内容设置替代文本，这意味着伪元素中的装饰性字符可以被辅助技术正确忽略或朗读。虽然目前可能仍需回退方案，但这一进展对提升可访问性意义重大，尤其是避免屏幕阅读器读出无意义的 Unicode 字符。
ECMAScript 2024 与前端工具更新
ECMAScript 2024 规范已获批，带来新的正则和 Promise 特性、Object.groupBy 等。同时，Chrome 改进了性能指标调试工具，并即将推出 scrollSnapChange 和 scrollSnapChanging 滚动事件。React 19 将支持 inert 属性，在此之前开发者可使用变通方法。这些更新共同推动着前端开发效率与体验的提升。
Q&A
如何为生成的CSS内容设置替代文本？
可以在CSS中使用alternative text属性来为生成的内容设置替代文本，Safari和Firefox已支持此功能。
ECMAScript 2024的新特性有哪些？
ECMAScript 2024包括新的正则表达式和Promise特性、Object.groupBy方法以及低级语言特性。
在React中如何使用inert属性？
inert属性将在React 19中得到支持，当前可以使用一些变通方法来实现类似功能。
Chrome的新滚动事件有哪些？
Chrome即将推出新的滚动事件，包括scrollSnapChange和scrollSnapChanging。
如何改善Chrome中的性能指标？
Chrome的最新Canary版本提供了改进的工具，可以帮助用户更好地调试性能指标。
有哪些推荐的有价值项目？
推荐的项目包括codesenberg/bombardier（HTTP基准测试工具）、hzeller/timg（终端图像和视频查看器）和exelban/stats（macOS系统监控工具）。
