AI 摘要：Jeremy Keith 分享了他在新项目中默认使用的 CSS 实践和代码片段，包括逻辑属性、用户偏好查询、视图过渡、自定义属性和流体排版等现代 CSS 特性，并提供了多个可复用的实用代码片段，强调可访问性和渐进增强的重要性。

1. CSS 习惯用法
• 默认使用逻辑属性（如 inline-start 替代 left），以支持多语言书写方向。
• 通过 prefers-reduced-motion 和 prefers-color-scheme 查询优化用户体验。
• 视图过渡（View Transitions）默认启用，但包裹在减少运动偏好查询中。

2. 颜色与自定义属性
• 使用 OKLCH 色彩空间，即使从十六进制值开始转换。
• 自定义属性的应用策略：避免过早优化，仅在值重复多次时提取为变量。

3. 排版技术
• 使用 clamp() 实现流体文字大小，结合 Utopia 工具调整类型比例。
• 新属性 text-wrap: pretty/balance 和 hanging-punctuation 优化文本换行与标点悬挂。

4. 可复用代码片段
• figcaption 样式：居中短文本，多行时左对齐（max-inline-size: max-content）。
• 焦点样式：a:focus-visible 使用 currentColor 和相对单位（0.25em）。
• 低特异性技巧：通过 :where() 选择器或层叠层（@layer core）确保样式可覆盖。

5. 未来改进方向
• 探索 :has() 选择器和容器查询的更多用例。
• 采用 lh 单位（行高）控制块间距。

6. 读者互动：
• Carlos Espada 补充了 :has() 的实用案例（如 body:has(dialog[open]) 禁用滚动）
• Marc Görtz 提到迁移至 oklch() 色彩和 lh 单位的实践

AI 摘要：本期 Frontend Focus 聚焦 2025 年 Google I/O 大会的前端技术动态，涵盖 Gemini AI 集成、CSS 新特性、开发者工具升级等内容，同时推荐了设计系统构建、Web 可访问性改进等实用工具与文章。

1. Google I/O 2025 重点更新
• 开发者主题演讲：展示 Gemini AI 如何辅助 Web 开发（1 小时 10 分钟）。
• Chrome 与 Web 新特性：包括 Baseline 标准、CSS 功能（如 CSS Carousels）、Core Web Vitals 优化等。
• AI 集成：Gemini AI 将嵌入 Chrome 和开发者工具，提供多模态 Prompt API。
• 工具支持：Visual Studio Code 新增 Baseline 兼容性支持。
• 来自 Google I/O 10 的 2025 项更新：CSS 轮播、AI 驱动的 DevTools、具有多模式功能的提示 API 等

2. AI 与开发工具
• 'MCP is the Coming of Web 2.0 2.0'：Anil Dash 探讨 LLM 与第三方工具交互的开放协议潜力。 #MCP
• Mozilla 观点：呼吁在谷歌反垄断案中平衡搜索与浏览器竞争。
• 开发人员浏览器 Polypane 24.1 新增 CSS 选择器测量工具。
• Safari Technology Preview 219 和 Chrome 137 DevTools 新功能。

4. 教程与文章精选
• CSS 技巧：
• Temani Afif 使用 clip-path: shape() 创建动态 Blob 形状。
• Jeremy Keith 分享实用 CSS 代码片段。
• Zoran Jambor 演示弹性网格布局（Flexible Wrapping CSS Grid）。
• 可访问性：
• HTML 邮件的可访问性仍待改进（基于 40 万封邮件分析）。
• Chris Coyier 探讨 RTL 语言布局翻转问题。
• 多篇文章讨论 WCAG 2 合规性和图片可访问性解决方案。

5. 工具与资源
• AI 相关：
• prompt-kit：基于 shadcn/ui 的 AI 应用组件库。
• Polarr 的 AI Color Match：图像色彩匹配工具。
• 开发工具：
• Datastar：结合 Alpine.js 与 htmx 的超媒体框架。
• jsPad：支持多技术栈的在线代码沙盒。
• Crosspost：跨社交网络一键发布工具。
• ColorPocket：用于组织和选择颜色的 Chrome 扩展程序

6. 其他亮点
• 趣味实验：Eric Parker 尝试用 Windows 95 浏览现代网页（体验极差）

io.google

Google I/O 2025: Developer keynote

Don’t miss Google I/O, featuring product launches, innovations, and insights. Tune in for the live keynotes and sessions.

AI 摘要：本文探讨了如何通过 CSS 实现多级嵌套列表的复杂编号样式（如法律文档中的 1. (a) (i) (A) 格式），并对比了传统选择器、CSS 嵌套和 @counter-style 的解决方案，同时强调了 HTML type 属性作为无 CSS 回退方案的重要性。

1. 问题背景
• 读者提问如何实现法律文档中常见的五级嵌套列表编号（如 1. (a) (i) (A) ）
• 示例场景：物业管理条例中的条款层级结构

