AI 摘要：本文是一份关于 CSS 容器查询的交互式指南，详细介绍了容器查询的语法、使用场景、常见问题及解决方案，并通过大量实例演示如何利用容器查询实现响应式组件设计，替代传统的媒体查询方法。

1. Introduction to container queries
• 容器查询解决了基于容器宽度（而非视口）调整 UI 的痛点，传统媒体查询在此场景下存在局限性。
• 示例：页面头部操作按钮的标签显示/隐藏逻辑通过容器查询优化。

2. Container query syntax
• 基本语法：通过 container-type 和 container-name 定义容器，使用 @container 规则查询。
• 支持简写：container: name / type。

3. Common pitfalls
• 容器不能依赖内容自动调整大小（需显式设置或通过 Flex/Grid 布局控制）。
• 无法直接查询容器自身的样式（需额外包装元素）。

4. Container query units
• 引入容器相对单位（如 cqw, cqh），实现容器内的流体排版和间距控制。

5. Use cases
• 卡片组件：根据容器宽度切换堆叠/水平布局。
• 仪表盘部件：动态调整 widget 样式以适应不同列宽。
• 时间线组件：窄容器显示垂直布局，宽容器显示水平布局。
• 表单输入：基于容器空间自动调整网格列数。

6. Style queries
• 实验性功能（仅 Chrome/Safari TP 支持），通过查询 CSS 变量（如 --featured: true）切换样式。
• 示例：结合 :has() 选择器控制时间线布局。

7. DevTools 支持
• Chrome 开发者工具可调试容器查询应用的元素。

8. Resources & Related articles
• 推荐了容器查询规范、兼容性检查工具及其他相关文章（如 CSS :has() 指南）。

Outro
容器查询标志着响应式设计的范式转变，未来将逐步替代媒体查询在组件级布局中的应用，但媒体查询仍适用于全局布局。

Ishadeed

An Interactive Guide to CSS Container Queries

Learn how to use CSS container queries today.

AI 摘要：本文探讨了如何通过 CSS 自定义属性和 @property 规则，实现嵌套容器中子元素使用外层容器的容器查询单位（如 cqw）而非默认的最近父容器，从而解决嵌套容器场景下的单位计算问题。

1. 问题背景
• 开发者 Matt Wilcox 指出：当存在嵌套容器时，容器查询单位（如 cqw）默认相对于最近的父容器计算，无法直接指定外层容器作为基准，导致布局设计受限。

2. 技术基础
• 容器查询（Container Queries）和容器单位（Container Units）是 CSS 的新特性，允许元素样式基于容器尺寸动态调整。
• 示例代码展示了嵌套容器（.outer-container 和 .inner-container）的结构，以及子元素 .inner-child 使用 20cqw 时默认相对于 .inner-container 计算的问题。

3. 尝试解决方案
• 失败方案 1：直接为 .inner-child 指定 outer 20cqw 语法无效。
• 失败方案 2：通过 CSS 变量传递 --s: outer 20cqw 同样不被支持。
• 部分成功方案：将变量 --s: 20cqw 定义在 .inner-container 中，但子元素继承时仍基于 .inner-container 计算。

4. 最终解决方案
• 使用 @property 注册自定义属性 --s，强制其继承并保留原始计算值（基于 .outer-container 的 20cqw），从而在子元素中正确应用。
• 代码示例：
@property --s {
syntax: '<length>';
initial-value: 0px;
inherits: true;
}

Frontend Masters

Using Container Query Units Relative to an Outer Container

Recently, Matt Wilcox posted on Mastodon:

AI 摘要：Zod 4 作为 TypeScript 生态中广受欢迎的 schema 验证库迎来重大升级，通过性能优化（解析速度提升 3 倍）、内置 JSON Schema 转换、轻量级 @zod/mini 模块等新特性，显著提升了开发效率和应用性能，尤其适合现代 Web 应用和大型项目。

1. 性能优化
• 深层嵌套 schema 解析速度提升 3 倍，内存效率更高
• 核心库体积减少 57%，更适合前端性能敏感场景
• 减少 20 倍 TypeScript 编译器实例化，改善大型项目类型检查速度

2. 轻量级替代方案 @zod/mini
• 专为边缘计算/无服务器环境优化，支持 tree-shaking
• 保留核心功能（如 .parse()），与完整版 Zod 无缝兼容

3. 内置 JSON Schema 转换
• 原生支持 .toJSON() 方法，替代第三方工具
• 示例代码展示如何快速生成符合规范的 JSON Schema

4. 全局注册表 (z.globalRegistry)
• 集中管理 schema 元数据（ID/描述/示例）
• 自动生成可复用的 $defs 引用，简化大型应用维护

