AI 摘要：本期 Frontend Focus 报道了前端领域的最新动态和趋势，涵盖 CSS 新规范（如无 JavaScript 的走马灯、Masonry 布局、Scroll-Spy）、React/Next.js 开发中的常见陷阱、MDN 发展二十周年纪念，以及一批最新实用工具和开发资源。此外，简要提及了 Safari/Edge 等主流浏览器新特性和业界法规、社区大事件，适合前端开发者了解行业资讯和提升技术能力。

1. 前端社区动态与大事件
• MDN 文档网站庆祝成立 20 周年，目前拥有超 14,000 页内容，是 Web 开发的重要资料库
• 2025 Stack Overflow 开发者调查结果公布，涵盖开发工具、AI 代理、LLM 使用现状等
• W3C 发布关于组织使命与价值观的重要新文档
• HTML Day 活动将举办超 40 场全球盛会，HTML 技术持续推进
• Wikimedia 积极挑战英国在线安全法案，关注数字法规生态

2. CSS 新特性与最佳实践
• CSS Masonry 布局：探讨新规范进展与当前解决方案，兼顾未来性与可用性，附带交互反馈征集
• CSS Scroll-Spy ：Chrome 140 浏览器引入 scroll-target-group 和:target-current，可用两行 CSS 实现目录高亮跟踪效果
•  Responsive Video is (Almost) Easy Now：如何处理垂直和横向视频以适应不同场景，在上下文需要时提供垂直和水平版本。
• “现代 CSS 杀死 SPA”观点：提倡服务器渲染与页面级动画，倡导 CSS 动画和意图性预加载

3. Web 技术深度/创新话题
• The Useless useCallback：React 状态管理与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• Performance Extensibility API：允许自定义轨迹供 Chrome DevTools 性能面板分析
• WebAssembly（WASM）与 DOM 互操作性进展，工具链提升正降低 WASM 开发门槛
• Liquid Glass ：苹果新一代视觉样式的网页实现尝试
• Web Components 及 Shadow DOM 实践解析

4. 工具、组件与资源推荐
• World Clock Slider：多城市世界时钟组件，支持暗黑模式
• FossFLOW：等距基础架构图形工具，支持丰富图标与数据管理 【这个挺酷炫的】
• StaticSearch：为静态站点增添搜索，无需后端，基于 Javascript，数据存储为 JSON
• Oklchroma：基于 OKLCH 色彩空间的色板生成器，提供基色，使用三角函数生成不同色阶
• difit：使用 GitHub 风格查看器查看和审查本地 git 差异的 CLI 工具，评论还可以作为 AI 提示进行复制。
• 7.css：忠实还原经典 Windows 7/XP UI 的 CSS 设计系统
• 使用 Three.js、WebGPU 和 TSL 进行交互式文本销毁

MDN Web Docs

Celebrating 20 years of MDN | MDN Blog

MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.

AI 摘要：本文介绍了当前 CSS 渐进网格布局（Masonry Layout）的浏览器支持现状及其多种语法方案，并提出了一种通过简洁 JavaScript 实现兼容所有主流浏览器的马赛克布局方法。作者详细解释了实现原理、兼容图片和响应式布局的技巧，同时分享了相关工具库的使用方法，为 CSS Grid 用户提供了生产可用、灵活可控的 masonry 解决方案。

