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 根据情绪生成配色方案。

AI 摘要：介绍了一个名为 The Museum of Digital Influence 的虚拟博物馆，该博物馆通过 WebGL 技术构建，旨在展示数字媒体和互联网文化的演变。博物馆内容丰富，具有较高的资料价值，采用 AI 生成的缩略图和人工撰写的详细说明，用户可以通过滚动和点击进行浏览。

AI 摘要：作者在重建个人网站后，遇到了网站部署到服务器后无法正常运行的问题。经过一系列的调试和尝试，发现问题出在服务器上的优化插件自动将不安全的链接转换为安全链接，导致SVG命名空间URL发生变化，从而引发了JavaScript错误。

1. 问题描述
• 作者重新构建了个人网站（johnrhea.com），在本地测试无误后，上传到服务器后网站无法正常运行。
• 动态生成的星星无法显示，游戏模式下页面空白，展示作品的页面上的小汽车也无法显示。

2. 初步调试
• 作者尝试通过谷歌搜索解决问题，但没有找到有效的答案。
• 控制台显示一些错误，但这些错误无法解释问题所在。
• 作者在本地使用 car.style.transform 设置变换时没有问题，但在服务器上 car.style 显示为未定义。

3. 尝试解决方案
• 作者尝试使用 setAttribute 方法来设置样式，但仍然遇到新的错误。
• 尝试联系服务器提供商，检查是否有服务器配置问题，但未发现任何问题。
• 作者向ChatGPT寻求帮助，但ChatGPT的建议未能解决问题。

4. 问题的最终解决
• 通过ChatGPT的建议，作者在控制台输出SVG元素的命名空间，发现服务器上的命名空间URL多了一个“s”。
• 作者意识到这是由服务器上的优化插件自动将不安全链接转换为安全链接导致的。
• 关闭该优化功能后，网站恢复正常运行。

5. 总结与反思
• 作者强调了服务器配置和优化插件可能对网站运行产生意想不到的影响。
• 鼓励读者在评论中分享类似的调试经历和解决方案。

CSS-Tricks

This Isn’t Supposed to Happen: Troubleshooting the Impossible | CSS-Tricks

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.

AI 摘要：本文探讨了如何使用容器查询来动态调整用户界面组件的布局，根据外部空间的可用性决定将分页箭头放置在组件内还是组件外，详细介绍了利用视口单位和容器查询的实现方法。

1. 引言
• 介绍了分页箭头的两种布局方式：外部和内部，取决于外部空间的可用性。
• 提到此方法由 Adam Argyle 提出，并对此方法进行详细探讨。

2. 实现原理
• 讨论了使用视口单位和容器查询的基本原理。
• 强调了容器查询的优势，即无需预设容器的具体尺寸，布局可以根据外部空间的变化动态调整。

3. 代码示例
• 展示了 HTML 结构，包含一个包装元素和内部元素，以及箭头元素。
• 提供了 CSS 代码，定义了容器的宽度使用 min(500px, 100vw)，确保在不同视口大小下的灵活性。
• 介绍了如何使用 @container 查询来检测容器尺寸，并在满足条件时改变内部元素的样式。

4. 具体应用
• 详细解释了如何使用 calc() 函数计算外部空间是否足够放置箭头。
• 展示了使用 translate 属性移动箭头的 CSS 代码。
• 附上了展示效果的视频，证明方法的有效性。

5. 结论
• 强调了这种方法的灵活性，即容器大小可变，而布局仍能正确响应。
• 提及可以使用自定义属性来进一步提高代码的灵活性。

Frontend Masters

Container Query for “is there enough space outside this element?”

Say you had a UI component that had pagination arrows for whatever reason. If there was enough space on the outside of that component, you wanted to put those arrows outside, like this this:

AI 摘要：本文深入探讨了CSS中高度设置的问题，揭示了为什么百分比高度有时不起作用，并提供了解决这些问题的有效方法。文章详细解释了CSS中宽度和高度计算的本质差异，并介绍了使用Flexbox和Grid布局来解决高度设置难题的策略。

• 引言：作者分享了自己学习CSS初期对高度设置问题的困惑，并指出理解背后的机制是解决问题的关键。

• 循环计算
• 解释了 CSS 中宽度和高度计算的根本区别：宽度基于父元素计算，而高度基于子元素。
• 描述了当子元素尝试设置百分比高度时，父子元素之间形成循环计算的问题，导致浏览器忽略百分比高度声明。

