AI 摘要：本期 Frontend Focus 涵盖了 CSS 高度行为解析、Next.js 课程、Figma AI 建站工具争议、Safari 新特性、ARIA 资源合集等前端领域热点内容，同时推荐了字体管理、动画库等实用工具，并探讨了经典 88x31 按钮的文化意义。

1. CSS 高度行为解析《The Height Enigma》：Josh W. Comeau 通过可视化示例解释百分比高度在 CSS 中的“神秘”行为，揭示其底层机制。【之前发了】

2. Figma Sites 争议

Figma 推出 AI 建站工具，可将设计稿直接发布为网页，但开发者批评其生成代码冗余（类似 Dreamweaver）。相关评论：

• Figma 发布用于创建网站的新 AI 工具 —— Ivan Mehta
• 垃圾代码的真正路径：Figma 站点 — Joe Dolson
• 不要使用 Figma 网站在 Web 上发布您的设计... — Adrian Roselli
• Figma 网站比您想象的更糟糕 — Kevin Powell

3. 行业动态（IN BRIEF）
• Safari 18.5 支持 macOS 声明式 Web Push。新增功能
• CSS 工作组征集 Anchor Positioning 反馈
• Manuel Matuzović 整理 100+ ARIA 相关 CodePen 示例
• Firefox 源代码迁移至 GitHub
• Opera 测试“正念浏览器”以减少无意识刷屏 【？】

4. 技术文章与教程
• CSS：Jen Simmons 介绍 contrast-color() 函数，实现自动无障碍配色；<input type=color> 新增 P3 广色域支持。
• 设计系统：Rebecca Hemstad 等分享多语言设计系统的挑战（如 RTL 布局、字体适配）。
• 工具批判：Salma Alam-Naylor 回顾 WYSIWYG 工具失败史，指出 HTML 标记质量是关键。
• 创意实现：Temani Afif 使用 clip-path: shape() 创建复杂花卉图形。
• Brian 探讨 88x31 像素按钮的历史与持久魅力。

5. 工具与资源
• 字体：Fonts Ninja 提供字体筛选与收藏管理，该服务还包括一个 Chrome 扩展程序，可以轻松地为您的收藏夹添加书签。
• 组件库：Basecoat 将 shadcn/ui 转换为无框架版本。
• 动画：tailwind-animations 库支持可调参数动画。
• AI 应用：MoodHue 根据情绪生成配色方案。

Figma

Publish Your Designs On The Web With Figma Sites | Figma Blog

Today, we’re launching Figma Sites, an all-in-one tool for you to design and build custom, responsive websites.