1. CSS Masonry 布局的社区动态与支持现状
• Masonry 布局的引入持续讨论中，语法有三种主要提案：display: masonry、grid-template-rows: masonry、item-pack: collapse
• 当前未达成统一标准，不同浏览器支持程度不一（如 Firefox、Chrome 正在分别测试不同语法）
2. JS Polyfill 实现 Masonry 兼容性
• 介绍如何检测浏览器是否原生支持 grid-template-rows: masonry
• 若未支持，则使用 Polyfill 方案，纯 JavaScript 实现 Masonry 效果（仅需约 66 行代码）
3. Masonry 实现原理详解
• 利用 CSS Grid 的特性，将 grid-auto-rows 设为 0，row-gap 设为 1px
• 通过 JS 获取每个网格项实际高度后，调整 grid-row-end，实现项自适应高度并“堆叠”
• 恢复正确的行间隔后，布局完成，兼容性强
4. 对图片和媒体的兼容处理
• 首次渲染时图片未加载完成会导致布局错乱，需监听图片/视频加载后再计算布局
• 提供相关 JS 辅助函数，确保所有媒体加载完毕再执行布局函数
5. 响应式自适配
• 使用 ResizeObserver 监听容器宽度变化，实现自适应响应式布局
6. 工具库与复用建议
• 推荐使用作者开源的 Splendid Labz 库快速集成 Masonry 布局及更多布局工具
• 提供 npm、CSS、JS 完整使用示例

CSS-Tricks

Making a Masonry Layout That Works Today | CSS-Tricks

I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.

AI 摘要：本文介绍了 JavaScript 的逻辑赋值运算符（logical assignment operators），即 =, &&=, ??=，这些自 ES2021 起纳入标准的新语法极大简化了条件赋值的场景。这些运算符结合原有逻辑运算与赋值，帮助开发者更安全、高效地管理状态、赋默认值并减少样板代码，同时保留了短路（short-circuit）行为。作者详细对比了它们和传统写法的区别，以及在实际开发中的注意事项和最佳应用场景。

1. 逻辑赋值运算符基础
• 逻辑赋值运算符通过将逻辑运算符（||、&&、??）与赋值操作（=）结合，形成简写形式。
• 这些运算符延续了短路运算特性，仅在需要时才计算右侧表达式，提高性能并避免副作用。
• 非常适合简化日常中对变量赋默认值、状态更新的代码书写。

2. 三种主要运算及应用场景
• 逻辑或赋值（=）：当左侧为假值（falsy）时赋值，用于没有初始化或需要提供默认值的场景，但会覆盖如 0、''、false 这类本应保留的有效值。
• 逻辑与赋值（&&=）：当左侧为真值（truthy）时赋值，适合在当前条件满足基础上再作更新，注意右侧结果直接替换原值，可能变为假值。
• 空值合并赋值（??=）：仅在左侧为 null 或 undefined 时赋值，更安全地保持如 0、''、false 这类需要保留的有效值，适用于需严格区分“未赋值”与“有效但为假”的情况。

3. 使用场景与注意事项
• 组件属性默认值（如 React 的 props）：props.showHelpText ??= true;
• 全局状态或配置默认值：config.apiBase = '/api/v1';
• 数据清洗和表单处理：formData.username &&= formData.username.trim();
• 应避免使用可覆盖有效“假值”的 =，遇到需特殊区分空值的情况优先采用 ??=。
• 运算符左侧不能使用可选链（optional chaining），否则会抛出语法错误。
• 短路特性可避免无谓计算（如 API 密钥获取只在必要时执行）。

4. 浏览器与环境兼容性
• 支持：Chrome 85+、Firefox 79+、Safari 14+、Edge 85+、Node.js 15+
• 不支持：Internet Explorer
• 老旧环境可通过 @babel/preset-env（ES2021 配置）进行转译支持。

5. 实际意义与开发建议
• 逻辑赋值运算符虽然是小语法，但对代码可读性、简洁性以及防止常见赋值错误都极有帮助。
• 尤其适合前端组件状态管理、API 参数默认化、表单数据标准化等场景。
• 现已广泛兼容，开发者只需简单迁移习惯即可高效使用。

AI 摘要：Chrome 和 Edge 团队宣布 CSS Masonry 布局已在 Chrome/Edge 140 中开放开发者测试。这种新的 CSS 布局模式旨在更有效地创建类似砖块的自适应内容排列，弥补了 CSS Grid、Flexbox 和 Multi-column 的不足。文章详细介绍了 Masonry 的概念、与现有布局的对比、两种正在讨论的语法提案，并提供了如何启用和使用该功能的具体代码示例，鼓励开发者积极测试并提供反馈，以帮助最终确定其 API 设计。