• 可知的高度
• 介绍了通过为父元素设置明确高度（如px或rem单位）来打破循环计算的方法。
• 展示了如何使用 rem 单位替代 px 单位，以提升布局的可访问性。
• 讨论了如何在嵌套元素中使用百分比高度，只要它们基于一个明确的尺寸。

• 从顶到底的百分比
• 探讨了在顶级 html 元素上设置百分比高度的效果，并解释了 html 元素的特殊性。
• 提到过去使用百分比高度确保布局填充整个视口的方法，以及现在使用 svh 单位的替代方案。

• 最终挑战
• 分析了使用固定高度（如 24rem ）可能导致内容溢出的问题。
• 展示了使用 min-height 替代 height 的尝试，但指出这仍然不能解决百分比高度的问题，因为 min-height 并不提供固定尺寸。

• 解决方案
• 介绍了使用 Flexbox 和Grid布局来解决高度设置问题的方法。
• 解释了如何通过设置 display: grid 或 display: flex 来创建新的格式化上下文，使子元素自动填充父容器。
• 提供了使用 Flexbox 和 Grid 的具体代码示例，并解释了它们的布局机制。

Joshwcomeau

The Height Enigma • Josh W. Comeau

One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting “height: 100%” would have no effect at all. When I finally figured out what was going on…

AI 摘要：本章节详细介绍了如何在 Node.js 中处理文件系统路径和文件 URL，涵盖了路径相关的功能和 API 的使用方法。

• 路径模块的导入：介绍了如何导入 node:path 模块，并说明了在某些情况下可以省略导入语句。
• 路径 API 的访问方式：列出了三种访问 Node.js 路径 API 的方法，并展示了平台特定版本的 API 使用示例。
• 路径解析：详细解释了 path.parse() 函数在不同平台（Windows 和 macOS）上的使用差异，展示了如何正确解析 Windows 路径。
• 路径分隔符和路径定界符：定义了路径分隔符和路径定界符的概念，并展示了当前平台的分隔符和定界符。
• 环境变量 PATH：展示了在不同操作系统（macOS 和 Windows）上的 PATH 变量的示例，解释了路径分隔符和定界符的使用。
• 当前工作目录（CWD）：介绍了 process 全局变量的使用方法，展示了如何获取和设置 CWD，并说明了 CWD 在路径处理中的作用。
• 路径类型：详细解释了 Unix 和 Windows 系统中的绝对路径和相对路径的概念，并展示了如何使用 path.resolve() 解析相对路径。
• 重要目录的路径：介绍了 node:os 模块中的 os.homedir() 和 os.tmpdir() 函数，展示了如何获取用户主目录和临时文件目录的路径。
• 路径拼接：详细解释了 path.resolve() 和 path.join() 函数的使用方法和区别，并展示了如何使用这些函数拼接路径。
• 路径解析和规范化：展示了 path.resolve() 和 path.normalize() 函数的使用示例，并解释了它们的作用。
• 路径相对化：介绍了 path.relative() 函数的使用方法，展示了如何获取从源路径到目标路径的相对路径。
• 路径解析和格式化：详细解释了 path.parse() 和 path.format() 函数的使用方法，并展示了如何使用这些函数解析和格式化路径。
• 路径操作：介绍了 path.dirname() 和 path.isAbsolute() 函数的使用方法，并展示了它们的作用。
• 跨平台路径处理：讨论了如何在不同平台上使用相同的路径，并介绍了如何将路径存储为平台无关的数组。
• 路径匹配：介绍了 minimatch 模块的使用方法，展示了如何使用 glob 表达式匹配路径。
• URL 处理：详细解释了 URL 类的使用方法，展示了如何创建和操作 URL 对象。
• 文件路径与 URL 的转换：介绍了 url.fileURLToPath() 和 url.pathToFileURL() 函数的使用方法，并展示了如何在文件路径和 URL 之间进行转换。
• 模块入口点检测：介绍了如何在 CommonJS 和 ESM 模块中检测当前模块是否为入口点，并展示了相应的代码示例。

AI 摘要：本文是 Node Weekly 第 578 期的内容，发布时间为 2025 年 5 月 13 日，聚焦于 Node.js 和 JavaScript 生态系统的最新动态。文章涵盖了新工具和库的发布（如 Feedsmith 和 Hyparquet）、Node.js 版本更新（如 v24.0.1）、性能优化进展、以及 npm 包创建的最佳实践等内容。此外，还介绍了 JavaScript 相关工具和技术（如 k6 和 Mantine），并提供了多个实用库和资源的链接。编辑 Peter Cooper 提到将参加 Google I/O，newsletter 将暂停至 5 月 27 日。