5. 增强错误处理
• z.prettifyError 提供多行格式化错误输出，提升调试体验

6. 原生文件验证
• 新增 z.file() 支持 MIME 类型、文件大小等约束
• 示例演示如何验证上传文件的扩展名和尺寸

7. 升级指南
• 通过 npm install zod@latest 升级
• 注意废弃的 API（如 z.nullable() 改为 z.nullish()）

LogRocket Blog

Here's why everyone's going crazy over Zod 4 - LogRocket Blog

Heard the buzz about Zod 4? Learn what’s new in this update, why it matters, and how it could transform your workflow.

AI 摘要：本文介绍了一种使用 CSS animation-timeline 和自定义属性实现现代滚动阴影效果的新方法，通过 CSS 遮罩（mask）替代传统阴影，实现跨背景兼容的水平滚动元素边缘渐变效果，无需 JavaScript 且支持优雅降级。

1. 背景介绍
• 传统方法：通过背景渐变叠加实现滚动阴影（Chris Coyier 曾推荐）
• 新方法：Geoff 使用 animation-timeline 绑定滚动位置与伪元素透明度动画

2. 新方案核心
• 改用 CSS 遮罩（mask）淡出可滚动元素边缘
• 优势：适配深浅背景、无需独立边框，适合水平滚动场景（如表格）

3. 实现步骤
• 可滚动元素初始化
• 示例：响应式差的水平滚动表格
• 使用线性渐变遮罩代码：

.scrollable {
mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000);
}

• 自定义属性与动画定义
• 通过 @property 声明 --left-fade 和 --right-fade 属性
• 关键帧动画控制两侧淡入淡出范围（0-10% 左端动画，90-100% 右端动画）
• 动画与滚动时间轴绑定
• 将 scroll-timeline 关联到 animation-timeline

4. 兼容性与扩展
• 目前 Safari 不支持 animation-timeline，但会优雅降级（无渐变效果）
• 适用场景：滚动吸附（scroll-snap）轮播或卡片组件

5. 总结
• 结合 CSS 新特性（自定义属性动画 + animation-timeline）实现实用效果
• 强调 CSS 近年来的进步：无 JavaScript 依赖、内容无关性

CSS-Tricks

Modern Scroll Shadows Using Scroll-Driven Animations | CSS-Tricks

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

AI 摘要：本文提出了一种通过扩展 CSS 解析器来改进 CSS 功能 polyfill 的新方案，旨在解决当前 CSS polyfill 开发中遇到的解析和样式应用难题。作者建议允许开发者通过 JavaScript 扩展 CSS 解析器，从而直接支持新语法、属性和函数，以减少 polyfill 的复杂性和性能开销。

Intro
• 问题背景：新 CSS 功能的采用因跨浏览器支持不足而受阻，开发者通常需等待功能广泛可用（约 4 年）才会使用。
• 现有方案限制：当前 CSS polyfill（如容器查询 polyfill）需自行解析 CSS，其中 65% 的代码仅用于解析和提取信息，效率低下。

How to (try to) polyfill CSS today
• 收集样式：需从多个来源（如 document.styleSheets、Shadow DOM）获取样式，并监听变动。
• 解析样式：需处理 CORS 限制，手动实现完整 CSS 语法解析（需持续跟进新语法如嵌套）。
• 应用样式：需自行实现级联逻辑、媒体查询和 Shadow DOM 兼容性，复杂度高。

Proposed Solution
• 核心思路：通过 CSS.parser API 让开发者注册新语法（如关键词、函数、属性），使解析器保留相关标记
• 示例 API：registerKeyword()、registerFunction()、registerProperty()
• 优势：减少重复解析工作，提升性能，支持 getComputedStyle 和 @supports 检测

Examples
1. 注册关键词 random：动态生成随机值。
2. 注册函数 light-dark()：根据 color-scheme 返回不同颜色。
3. 注册属性 size ：作为 width/height 的简写，自动展开为声明块。
4. 注册语法 <position-arg> ：扩展 position: fixed 支持附加参数（如 / visual）。

Outcome and considerations
• 收益：
• 降低 polyfill 开发难度，提升性能和鲁棒性。
• 加速新 CSS 功能的采用，允许浏览器厂商快速原型化。
• 风险：
• 需谨慎处理代码执行时机，避免阻塞渲染流程。
• 需浏览器厂商广泛支持，部分功能（如伪元素）可能难以 polyfill。

Next steps
• 撰写详细提案并提交至 CSS WG 征求意见。
• 预计需多年时间推进，但已获得部分 Google 工程师和社区成员的关注。

Bram.us

Polyfilling CSS with CSS Parser Extensions