1. 社区动态
• 发布与反馈征集：Microsoft Edge 和 Google Chrome 团队宣布 CSS Masonry 已在 Chrome 和 Edge 140 中开放早期开发者测试，并强调开发者反馈对完善规范和语法的重要性。
• 如何测试：详细说明了在 Chromium 浏览器（Chrome 或 Edge 140+）中通过 about:flags 页面启用 "CSS Masonry Layout" 实验性功能的步骤。
2. CSS Masonry 概述
• 什么是 Masonry：解释了 Masonry 布局模式能够创建类似砖块的紧凑排列，与 CSS Grid、Flexbox 或 Multi-column 不同，它在某个方向上不严格定义轨道，允许内容项自动填充可用空间，特别适用于视觉密集型页面。
• 现有方案及局限性：指出现有通过 JavaScript 库或 CSS Grid/Flexbox/Multi-column 模拟 Masonry 的方法存在性能问题、代码复杂、维护困难以及无法完美实现 Masonry 特性等局限性。
• CSS Masonry 的现状：介绍了 CSS 工作组正在《CSS Grid Level 3》规范中起草 Masonry，并讨论了两种正在考虑的语法提案：独立的 display: masonry 和集成到 CSS Grid 中的 grid-template-*: masonry。
3. 使用 CSS Masonry
• 创建 Masonry 容器：通过代码示例展示了如何使用 display: masonry 和 grid-template-columns 或 grid-template-rows 来创建列式或行式的 Masonry 容器。
• 使用默认轨道尺寸：介绍了 Chromium 实现中 Masonry 的新默认轨道尺寸 repeat(auto-fill, auto)，允许在不明确定义轨道尺寸的情况下创建美观的 Masonry 布局。
• 尝试 Masonry 缩写属性：介绍了正在讨论中的 masonry 缩写属性，可用于同时定义 Masonry 方向和轨道定义，简化了语法。
• 自定义轨道尺寸：展示了 Masonry 在定义不同数量和大小的布局轨道方面的灵活性。
• 跨越多轨道：说明了内容项可以跨越多个轨道，这对于突出重要内容或实现全宽布局非常有用。
• 微调项目放置：介绍了 item-tolerance（原名 item-slack）属性，用于控制项目放置的敏感度，使其更好地匹配源顺序或布局需求。
• 其他可用属性：提到 Masonry 容器可以与 CSS Grid 的其他属性（如 grid-row、grid-column、order 等）结合使用。
4. 反馈与展望
• 呼吁开发者反馈：再次鼓励开发者通过 demos、源代 码和实际应用来测试 Masonry，并通过评论相关 Issue 或在社交媒体上分享反馈，以帮助塑造最终的 API。
• 已知限制：列举了当前 Chromium 实现中存在的已知限制，包括密集填充、反向放置、子网格支持、DevTools 支持等，并鼓励开发者报告 Bug。

Chrome for Developers

Brick by brick: Help us build CSS Masonry  |  Blog  |  Chrome for Developers

Help test the proposed masonry syntax in Chromium.

AI 摘要：Chrome 139 正在实验 Open UI 提出的 Interest Invoker API，该 API 旨在通过声明式 HTML，无需 JavaScript 即可创建鼠标悬停触发的弹出界面，如工具提示和悬浮菜单。它通过 interestfor 属性关联触发器和作为 popover 的目标元素。文章详细探讨了触发器和目标元素的用法、不同 popover 类型的影响、相关的 JavaScript 事件、以及通过 interest-show-delay 和 interest-hide-delay 等 CSS 属性控制的“兴趣延迟”。同时，它也深入讨论了键盘和屏幕阅读器用户的可访问性支持，并指出该 API 虽处于早期实验阶段，但有望极大简化此类 UI 的开发，尽管在某些 popover 行为和触屏交互上仍有待完善。

