AI 摘要：Frontend Focus 第 697 期（2025 年 6 月 18 日）涵盖了前端开发的最新动态和技术趋势，重点介绍了 CSS 间隙样式的新方法、HTML 规范更新、前端开发者的趣味清单以及多个工具和资源。文章还包括了关于 CSS 动画、ARIA accessibility、浏览器扩展风险等教程和观点，以及对 Apple WWDC 25 的浏览器和设计系统的批判性分析。通过详细的资源和案例，读者可以深入了解前端技术的最新发展和实用技巧。

1. CSS 新特性与文章
• CSS gap decorations 新方法：由 Microsoft Edge 团队分享的 gap decorations 实现进展，旨在替代伪元素 hack，并提供互动演示页面（需在 Chromium 浏览器中启用标志）。
• CSS 动画中的变换顺序：Jake Archibald 探讨了 CSS 变换动画的复杂算法，提醒开发者避免不自然的动画效果，并通过趣味演示（如猫咪动画）解释实现方法和潜在问题。【好文】
• 如何跟上新的 CSS 功能：Sacha Greif 推荐了跟踪 CSS 新特性的资源，帮助开发者超越无目的的搜索，保持技术前沿。
• 打破边界：用（S）CSS 构建七巧板：Sladjana Stojanovic 通过构建七巧板拼图，探索 CSS 在创建交互用户界面时的极限。
• CSS 网格属性对比：Chris Coyier 分析了 1fr 1fr、auto auto 和 50% 50% 在创建列时的细微差异，帮助开发者理解输出效果。

2. HTML 与安全性更新
• HTML 规范变更：Chrome 团队介绍了 HTML 规范中关于属性中 < 和 > 转义的最新变化，旨在防止 mutation XSS 漏洞，提升安全性。
• 前端开发者清单：Nic Chan 以幽默的方式列举了前端开发者常见的“怪癖”，提供了一个有趣的互动网站，让读者探索和娱乐。
• 成为更好的前端工程师：Den Odell 建议通过一周的值班经历来提升前端工程技能，分享实战经验。

3. 无障碍与用户体验
• ARIA 入门指南：Eric Bailey 分享了关于“无障碍富互联网应用”的实用知识，破除常见误解，帮助开发者加深对 ARIA 的理解。
• 构建无障碍 UI 的理由：Nolan Lawson 阐述了构建无障碍用户界面的“自私”理由，强调其对开发者自身和用户的双重益处。
• 汉堡菜单图标的辨识度：Kate Kaplan 讨论了汉堡菜单作为一种常见模式在用户中的辨识度，同时指出其固有的权衡问题。

4. 浏览器与行业动态
• Apple WWDC '25 浏览器分析：Alex Russell 对 Apple 在 WWDC '25 上的浏览器和网页相关公告提出批评，指责苹果 “gaslighting” and “suppressing the web”.
• Apple 新设计系统问题：Nat Tarnoff 针对 Apple 的“Liquid Glass”设计系统提出无障碍方面的潜在问题，呼吁关注用户体验。
• Payload CMS 加入 Figma：James Mikrut 宣布 headless CMS Payload 被 Figma 收购，将继续开源，并计划以独特方式与设计系统集成。

5. 工具与资源推荐
• Anchors Tailwind 插件：Toolwind 提供了一个简易 API，用于在 Tailwind 项目中尝试 CSS Anchor Positioning，尽管浏览器支持尚未完全。
• Critical CSS Generator：Kigo 推出一个基于 Web 的工具，可从任意 URL 提取关键 CSS，支持自定义视口和渲染等待时间，并提供集成指南。
• DarkModeJS 2.0：Assortment 发布了一个实用包，利用 matchMedia API 和 prefers-color-scheme 媒体查询管理暗模式切换。
• RampenSau：David Aerne 开发了一个使用色调循环和缓动函数生成调色板的库，支持主页上的互动调整设置。

6. 其他教程与观点
• 可视化网站构建工具未流行原因：Salma Alam-Naylor 探讨了可视化网站构建工具未能广泛流行的原因，分析其局限性。
• 恶意浏览器扩展风险：Kush Pandya 警告了恶意浏览器扩展日益增长的风险，提醒开发者注意安全隐患。

Chrome for Developers

A new way to style gaps in CSS  |  Blog  |  Chrome for Developers

Say goodbye to border and pseudo-element hacks.