AI 摘要：文章探讨了如何利用 Web API 中的 View Transitions （视图过渡）API 为多页应用程序（MPA）创建差异化的页面切换动画。作者通过 JavaScript 事件监听 pageswap 和 pagereveal，结合 e.viewTransition.types.add() 方法，实现根据特定 URL 条件设置自定义视图过渡类型。接着，文章演示了如何在 CSS 中使用 :active-view-transition-type() 伪类，针对不同的视图过渡类型应用不同的动画效果，从而覆盖默认过渡动画。最后，作者分享了一些关于这种 JS 与 CSS 协同控制的见解，并提及了相关学习资源和浏览器兼容性信息。

1. View Transitions API 基础
• DOM 事件监听: 介绍 pageswap 和 pagereveal 这两个事件，它们在页面卸载和加载时触发，并提供 e.viewTransition 对象用于自定义视图过渡。
• 条件设置过渡类型: 讲解如何通过 JavaScript 在 pagereveal 事件中，根据 document.location.pathname 等条件，使用 e.viewTransition.types.add() 方法为当前页面设置一个自定义的视图过渡类型。

2. 默认页面过渡动画配置
• CSS 定义默认动画: 演示如何使用 ::view-transition-old(main) 和 ::view-transition-new(main) 伪元素，结合 @keyframes 定义网站的默认页面切换动画效果，如滑动出入。
• 元素命名: 强调需要为要过渡的元素（如 <main> 内容区）设置 view-transition-name 属性，以便在 CSS 中精准控制。

3. 定制特定页面的过渡动画
• CSS 覆盖默认动画: 展示如何利用 :active-view-transition-type() CSS 伪类，根据在 JavaScript 中设置的自定义视图过渡类型，为特定页面定义一套专属的动画，从而覆盖默认的动画效果。
• 动画优先级: 解释自定义类型动画如何通过更高的 CSS 特异性（specificity）来覆盖默认动画。

4. 学习资源与浏览器支持
• 参考资料: 推荐 Bramus 的《Cross-document view transitions for multi-page applications》作为进一步学习的优秀资源。
• CSS 类型声明: 提及 view-transition-types CSS 属性，但作者对其具体用途表示疑问，推测可能用于限制允许的过渡类型。
• 浏览器兼容性: 指出 JavaScript ViewTransitionTypeSet 和 CSS :active-view-transition-type() 在 Chrome 和 Safari 中得到支持，Firefox 则需开启 flag（标志）。

Frontend Masters

Different Page Transitions For Different Circumstances

I feel like common usage for multi-page view transitions is to set up a general system for them that applies generally to all pages and elements, then let it ride.

AI 摘要：本文深入探讨了在 React 应用中如何正确使用 TypeScript 定义 children prop 的类型。文章首先介绍了 children prop 的基本用法和支持的各种内容类型，并强调了避免手动定义复杂 children 类型的必要性。随后，详细讲解了 ReactNode 超集类型、PropsWithChildren 和 React.ComponentProps 等实用工具类型，以及 ReactElement 和 JSX.Element 等具体类型的使用场景。文章还特别提到了 React 18/19 版本中关于 React.FC 和 children 类型定义的最新变化，建议显式定义 children prop，并展示了如何安全地处理 refs 和构建包装组件（wrapper components）。通过学习这些方法，开发者可以更有效地在 TypeScript 中管理 React 组件的 children prop，提升代码的类型安全性和可维护性。

1. children prop 基础
• JSX 中的 children ：解释 children prop 是如何接收并操作 JSX 表达式中标签之间的内容的。
• 支持的 children 类型：列举了 children prop 可以接受的常见内容类型，包括字符串（Strings）、JSX 元素、JavaScript 表达式（JavaScript expressions）和函数（Functions）。
• 避免手动定义复杂 children 类型：指出手动为 children 定义类型容易遗漏，推荐使用官方支持的类型。

2. children prop 的类型定义方法
• ReactNode 超集类型：介绍 ReactNode 是包含 React 所有可渲染值的超集类型，是定义 children 类型时的首选，并详细解释了 ReactNode 的内部定义。
• PropsWithChildren 类型：讲解 PropsWithChildren 如何方便地为现有 props 添加 children prop，避免手动定义。
• React.ComponentProps 类型：说明 ComponentProps 如何提取现有组件的 props 类型，尤其适用于构建可复用组件和 UI 库。
• React.ReactElement 类型：介绍 ReactElement 作为 ReactNode 的子集，在特定场景下如何用于定义 children prop。
• JSX.Element 类型：说明 JSX.Element 如何作为 children prop 的类型，并指出它只代表单个 React 元素且不包含假值。
• 类组件的 Component 类型：演示在类组件中如何使用 React.Component 定义 children prop，并说明 children 默认是可选的。

3. React 18/19 中 children prop 类型定义的最新变化
• 不再推荐使用 React.FC / FunctionComponent ：解释了 React.FC 因不再自动包含 children prop 而不再被推荐，并倡导显式定义 children。
• 在 TypeScript 中将组件作为 props 传递：展示了如何在不依赖 React.FC 的情况下，安全地将组件作为 props 传递并保持完整的类型安全。
• React 19 中 Refs 和 forwardRef ：比较了 React 18 及更早版本与 React 19 中处理 refs 和 children prop 时的类型定义方式的变化。