CSS-Tricks

A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks

Chrome 139 is experimenting with Open UI’s proposed Interest Invoker API, which would be used to create tooltips, hover menus, hover cards, quick actions, and other types of UIs for showing more information with hover interactions.

AI 摘要：本文详细介绍了 JavaScript 中 RegExp 对象的静态方法 escape() 的功能、语法及转义规则，并通过实际案例展示了其在处理正则表达式时的必要性和安全性。作者强调了该方法在防止正则表达式意外行为和安全问题中的重要作用，尤其是在处理用户输入或动态构建正则表达式时，建议将其作为最佳实践，并结合其他验证技术构建多层次防御策略。

AI 摘要：本文详细探讨了 JavaScript 中 Temporal API 的背景、必要性以及其开发进展缓慢的原因。Temporal API 是对现有 Date API 的重大升级，旨在解决其功能不足和不一致的问题，提供更全面的日期和时间处理能力。尽管提案自 2017 年开始已进入 TC39 的第 3 阶段，但由于与现代标准（如 IANA、ISO-8601 等）的复杂互操作性要求，开发耗时近八年。目前，Firefox 已率先实现，Chrome 和 Safari 也在推进中，作者乐观预测其可能在年内正式发布。

1. 什么是 Temporal API？
• Temporal API 是 JavaScript 对 Date API 的 overdue 替代品，旨在提供更现代化的日期和时间处理功能。
• 作者希望其能在今年内正式在浏览器中发布。

2. 为什么需要替换 Date API？
• JavaScript 的 Date API 是 1995 年 Brendan Eich 快速开发时直接从 Java 的 java.util.Date 复制而来，存在诸多缺陷（如 Y2K 问题）。
• Java 早已废弃并更新了其 Date API，而 JavaScript 却沿用了 30 年，导致功能不足（例如缺乏对持续时间、间隔等的支持）和不一致性。
• 现有解决方案依赖第三方库，这些库因需要传输时区和本地化数据而变得臃肿。
• Temporal 作为一个命名空间，将原生支持时间戳、持续时间、间隔和时区管理，极大增强浏览器的日期时间能力。

3. 为什么 Temporal API 开发耗时如此之长？
• Temporal API 自 2017 年提出，至今已耗时八年，仍处于 TC39 的第 3 阶段（共 4 阶段）。
• 主要延迟原因并非功能范围，而是与现代 web 和计算标准的互操作性需求：
• 时区字符串基于 IANA Time Zone Database。
• 时间戳字符串基于 RFC9557（RFC3339 的更新，2024 年 4 月通过）。
• 持续时间字符串基于 ISO-8601 标准。
• 这些标准的协调（如 IETF 对 RFC3339 的扩展）耗费了大量时间。
• 此外，Temporal 与 ECMA-402 国际化 API（例如 Intl.DateTimeFormat）的数据来源（如 Unicode CLDR）也需整合，进一步减少对大型库的依赖。
• 2024 年 6 月，为加速发布，Temporal 范围被缩减，自定义日历和时区功能被移除，但未来可能通过 Temporal v2 提案恢复。
• 当前进展：
• Firefox 已于 139 版本（2023 年 5 月 27 日）实现。
• Chrome V8 部分实现了 Temporal.Instant，基于 Rust 库 temporal_rs。
• Safari 的 JavaScriptCore 也在开发中。
• 进入第 4 阶段需“两个兼容实现通过验收测试”，目前仍未达成，但作者乐观预测年内可能实现。
• 当前用户可通过 Firefox 或 Temporal polyfill 进行测试。

The Computus Engine

When can I use Temporal?

TC39 has had a Temporal API proposal in the works since 2017. It's currently at stage 3 (of 4). So this begs an obvious question... If Brendan Eich can invent all of JavaScript in 10 days, why has it taken eight years to replace the Date API?