In April I attended #BlinkOn, the conference for web platform contributors in the Chromium open source project. At the conference I gave a presentation about “CSS Parser Extensions”, a wild idea I have to fix CSS polyfilling once and for all.

If you didn’t…

AI 摘要：本文系统介绍了中文字体网络优化的全流程方案，涵盖字体分包、格式选择、CDN 加速、协议优化、代码级调优等核心环节，通过WOFF2格式切割、高并发 CDN、HTTP/2/3协议、Preconnect 预连接、极小量级加载及CLS布局偏移修复等技术，显著提升网页加载速度与用户体验。

1. 字体分包优化
• 工具推荐：使用 cn-font-split 插件或 vite-plugin-font （适配 Vite / Rspack / Next.js ）
• WOFF2 格式优势：
• 默认采用 Brotli 压缩算法，比 WOFF 节省30%体积
• 支持浏览器广泛，现代项目首选格式
• 代码示例展示自动转换 TTF / OTF为分片 WOFF2

2. 分包切割策略
• 分片大小：建议 70KB / 片，平衡加载速度与命中率（1.5 - 2 秒完成加载）
• 动态加载：按需加载分片，避免全量下载

3. 字体下载优化
• CDN关键要求：
• 必须支持高并发（国内 CDN 可达 1 秒内加载）
• 推荐开启 HTTP / 2 / 3 协议提升并发能力
• 缓存策略：
• 字体分片设置永久缓存（哈希命名防冲突）
• CSS 文件需谨慎设置缓存时效

4. 前端代码优化
• Preconnect 预连接：提前建立 CDN 预连接节省时间
• 禁用 Preload 陷阱：避免破坏按需加载机制
• 极小量级优化：
• 通过 vite-plugin-font 扫描代码用字范围
• ?subsets 参数实现字符级摇树优化

5. 布局偏移(CLS)修复
• 问题根源：Fallback 字体与目标字体度量差异导致重排
• 解决方案：
• 使用 ascent-override 等 CSS 属性校准 Fallback 字体度量
• 工具推荐：fontaine 库（中文适配有限）或 vite-plugin-font 1.2.0+ 自动计算

扩展资源
https://web.dev/font-best-practices/
https://web.dev/reduce-webfont-size
https://web.dev/optimize-webfont-loading/

AI 摘要：本期 Frontend Focus 涵盖前端领域多个热点话题，包括 Google Chrome 可能被拆分的影响争议、新型开发工具 Tonkotsu IDE 的发布、CSS 排版单位优化、3D 特效实现，以及 Firefox 新功能等。同时提供了丰富的教程、工具资源和行业动态，涉及 HTML 局限性、错误信息设计、Canvas 元素优化等实用内容。

1. 社区动态
• Google Chrome 拆分争议：DHH（Rails 创始人）反对强制拆分 Chrome，认为虽然 Google 需为广告市场垄断负责，但拆分 Chrome 可能损害生态
• Firefox 更新：新增标签分组功能，并在 Firefox 139 夜间版支持 View Transition API。
• Brave 浏览器：社区推动拦截 Cookie 横幅功能

2. 技术文章与教程
• 📑 万维网背后的软件在 1993 年的这一天  被放到公共领域，尽管 Web 的概念是在 1989 年发明的
• 3D 翻牌效果：Jhey Tompkins 详解如何用代码模拟机场时刻表的机械翻牌动画（3D split flap），附演示链接。
• 使用 CSS 行高单位完善排版：Jen Simmons 介绍 lh 和 rlh 单位，实现布局尺寸与文本行高的直接关联。
• HTML 局限性：Chris Coyier 探讨为何原生 HTML 不支持模块化引入（includes）
• 如何编写真正帮助用户而不是让他们感到沮丧的错误消息：Amy Hupe 提出关于创建错误消息的实用建议，帮助用户快速恢复并继续浏览您的产品/服务。
• The canvas Element：Heydon Pickering 分析其可访问性与性能取舍。
• CSS 锚点定位：Geoff Graham 解释如何简化元素重叠布局。
• AI 编码的隐性成本: 无论您是全神贯注于 vibe coding，还是觉得 AI 开发有些可疑，本文都会思考这门手艺的乐趣，值得深思。 #AI

3. 工具与资源
• 响应式字体生成器：支持 CSS/Sass 输出，使用 clamp() 函数适配不同屏幕 #响应式 #移动端适配
• Storybook 9 Beta：新增可视化测试、无障碍测试等组件开发功能
• track-list：Miriam Suzanne 推出封装播放列表控制的 Web Component
• 设计令牌名称生成器：当您需要快速入门时，此工具将为您的设计系统创建现成的命名约定

The Mozilla Blog

Related Articles

What happens when 4,500 people ask for the same feature? At Firefox, we build it. Tab groups have long been the most requested idea on Mozilla Connect –