1. 更新动态

• Node v24.0.1 发布：修复了 v24.0 中移除的 SlowBuffer 功能，因仍有流行包依赖此功能；同时 Lizz Parody 文章总结了 Node 24 的新特性。
• 性能优化动态：Node 性能专家 Yagiz Nizipli 正在改进 Node 的 HTTP 性能。
• 其他更新：Bun v1.2.13 提升了 Node.js 兼容性（如 worker_threads 支持）；VS Code 新增对 Node 网络调试功能的支持；Node.js Next 10 调查仍在进行中，旨在帮助核心团队确定优先级。

2. 技术文章

• 创建现代 npm 包：Brian Clark 提供了一份 2025 年适用的分步指南，介绍创建 npm 包的最佳实践，内容近期已更新。 #工程化
• 文件系统路径与 URL：Dr. Axel Rauschmayer 探讨了在 Node 中处理文件系统路径和文件 URL 的方法。

3. 工具推荐

• Feedsmith：一个 Web 订阅解析和生成工具，支持 RSS、Atom、JSON Feed 等格式，解决了现有库的一些问题，尽管尚处于早期阶段，但核心功能已就绪。Jean-Philippe Monette 的成熟 Feed 库已经有十多年的历史了，如果您想要专注于 Feed 生成，它也刚刚进行了一次重大更新 （v5.0）
• PptxGenJS：一个成熟的库，用于用 JavaScript 创建 PowerPoint 演示文稿，支持图形、表格和其他典型的幻灯片对象等。
• ANSIS 4.0：一个支持多环境的 ANSI 颜色库，适用于终端、浏览器等，v4.0 带来重大更新。
• Hyparquet：无依赖的 JavaScript 库，用于解析 Parquet 文件格式，支持浏览器环境。
• jsdiff 8.0：用于文本差异比较的库，支持多种比较方式。
• Glob 11：JavaScript 中最准确且第二快的文件匹配库。
• 其他工具：包括 sqs-consumer、express-openapi-validator、OpenAI Node、dnt、cron-parser 和 Undici 等库的最新版本更新。
• k6 1.0：Grafana 推出的负载测试工具，支持用 JavaScript/TypeScript 编写脚本。

AI 摘要：本文详细介绍了如何使用 CSS 的新特性 shape() 函数，通过 clip-path 创建花朵形状。作者从 shape() 函数的基本概念入手，聚焦于 arc 命令，结合几何原理和具体代码示例，展示了如何绘制复杂的花朵形状，并通过调整弧线的大小和方向生成不同的形状效果。文章还探讨了代码优化技巧以及浏览器的兼容性问题，适合对 CSS 高级形状设计感兴趣的开发者学习。

• 什么是 shape() 函数？
• 介绍了 shape() 作为 clip-path 的新值，突破了 polygon() 只能绘制直线的限制，支持绘制曲线。
• 与 SVG 路径语法相似，提供了更多的灵活性，但语法复杂，需要大量练习。
• 本文聚焦于 arc 命令，下一篇文章将探讨 curve 命令，并以创建有趣形状为目标。
• Arc 命令详解
• arc 命令用于在两点之间绘制椭圆弧，本文简化讨论为圆弧情况。
• 通过几何原理解释了两点和半径确定的两个圆，以及由此生成的四种弧线（小/大，顺/逆时针）。
• 提供了 shape(from Xa Ya, arc to Xb Yb of R [large or small] [cw or ccw]) 的代码示例，并通过演示说明不同参数的效果。
• 创建花朵形状
• 以之前的文章为基础，展示了如何使用 shape() 绘制花朵形状，通过多个小圆弧连接形成花瓣。
• 详细讲解了点的坐标计算和半径公式，使用 Sass 循环生成代码，并通过调整参数解决反向形状问题。
• 最终通过 small ccw 和 large cw 组合，得到目标花朵形状，并展示了其他有趣的形状变体。
• 结论与示例
• 总结了 arc 命令的使用，鼓励读者从圆弧扩展到椭圆弧的学习。
• 以心形为例作为最终演示，引导读者自行思考实现方式，并推荐作者的在线生成器获取更多代码资源。
• 浏览器兼容性
• 指出目前仅 Chrome、Edge 和 Safari 完全支持 shape() 函数，提醒开发者注意兼容性问题。

Css-Generators

CSS Generator for Flower Shapes

Create fancy flower shapes using CSS mask. Get an optimized & modern code in no time.