Lets back up

AI 摘要： 本期 Smashing Newsletter #514 聚焦于 CSS 的最新技术和工具，介绍了多项创新功能和实用资源，包括 CSS 中的 if() 函数、锚点定位 API、缓动函数工具、阴影匹配技巧以及 CSS 渐变效果等。

1. CSS 新特性（Chrome 137）：
• 介绍了 if() 函数，支持基于自定义属性值和样式查询编写逻辑样式，增强了 CSS 的逻辑控制能力。
• reading-flow 属性通过声明预期的焦点顺序提升键盘和屏幕阅读器的可访问性，解决视觉顺序与 DOM 源顺序不匹配的问题。

2. CSS 径向渐变创建 CSS 爆炸背景效果
• Chris Coyier 展示了如何仅用 CSS 创建爆发背景效果，利用 conic-gradient() 和硬性停止点的特性，结合径向渐变实现文本空间和视觉层次。

3. CSS 缓动函数工具（Easing Wizard）
• Matthias Martin 开发的 Easing Wizard 工具帮助开发者可视化和测试 CSS 缓动函数，支持多种类型（如 Bézier、弹簧、反弹等），并提供预设和代码导出功能。

4. 跨平台阴影匹配
• Marc Edwards 提供了一份阴影转换比例表，帮助开发者在 CSS、Android、iOS、Figma 和 Sketch 等平台间实现一致的阴影效果，尽管渲染差异无法完全消除，但可接近匹配。

5. CSS 锚点定位 API 工具
• Una Kravets 开发的 Anchor Position Tool 简化了锚点定位 API 的使用，通过可视化界面展示元素相对锚点的定位效果，并生成可直接使用的 CSS 代码。

6. HTML 输入图标样式修复
• Cassidy Williams 分享了一个解决暗模式下日期/时间输入图标不可见的技巧，利用 ::-webkit-calendar-picker-indicator 伪元素调整图标样式，支持滤镜、不透明度和自定义图像。

Frontend Masters

CSS Bursts with Conic Gradients

You can make stripes with CSS gradients pretty easily. It’s that classic thing where you don’t fade a color from one to another, you just switch colors by having two colors share the same “color stop”. I made this one time to explain that:

AI 摘要：本文内容涵盖了前端开发的最新动态、技术技巧和资源分享。文章重点介绍了 CSS 自定义高亮 API、表单控件样式的未来改进、ARIA 辅助技术的使用、TypeScript 的 satisfies 关键字、SVG 滤镜效果等多个技术话题。此外，还分享了有趣的项目、工具以及作者对代码注释和工作恐惧的思考，旨在为读者提供有价值的行业资讯和学习资源。

Stefanjudis

Web Weekly #162

The CSS Custom Highlight API, new ways to style form controls, and things to know about ARIA.

AI 摘要：本文是关于 CSS shape() 函数系列的第四篇文章，重点介绍了两个较少使用但非常实用的命令：close 和 move 。作者详细解释了 close 命令如何用于闭合形状，以及在特定情况下如何优化代码；同时，move 命令被用于在单一 shape() 定义中创建多个不连续的形状部分，极大地扩展了设计可能性。通过具体的代码示例和应用场景（如切出形状和重复形状），文章展示了如何利用这两个命令实现复杂的 CSS 形状设计。

CSS-Tricks

Better CSS Shapes Using shape() — Part 4: Close and Move | CSS-Tricks

The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.

AI 摘要：本文介绍了 CSS 中一个令人兴奋的新特性——CSS gap decorations（间隙装饰），它允许开发者在 flexbox、grid 和多列布局等布局类型的间隙中绘制装饰性分隔线，解决了过去需要使用复杂 workaround 的问题。文章回顾了 CSS gap 属性的历史，并详细阐述了新特性如何通过 column-rule、row-rule 等属性实现灵活的样式化分隔线设计，同时提供了浏览器支持情况和具体使用示例，帮助开发者理解和应用这一功能。