AI 摘要：本期 React Status 聚焦 React Labs 最新实验性功能（视图过渡与 <Activity> 组件），深入解析 use client 指令的设计哲学，并汇总 Next.js 课程、React 组件优化技巧、工具链更新（如 Storybook 9 Beta）及 JavaScript 生态动态（如 V8 新特性）。

1. 社区动态
• React 团队发布实验性功能 View Transitions 和 <Activity> 组件
• 其他开发中的功能未公开细节。
• 补充资源：Theo Browne 的 40 分钟视频解析；Jack Whiting 的 Next.js 视图过渡实践案例 #course
• Dan Abramov 解析 use client 和 use server 指令
• 🕹 React Jam 游戏开发赛事回归（10 天限时挑战）。
• 🤖 bhvr：基于 Hono + Vite 的全栈 React 新框架。
• Matt Abrams 提供了一些在使用 Cursor AI 开发工具针对 React/Next.js 的优化建议。
• 📺 Alem Tuzlak 的 8 年 React 组件设计经验分享。
• 📄 TanStack Query 默认配置覆盖场景、使用 AI SDK 进行 React 中多个 LLM 模型选择、Promise “序列化“ 实践。

2. 工具与库更新
• 🛠 Storybook 9 Beta：强化组件测试（交互/视觉/无障碍），支持 React Native。
• 🤖 react-native-ai：本地运行 LLM，兼容 Vercel AI SDK。
• Reactylon：基于 Babylon.js 的 React XR 框架，支持 JSX 编写 3D 场景。
• Yet Another React Lightbox：适用于 React 16.8+、17 和 18，支持多种输入法，预加载图像，支持视频幻灯片、缩放和高级定制，有一个在线游乐场 
• 其他：React Modal Sheet 4.0、Gridstack.js 12.1、next-intl 4.1 等。

3. JavaScript 生态动态
• V8 新增 Explicit Compile Hints（显式编译提示）
• SolidJS 十年回顾，Bun 发布 LLM 友好文档
• Node.js v18 EOL，v24 即将发布
• 现在可以将 JSR 包与 pnpm 和 Yarn 一起使用

Deno

Add JSR packages with pnpm and Yarn | Deno

You can now access JSR packages via pnpm and Yarn. Here's how.

AI 摘要：本文介绍了 2025 年最受欢迎的 10 款 JavaScript/HTML5 游戏引擎，涵盖 2D、3D、物理引擎及无代码开发工具，分析了各引擎的优缺点、适用场景及学习曲线，帮助开发者根据项目需求选择合适的引擎。

1. 引言
• JavaScript 和 HTML5 通过 WebGL API 支持复杂 2D/3D 图形渲染，无需第三方插件。
• 游戏引擎可加速开发，避免重复造轮子。

2. 如何选择引擎
• 2D vs. 3D 支持：如 Pixi.js（2D）、Three.js（3D）。
• 学习曲线：Phaser 和 Construct 等引擎适合初学者，其他引擎可能需要扎实的 JavaScript 或游戏开发经验。
• 内置工具：Godot、PlayCanvas 等提供可视化编辑器。
• 性能与移动优化：Phaser + Cordova 或 Defold 适合移动端。
• 许可证与成本：多数开源（MIT/Apache），Construct 为免费增值模式。
• 社区资源：Three.js、Phaser 和 Babylon 等热门引擎社区活跃，文档丰富。

3. 引擎详解
• Three.js：最流行的 3D WebGL 库，适合渲染和可视化，但非完整游戏引擎。
• Pixi.js：高性能 2D 渲染，支持跨平台，但功能较单一。
• Phaser：专注 2D 游戏，插件丰富，支持 TypeScript。
• Babylon.js：微软支持的 3D 引擎，适合跨平台应用。
• Matter.js：轻量 2D 物理引擎，适合模拟碰撞和运动。
• PlayCanvas：云端协作的 3D 引擎，内置物理系统。
• GDevelop：无代码/低代码 2D/3D 引擎，适合初学者。
• Defold：轻量 2D/3D 引擎，免费且支持多平台导出。
• Godot：开源全能引擎，支持 2D/3D，社区庞大。
• Construct：无代码 2D 引擎，适合快速原型设计。

4. 总结
• 如果寻找强大的 Web 渲染工具，Three.js 是首选
• 如果想要带有可视化编辑器的一体化游戏引擎，Godot、Defold 或 GDevelop 等工具可以在 2D 和 3D 开发的可用性和功能之间取得出色的平衡。

LogRocket Blog

Best JavaScript and HTML5 game engines (updated for 2025) - LogRocket Blog

Check out this comparison guide for the top open-source and commercial HTML5 game engines for browser-based and mobile game development.