2. 基础解决方案
• 传统选择器方法：通过 ol ol 层级选择器逐级设置 list-style-type （如 decimal 、lower-alpha ），但代码冗长且难以维护
• CSS 嵌套优化：利用 CSS 嵌套简化代码结构，使样式与 HTML 层级一一对应

3. 法律文档的特殊需求
• 括号 (a) 或 (i) 是法律格式的必需部分，需通过 @counter-style 自定义计数器样式：
• 扩展预定义样式（如 lower-alpha ），添加 prefix 和 suffix（如 (a) ）。
• 示例： enclosed-lower-alpha 样式将 a 包裹为 (a) 。

4. 无 CSS 兼容性方案
• 使用 HTML type 属性（如 type="a" ）确保旧浏览器或无 CSS 时仍显示正确编号。
• 法律文档中此功能至关重要，避免格式错误导致的法律歧义。

5. 相关资源扩展
• 文中推荐了 CSS-Tricks 关于 list-style 、 @counter-style 和计数器样式的其他文章，供深入学习。

CSS-Tricks

A Reader's Question on Nested Lists | CSS-Tricks

Answering a reader's question about how to create a complex numbering system with CSS list counters.

早上醒来就被推送Bilibili开源了自己的视频生成模型anisora

AI 摘要：作者 Ruslan 探讨了生成器（Generators）的实用性和闭包（Closures）的替代方案，通过一个移动平均计算的例子对比了两者的实现方式，并分享了个人对生成器语法适应性的思考。

1. 引言
• 作者 Ruslan 表达了对生成器适用场景的探索兴趣（2025年5月16日）。
• 提出闭包可能在某些任务中替代生成器的观点。

2. 代码示例：闭包实现移动平均计算
• 定义 calculateMovingAverage 函数，返回一个闭包函数。
• 闭包内部逻辑：
• 检查数据边界（windowStart > values.length-1 时返回 undefined）。
• 滑动窗口截取数据并计算平均值（slice + reduce）。
• 通过 nextAverage() 逐步获取计算结果，并在点击事件中更新 UI。

3. 生成器与闭包的对比
• 隐式对比：生成器（未展示代码）可能提供更简洁的状态管理（如 yield）。
• 闭包需显式维护状态（如 windowStart 变量）。

4. 结论与个人体会
• 作者逐渐适应生成器的语法设计（“ergonomics is growing on me”）。
• 暗示生成器在复杂状态场景下更具优势，但未深入展开。

Alex MacArthur

I think the ergonomics of generators is growing on me.

I took a stab at getting more familiar with iterators, iterables, and generators. I think I'm starting to like the ergonomics.

AI 摘要：本期 JavaScript Weekly 涵盖了 JavaScript 生态的最新动态，包括生成器函数的实用性探讨、V8 引擎的显式资源管理新特性、现代 CSS 开发技巧，以及 React 和 Angular 等框架的更新。此外，还介绍了多个工具库的发布和实用教程，为开发者提供了丰富的技术资源。

1. 简讯（In Brief）
• 你知道 console.log 支持格式化字符串吗？
• Deno 团队更新了 Fresh 框架。
• Angular 20 预计于 5 月 29 日发布。
• 微软裁员波及 TypeScript 核心贡献者 Ron Buckton。
• Brian Clark 分享了现代 npm 包开发的最佳实践。

2. 版本发布（Releases）
• Node.js 多个版本的 5 月 14 日安全更新（v24.0.2、v23.11.1 等）。
• Nuxt 3.17、Parcel v2.15.0（支持 SVG 到 JSX 转换）、React Router 7.6 等。

3. 文章推荐（Articles）
• 生成器函数的实用性：作者 Alex MacArthur 探讨了 JavaScript 中生成器函数的实际应用场景，指出尽管生成器函数已存在多年，但其实际用途尚未被广泛发掘。文章详细介绍了生成器函数的概念及其适用场景。
• JavaScript 中的 this 关键字：Mat Marquis 深入解析 this 的动态绑定机制。
• GitHub Copilot 构建 React 应用：Kedasha Kerr 的教程，结合视频演示快速开发。
• JavaScript 正则表达式：Adebayo Adams 总结了正则表达式的强大功能。

4. 工具与库（Code & Tools）
• ANSIS 4.0：支持多环境的 ANSI 颜色库。
• TanStack DB：基于 TanStack Query 的实时同步客户端存储。
• Svelte Sonner：Svelte 版的 Toast 通知组件。
• tscircuit：用 JSX 设计电路板的创新工具。
• Feedsmith：全新的 Web 源解析器和生成器：解析和生成 RSS、Atom、JSON 源、OPML 和 RDF 源的全新现代方法，支持播客、媒体和其他特定类型源中使用的常见命名空间。
• Fx 36.0：命令行 JSON 处理工具，支持流式 JSON 解析，性能大幅提升。

Bluesky Social

Luciano Mammino 📙 Node.js Design Patterns (@loige.co)

console.log() is probably the first function I ever used in Node.js...

And yet, I was today years old when I learned it supports format strings! 🤯

🧵👇