1. 引言与背景
• 回顾了作者四年前关于 CSS gap 属性的文章，介绍了当时使用 gap 轻松实现布局间距的便利性，但也指出了样式化间隙区域的困难，需要使用额外的 HTML 元素或伪元素等 workaround。
• 这些 workaround 存在布局影响、辅助技术干扰和代码污染等问题。
• 提出新特性 CSS gap decorations 将彻底改变这一现状，提供简单且灵活的解决方案。

2. CSS Gap Decorations 特性介绍
• 基础概念：扩展了多列布局中已有的 column-rule 属性，使其适用于 flexbox 和 grid 布局，用于绘制列间分隔线。
• 新属性 row-rule ：用于在行间绘制分隔线，支持多种样式（如虚线、实线）和颜色配置。
• 高级功能：支持通过 repeat() 函数定义多种样式的分隔线，适应未知数量的间隙；引入 row-rule-break 、 column-rule-break 、 row-rule-outset 、 column-rule-outset 和 gap-rule-paint-order 等属性，允许精细调整分隔线的绘制方式、交叉点行为和起止位置。

3. 适用范围：目前支持 grid、flexbox 和多列布局，未来将扩展至 masonry 布局。

4. 浏览器支持情况
• 当前仅在基于 Chromium 的浏览器（如 Chrome 和 Edge 139 版本）中可用，且需通过启用实验性 Web 平台功能标志（flag）来体验。
• 提供了启用 flag 的具体步骤，并鼓励开发者试用并提供反馈以改进特性。

5. CSS Gap Decorations 使用示例
• 通过一个简单的网页布局示例（包含 header、nav、main 和 footer），展示了如何使用 grid 和 flexbox 布局结合 gap 属性和 row-rule 、 column-rule 属性绘制分隔线。
• 逐步调整样式，例如使用不同粗细和样式的分隔线，以及通过 column-rule-outset 属性控制垂直分隔线的起止位置，优化布局视觉效果。
• 提供了最终示例的实时演示和源代码链接。

6. 更多学习资源
• 介绍了额外的属性功能，如 gap-rule-paint-order 控制行与列分隔线的层级， row-rule-break 和 column-rule-break 定义交叉点行为。
• 由于特性较新，MDN 暂无相关文档，推荐参考 CSS Gap Decorations Module Level 1 草案和 Microsoft Edge 的说明文档。
• 提供了 Edge 团队的交互式 playground 工具，供开发者直观配置间隙装饰，并鼓励通过 Chromium issue tracker 提交反馈和问题。

CSS-Tricks

The Gap Strikes Back: Now Stylable | CSS-Tricks

Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your…

AI 摘要：本文详细介绍了 2025 年 6 月 25 日 Ecma 国际组织批准的 ECMAScript 2025 语言规范的新特性，标志着其正式成为标准。文章涵盖了导入属性、迭代器辅助方法、新的 Set 方法、正则表达式相关更新、重复命名的捕获组以及 Promise.try() 等新功能，旨在帮助开发者了解和掌握最新的 JavaScript 语言特性。

• Import attributes and JSON modules
• Iterator helper methods
• New Set methods
• RegExp.escape()
• Regular expression pattern modifiers (inline flags)
• Duplicate named capture groups
• Promise.try()
• Support for 16-bit floating point numbers (float16)

AI 摘要：本文详细介绍了如何使用纯 CSS 实现滚动驱动动画（Scroll-driven Animations），这是近年来 CSS 动画技术的一项重要进步。作者通过具体的代码示例和步骤，讲解了滚动驱动动画的三个核心组成部分：目标元素（target）、关键帧（keyframes）和时间轴（timeline），并重点介绍了两种新的时间轴类型——scroll() 和 view()，它们分别基于用户滚动行为和元素进入视口的行为触发动画。此外，文章还强调了动画对用户体验的影响，提醒开发者注意运动敏感性问题，并提供如何通过媒体查询（如 prefers-reduced-motion）优化动画以提升可访问性的建议。