4. TypeScript 中的包装组件（Wrapper Components）
• 包装组件在类型安全方面的优势：通过一个待办事项应用示例，展示了包装组件如何通过定义接口来增强类型安全，并在编译时捕获类型错误。
• 处理复杂数据结构：说明 TypeScript 如何确保在组件间传递复杂数据结构时，所有必需属性都存在且类型正确。

LogRocket Blog

How to type React children correctly in TypeScript - LogRocket Blog

Learn best practices for typing React children in TypeScript, including ReactNode, PropsWithChildren, ComponentProps, and why React.FC is no longer recommended.

本期周刊记录了赴长沙参加 FEDAY 2025 的见闻与个人博客更新：移植 Fumadocs 风格的移动端目录、为图片加入 LQIP 并显著提升性能；前端动态包括 shadcn 3.6 推出可定制组件库、Storybook v7+ 构建或泄露 .env 的安全公告、TanStack Start 增加 Vue 支持、Chrome DevTools 144 支持单请求限速；技巧分享用 SVG vectorEffect 修复虚线缩放问题；精选多篇 React/CSS/WebGPU/GSAP 优质内容与 CodePen 作品。

AI 摘要：Storybook 团队发布安全公告，披露 Storybook 在特定条件下，可能将 .env 文件中的敏感环境变量意外打包到构建产物中，导致这些秘密信息在发布到网络后泄露。受影响的项目需满足使用 Storybook 7.0.0 及以上版本、在构建时存在包含敏感信息的 .env 文件，并使用特定 process.env 代码模式。官方建议所有受影响用户立即审计并轮换密钥，并将 Storybook 升级至已打补丁的版本，同时调整环境变量的引用方式。部分流行的 Storybook 插件可能触发此漏洞，但漏洞本身存在于 Storybook 核心。

Storybook Blog

Security advisory

Impacted versions 7–10. Patches available now.

一个 Raycast 扩展，可以直接从本地计算机搜索 CSS-Tricks 文章。该扩展使用 WordPress REST API 获取实时搜索结果，提供了一种快速查找和复制文章 URL 的方法。单击结果会显示摘要并在浏览器中打开文章。

Raycast

Raycast Store: CSS Tricks

Search on CSS Tricks

AI 摘要：本文介绍了 Dan Abramov 发布的新工具 RSC Explorer，旨在帮助开发者直观理解 React Server Components (RSC) 的底层工作原理。由于最近 React Server Components 披露了一个严重的安全漏洞，RSC 协议引起了广泛关注。RSC Explorer 是一个开源的单页应用，通过模拟 RSC 协议的读写过程，展示了数据流、代码传输、流式渲染、服务器操作以及无框架路由刷新等核心概念，让开发者能够“所见即所得”地学习 RSC。

GitHub

GitHub - gaearon/rscexplorer: A tool for people curious about the React Server Components protocol

A tool for people curious about the React Server Components protocol - gaearon/rscexplorer

AI 摘要：本文深入解读了 Chrome 团队发布的“CSS Wrapped 2025”年度总结报告，重点介绍了 CSS 在逻辑处理、状态管理和复杂交互方面的新进展。文章详细阐述了可定制的 <select> 元素、纯 CSS 实现的轮播图（Carousel）以及滚动状态查询等功能，并探讨了 CSS 中引入 if() 语句、@function 函数和 sibling-index()/sibling-count() 等逻辑处理工具，这些新特性将大大提升 CSS 的开发体验和应用能力。作者还展望了锚定容器查询（Anchored Container Queries）、嵌套视图过渡组（Nested View Transition Groups）以及文本框修剪（Text Box Trim）等未来特性，强调 CSS 正从单纯的样式语言向构建动态、强大应用的原生工具集转变，开启了一个激动人心的前端新时代。

Smashing Magazine

State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights and how they connect to the bigger evolution of modern CSS.

AI 摘要：本文详细介绍了作者如何利用 WebGPU 为个人博客实现下雪背景效果。文章从 WebGPU 的基本概念、与 Metal 等现代图形 API 的对比入手，逐步深入到 Metal 的基础知识，再结合 WebGPU 的实际应用，例如 Bind Group 和 Compute Shader，展示了如何高效地绘制雪花粒子并计算其运动。为了进一步提升性能，作者还分享了如何将渲染逻辑转移到 Web Worker 中的 OffscreenCanvas 进行，确保动画流畅不卡顿。文末展望了 WebGPU 在未来前端动画和机器学习领域的应用潜力。

cyandev.app

WebGPU 开发初体验。

From smartwatches to VR, Google Sans Flex intelligently adapts to any display. ⌚️✨

Our typeface gives you granular control over weight, width, and optical size. Plus, it’s now open-source! Ready to build clearer, more beautiful experiences?

Read more → bit.ly/4s1zYgW

Google Design

Google Sans: Evolving Google’s Typeface - Google Design

Discover the inside story of Google Sans, Google’s iconic brand typeface. From product lockups to code, learn how the Google Sans font family has evolved to solve specific UX design problems.