WebKit

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007.

截至本文写作时（2025 年 6 月）， corner-shape 是一个非常新的特性，浏览器支持有限，目前仅在 Chrome（版本 M139 及以上）中可用。规范可能仍会发生变化。现在就尝试 Chrome Canary 来查看这些演示。

AI 摘要：本文深入探讨了 CSS 的新兴属性 corner-shape ，这一属性极大地扩展了网页设计中对元素边角样式的控制能力，超越了传统的 border-radius 圆角效果，引入了多样化的几何形状选项，并结合超级椭圆（Superellipse）概念，提供了更精细的设计可能性。文章从 border-radius 的基础讲起，逐步介绍了 corner-shape 的多种预定义形状关键字、多值组合应用、动画过渡效果，以及超级椭圆函数的强大功能，旨在启发开发者在设计中尝试创新的边角样式。

Frontend Masters

Understanding CSS corner-shape and the Power of the Superellipse

The CSS corner-shape property represents one of the most exciting additions to web design’s geometric toolkit in recent years. Extending our ability to control the appearance of corners beyond the simple rounded edges we’ve become accustomed to with border…

AI 摘要：本文介绍了 CSS 新特性 corner-shape ，它允许开发者通过改变 border-radius 的角形状来创建多种 CSS 形状。作者详细展示了如何利用 corner-shape 的不同值（如 round、scoop、bevel、notch 和 squircle ）以及 border-radius 的调整，绘制出八边形、菱形、六边形、三角形、斜边、箭头形、梯形和平行四边形等多种形状。相比传统的 clip-path 方法，corner-shape 提供了更简洁的语法，并支持边框和阴影效果，极大地提升了形状设计的灵活性和便利性。

AI 摘要：本文介绍了 Viewport Segments API 的功能与应用，该 API 从 Chrome 138 版本开始可用，支持开发者为可折叠设备优化界面。通过 JavaScript 或 CSS 访问视口逻辑分区的尺寸和位置，开发者可以为可折叠设备创建双窗格体验或避免内容跨折叠区域布局。文章还提及 API 的更新细节及演示案例，展示了如何利用该 API 提升用户体验。

1. API 简介与背景
• 介绍了 Viewport Segments API 的基本概念，解释了视口分区如何由硬件特性（如折叠或铰链）划分而成。
• 强调 API 的目标：帮助开发者将视口的不同区域视为逻辑上独立的区域，从而优化可折叠设备的用户界面。
2. 功能与应用场景
• 详细说明 API 的功能，支持通过 JavaScript 和 CSS 获取视口分区的尺寸和位置。
• 应用场景包括创建双窗格用户体验，以及避免内容布局跨折叠区域，提升用户体验。
3. API 更新与改进
• 提到自去年 Origin Trial 以来的两项主要变更：
a. JavaScript 属性 segments 现位于 window.viewport 对象中，而非之前的 window.visualViewport。
b. 当设备未折叠或不可折叠时，segments 属性行为与 CSS 行为对齐，返回包含单个分区（代表整个视口）的数组。
4. 演示与实践
• 提供了可折叠设备上 API 的演示案例，展示网页如何沿铰链分割成两个逻辑分区。
• 鼓励开发者通过演示了解 API 的实际效果。
5. 发布时间与版本支持
• API 从 Chrome 138 版本开始正式可用，发布时间为 2025 年 6 月 9 日。

Chrome for Developers

Support foldable devices with the Viewport Segments API  |  Blog  |  Chrome for Developers

The Viewport Segments API has shipped with minor changes to the origin trial covered in this blog post.

AI 摘要：本文是关于 CSS shape() 函数的第二部分，专注于 arc 命令的使用，探讨如何通过该命令创建复杂的形状，如扇形（Sector）和弧形（Arc）。作者详细介绍了如何使用 arc 命令绘制动态形状，解决绘制过程中的常见问题（如弧的方向和大小选择），并结合 CSS 条件逻辑和变量优化代码。本文还提到 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持，适合对 CSS 高级特性感兴趣的开发者学习。

• 支持环境与背景：文章指出 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持（截至 2025 年 5 月），并作为系列文章的第二部分，建议读者先阅读第一部分以理解基础知识。
• 扇形（Sector Shape）：
• 描述：扇形是一种常用于饼图的经典形状，包含一个弧和两个固定点，以及一个随填充比例变化的移动点。
• 实现：通过 shape() 函数从顶部开始绘制弧线（arc to），使用变量 --v（范围 0-100）控制填充比例，并通过数学公式计算弧线终点坐标（X 和 Y）。
• 问题与解决：弧线绘制中遇到方向和大小问题，需通过尝试 small cw 和 large cw 组合解决；当 --v 接近 100 时，弧线无法形成完整圆形，作者通过限制值为 99.99 并添加 border-radius: 50% 解决。
• 应用：可用于图像元素的 clip-path，增强视觉效果。
• 弧形（Arc Shape）：
• 描述：基于扇形，移除内部填充部分，形成纯弧形，适用于创建环形效果。
• 实现：基于扇形代码，移除 line to center，增加内弧线命令，并通过变量 --b 定义弧线厚度。
• 问题与解决：与扇形类似，弧线大小随 --v 变化需调整为 small 或 large ，作者引入 CSS 条件逻辑（如 if() 或样式查询）动态调整弧线参数。
• 优化：移除 border-radius，通过条件逻辑同时解决内外弧线问题。
• 带圆角的弧形（Arc Shape with Rounded Edges）：
• 描述：通过在弧形两端添加小半圆弧，创建圆角效果，提升视觉美感。
• 实现：将直线命令替换为小半圆弧（使用 1% 半径技巧让浏览器自动计算），并在末尾添加额外弧线回到起点。
• 练习：作者鼓励读者自行尝试修改代码，理解四弧结构。
• 总结与展望：
• 总结：作者强调 arc 命令是 shape() 函数中最复杂的部分，重点在于方向和大小的处理，通过两篇文章详细讲解，希望读者能掌握其用法。
• 补充：仅讨论了圆弧，未深入探讨椭圆弧（需两个半径），认为其应用较少；并推荐读者阅读作者在 Frontend Masters 的后续文章，探索更多基于 arc 的花式形状。

CSS-Tricks

Better CSS Shapes Using shape() — Part 2: More on Arcs | CSS-Tricks

This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command.

AI 摘要：CSS attr() 这一特性在 Chrome 133 版本开始得到支持。通过 attr() 函数，CSS 代码量可大幅减少，HTML 属性直接控制样式变得更加灵活，例如间距、颜色、背景图等样式的动态设置。此外，文章还揭示了如何通过 image-set() 函数实现动态 URL 作为背景图显示的创新方法。尽管目前浏览器支持尚不全面，但作者对未来充满期待，认为 CSS 的发展将带来更多可能性。

AI 摘要：本文详细介绍了 CSS 新增的 shape() 函数在创建复杂形状方面的应用，特别是在使用直线和弧线绘制 CSS 形状时的强大功能。作者通过具体示例和实践，展示了如何利用 shape() 函数结合 CSS 特性（如变量、单位和数学函数）创建各种形状，介绍了 shape() 的基本命令（如 from、line、hline、vline ），建议优先使用 line 命令以提高代码可读性，并对比了 shape() 与传统方法（如 clip-path 和 mask）的适用场景。此外，文章还提供了 SVG 到 CSS 的在线转换工具，方便开发者快速转换代码。

CSS-Tricks

Better CSS Shapes Using shape() — Part 1: Lines and Arcs | CSS-Tricks

This is the first part of a series that dives deep into the shape function, starting with shapes that use lines and arcs.

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 单位的实践