AI 摘要：这篇博文介绍了 Andy Clarke 开发的一款有趣的卡通标题文本生成器，它可以生成具有卡通风格的文本，并提供 CSS 代码。文章还重点介绍了其核心功能 Splinter.js，它通过包裹每个字符的 <span> 标签，并加入 ARIA 属性，在实现逐字样式控制的同时，增强了可访问性，解决了传统工具可能导致辅助技术识别障碍的问题。

AI 摘要：本文深入探讨了 CSS animation-timeline 属性中的 view() 函数，它允许开发者创建基于元素在滚动容器（scrollport）中可见性（visibility）的动画。文章通过一个图片轮播（carousel）示例，详细演示了如何结合传统 CSS 动画、关键帧（keyframes）和 view() 函数，实现元素进入/退出视图时的缩放、模糊等动态效果。此外，文章还比较了 view() 与 scroll() 函数的区别，并介绍了 view() 函数的轴（axis）和插入（inset）参数，以及 animation-range 属性，帮助读者更精细地控制动画的触发时机和范围，为制作交互式滚动动画提供了实用的指导。

1. view() 函数简介与核心概念
• animation-timeline 属性接受 view() 函数，实现基于元素可见性的动画。
• 类比 JavaScript 的 Intersection Observer，动画随元素进入和退出滚动视口（scrollport）而触发。
• 示例：图片轮播中，图片在中间时清晰放大，在边缘时模糊缩小。
2. 搭建基本布局
• 创建一个 <main> 元素作为 carousel 容器。
• 使用 flexbox 使图片横向排列，并设置 overflow-x: auto 实现滚动。
• 定义 carousel-slide 元素作为图片项，设置其宽度为容器的 1/3，实现一次显示三张图片。
3. 实现滚动与滚动捕捉（Scroll Snapping）
• 在 carousel 容器上设置 scroll-snap-type: x mandatory 实现滚动捕捉。
• 使用 scroll-behavior: smooth 实现平滑滚动（可选）。
• 设置 scrollbar-width: none 隐藏滚动条（可选）。
• 为 carousel-slide 设置 scroll-snap-align: center，确保图片居中对齐。
4. 创建基于视图的动画
• 定义 slide 关键帧动画，实现图片在不同阶段的缩放、圆角和模糊效果。
• 将 slide 动画应用于 carousel-slide 元素。
• 使用 animation-timeline: view(inline) 将动画绑定到元素的视图时间线。
• 强调 animation-timeline 需单独声明在 animation 速记属性之后，以避免被覆盖。
5. view() 与 scroll() 函数的比较
• view() 函数创建基于元素在容器中可见性的视图进度时间线，适用于元素特定的显示效果。
• scroll() 函数创建基于容器滚动位置的滚动进度时间线。
• view() 更适合实现当特定元素滚动到视口时触发的动画。
6. view() 函数的参数与 animation-range 属性
• view() 接受 axis （block, inline, x, y）和 inset 参数。
• inset 参数定义滚动视口边缘的偏移量，精确控制动画触发范围。
• animation-range 属性进一步控制动画的开始和结束点，可使用 entry、exit、cover、contain 等关键词。
• 示例：通过 inset 控制动画在元素从底部进入滚动视口时才开始。
7. 创意轮播动画拓展
• 鼓励探索更多 CSS 属性的动画可能性，如背景位置（background position）动画，创造独特的轮播效果。
• 提及注册 CSS 属性（registered CSS properties）可以使更多属性动画化。

CSS-Tricks

Creating Scroll-Based Animations in Full view() | CSS-Tricks

It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.

Anderson Mancini(@Andersonmancini): 🎵 太阳出来了 ☀️
我终于完成了将我的“终极镜头光晕”移植到 #threejs WebGPU 的工作。性能简直令人难以置信，因为现在 threejs 已经将遮挡查询直接集成到了渲染管线中。如果你需要知道某个物体是否被遮挡，只需直接向 threejs 查询即可。文档中有示例。
这样一来，我就不再需要光线投射器来检测遮挡了，这就是性能大幅提升的原因。
如果您想查看结果： https://planpoint-webgpu.vercel.app

AI 摘要：本文探讨了在 Tailwind CSS 中如何针对无法直接控制的子元素（如来自 CMS 或第三方组件的内容）应用样式。尽管作者推荐在多数情况下使用传统的自定义 CSS 样式表，但文章详细介绍了如何利用 Tailwind 的任意变体 (Arbitrary Variants) 和 [&_selector] 语法来实现子元素样式控制。文中通过具体示例展示了如何使用 & 符号结合 CSS 选择器来定位直接子元素、所有后代元素以及处理伪状态 (pseudo-states)，并讨论了这种方法适用的场景，最后通过一个实际案例（CMS 内容样式）对比了传统 CSS 和 Tailwind 方式的实现。

1. 遇到的问题：为什么需要定位子元素
• 传统 Tailwind CSS 的局限性：通常将工具类直接应用于元素，但对于无法控制的嵌套 HTML (如 CMS 内容) 无法直接应用。
• 典型场景：CMS 内容、第三方组件、动态生成的 HTML。
• 解决方案预告：虽然普通 CSS 样式表是首选，但本文将探索 Tailwind CSS 的任意变体 (Arbitrary Variants) 方案。
2. 传统 CSS 解决方案
• 示例：使用 .cms-content a 等选择器为嵌套链接和列表项添加样式。
• 优点：简单、可读、易维护，通常是最佳实践。
3. Tailwind CSS 的任意变体 (Arbitrary Variants)
• 核心概念：使用方括号 [] 在类名中直接编写 CSS 选择器。
• 语法示例：[&_a]:font-semibold。
• & 符号的含义：在 Tailwind 任意变体中，& 代表当前应用类的元素，类似于 Sass/SCSS 或 CSS 嵌套中的 &。
• 生成的 CSS：通过 & 符号，Tailwind 会将类名自身转换为选择器，再拼接我们自定义的子元素选择器，从而实现后代元素样式控制。
4. 常见的子元素定位模式 (Common Patterns)
• 直接子元素 (Direct Children)：使用 [&>div] 定位直接子元素，例如为所有直接 div 添加边框和内边距。
• 所有后代元素 (All Descendants)：使用 [&_a] 定位所有后代元素，例如为所有链接添加悬停下划线。
• 子元素的伪状态 (Pseudo-states on Children)：使用 [&>button:hover] 或 [&_input:disabled] 为子元素在特定状态下应用样式。
5. 何时选择使用任意变体 (When This Makes Sense)
• 场景一：已完全投入 Tailwind 生态，不愿切换到普通 CSS。
• 场景二：只需少量样式规则，为之创建单独的样式表显得过度。
• 场景三：构建流程难以集成额外 CSS 文件。
• 场景四：希望样式与渲染内容的组件协同放置。
• 注意：对于可控内容，直接应用 Tailwind 类依然是最佳实践。
6. 实际案例：CMS 内容样式
• 背景：处理来自无头 CMS 的预渲染 HTML，无法控制内部标记。
• 传统 CSS 方案：展示了为 .cms-content 下的 a、img、li 元素编写的简洁 CSS 样式。
• Tailwind 方案：演示了如何在 Elm 和 React 组件中，通过将所有子元素样式规则整合到父容器的 className 属性中，利用任意变体实现同样的效果。
• 相关插件：提及 @tailwindcss/typography 插件的 prose 类可以处理富文本样式，但有时需要更精细控制。
7. 总结 (The Takeaway)
• 任意变体允许在 Tailwind 框架内使用任意 CSS 选择器，& 代表当前元素，_ 代表空格。
• 强调了通常情况下，独立的普通 CSS 样式表对于嵌入内容来说更简单、更可读、更易维护。
• Tailwind 和传统 CSS 可以良好共存。
• 鼓励读者了解这种方法的可能性，以备不时之需。

cekrem.github.io

Tailwind CSS: Targeting Child Elements (when you have to)

Understanding arbitrary variants and how Tailwind lets you style nested elements without leaving your utility classes

AI 摘要：Chrome 浏览器将在明年初推出纯 CSS 实现的滚动触发动画。这是一种基于时间，并在特定滚动偏移量（scroll offset）触发的动画，与现有的滚动驱动动画不同。这项功能有望在 Chrome 145 版本正式发布，它将替代部分 IntersectionObserver 的用途。

1. 新特性发布预告
• Chrome 浏览器即将支持纯 CSS 实现的滚动触发动画（Scroll-Triggered Animations）。
• 预计在明年初推出，并在 Chrome 145 版本正式发布。

2. 滚动相关动画的区别
• 滚动驱动动画（Scroll-Driven Animations）：动画进度随滚动条移动从 0% 到 100%，停止滚动则暂停，反向滚动则倒退。
• 滚动触发动画（Scroll-Triggered Animations）：在达到特定的滚动偏移量时触发，是基于时间的动画。

3. 替代传统实现方式
• 新特性将允许开发者以声明式（declaratively）的 CSS 方式实现，替代部分对 IntersectionObserver 的依赖。

4. 资源与演示
• 为 timeline-trigger 的范围（ranges）创建了一个可视化工具，解释激活范围（activation range）和活动范围（active range）的概念。
• 激活范围（activation range）是触发器被激活的区域，活动范围（active range）是触发器保持激活状态的区域，活动范围必须包含激活范围。

5. 体验方式
• 用户可以在 Chrome Canary 中启用“Experimental Web Platform Features”旗标来提前体验该功能。

Bram.us

CSS Scroll-Triggered Animations are coming to Chrome!

We have Scroll-Driven Animations. Now say hi to Scroll-Triggered Animations.

AI 摘要：Chrome DevTools MCP 迎来了重大更新，现在允许 AI 编程助手直接连接到活跃的浏览器会话。这项新功能极大地提升了调试效率，编程助手可以重用现有登录会话、访问活跃的调试面板（如网络面板和元素面板），从而实现手动调试与 AI 辅助调试的无缝切换。文章详细介绍了这一功能的实现原理、安全措施（如用户授权弹窗和控制横幅）以及如何配置和使用，为开发者提供了更智能、更便捷的调试体验。

1. Chrome DevTools MCP 新功能概述
• 核心更新：Chrome DevTools MCP 服务器现在支持 AI 编程助手直接连接到活跃的浏览器会话。
• 主要优势
• 重用现有浏览器会话：编程助手可以直接访问已登录的会话，无需重新登录。
• 访问活跃调试会话：编程助手可以直接从 DevTools UI 访问并调查选定的元素或网络请求。
• 工作流改进：实现手动调试与 AI 辅助调试的无缝切换。

2. Chrome DevTools MCP 连接方式
• 现有连接方式
• 使用特定用户配置文件运行 Chrome。
• 通过远程调试端口连接到运行中的 Chrome 实例。
• 在独立临时配置文件中运行多个 Chrome 实例。
• 新增自动连接功能：通过 --autoConnect 选项，MCP 服务器可以请求远程调试连接。

3. 远程调试工作原理及安全措施
• 基础机制：基于 Chrome 现有的远程调试能力。
• 启用步骤：用户需在 chrome://inspect#remote-debugging 中手动启用远程调试。
• 连接流程：
• MCP 服务器配置 --autoConnect 选项后，将尝试连接活跃的 Chrome 实例。
• 用户授权：Chrome 会弹出对话框，要求用户授权远程调试会话，以防止滥用。
• 状态提示：调试会话激活时，Chrome 顶部会显示“Chrome is being controlled by automated test software”横幅。

4. 如何开始使用
• 步骤一：在 Chrome 中设置远程调试
• 导航至 chrome://inspect/#remote-debugging。
• 根据对话框提示允许或禁止传入的调试连接。
• 步骤二：配置 Chrome DevTools MCP 服务器
• 在 MCP 服务器配置中，为 chrome-devtools 服务添加 --autoConnect 命令行参数。
• 示例配置适用于 gemini-cli。
• 步骤三：测试设置
• 运行 gemini-cli 并输入性能检查指令。
• 允许 Chrome 弹窗中的远程调试请求。
• 验证 MCP 服务器是否能成功打开网页并执行性能追踪。
• 更多信息：可参考 GitHub 上的 README 文档获取完整说明。

5. 未来展望
• 调试任务交接：AI 编程助手可以接管调试任务，提升效率。
• 面板数据暴露：计划逐步向编程助手暴露更多 DevTools 面板数据。

Chrome for Developers

Let your Coding Agent debug your browser session with Chrome DevTools MCP  |  Blog  |  Chrome for Developers

We shipped a new feature to the Chrome DevTools MCP server that is going to make it a lot easier for your coding agent to debug your current browser sessions.

AI 摘要：useEffectEvent 是 React 新增的 Hook，用来在 Effect 中获取最新的 props / state 而不触发 Effect 重新执行。它通过保持函数引用稳定，解决了“依赖列表必须包含所有变量”导致的频繁重渲染问题。文章列举了它的使用场景、可做与不可做的细节，以及最佳实践和迁移建议，帮助开发者在合适的场景安全使用该特性。

1. 什么是 useEffectEvent
• 介绍了 useEffectEvent 的核心概念：创建一个始终读取最新值的稳定函数引用
• 说明它如何在不触发 Effect 重跑的情况下访问最新的 props / state

2. 解决的问题
• 通过聊天应用示例，展示传统写法需把所有变量加入依赖导致不必要的重跑
• 对比使用 useEffectEvent 后，仅在真正需要的依赖（如 roomId）变化时才重新执行 Effect

3. Do's 与 Don'ts
• ✅ Do：在 Effect 内直接调用、用于读取最新值、用于需要 Effect 上下文的事件处理、分离响应式与非响应式逻辑、同步调用
• ❌ Don't：在普通 UI 事件处理器中使用、在渲染阶段调用、作为 props 传递、异步或延时调用、替代正常的 memoization

4. 详细示例
• ✅ 正确：在 Effect 中抽离非响应式逻辑（如主题变化）保持连接仅在 roomId 改变时重建
• ❌ 错误：在按钮点击等普通事件中使用 useEffectEvent，建议使用普通函数或 useCallback
• ✅ 正确：在定时器或轮询中读取最新的回调函数（如 onTick）
• ❌ 错误：在异步 fetch 回调中调用 useEffectEvent，可能在组件卸载后仍被调用
• ✅ 正确：在清理函数中也可使用 useEffectEvent 记录页面退出事件
• ❌ 错误：把 useEffectEvent 作为其他 Hook（如 useMemo）的依赖，破坏其稳定性

5. 常见使用场景
• 日志与分析：在路径变化时记录页面访问，内部使用最新的主题、语言、用户 ID 等信息
• 第三方回调：向消息服务订阅回调，回调内部使用最新的用户偏好而无需重新订阅
• 防抖实现：在防抖定时器中使用最新的搜索参数和过滤条件

6. 最佳实践
• 只在确实需要读取非响应式值时使用
• 考虑逻辑是否应该放在 Effect 之外的普通事件处理器里
• 保持 Event 函数单一职责，写清使用原因以便维护
• 等待 stable 版本发布再用于生产环境

7. 迁移路径
• 对比使用 useCallback 并频繁更改依赖或通过 eslint-disable 抑制警告的情形，说明 useEffectEvent 可作为更清晰的替代方案
• 建议先重构组件逻辑，确认是否真的需要该 Hook

想知道世界上最受欢迎的代码编辑器背后究竟发生了什么吗？ VS Code Insiders Podcast 将为你揭开神秘面纱，带你深入了解塑造 Visual Studio Code 未来的功能、决策和人员。

Visualstudio

Introducing the VS Code Insiders Podcast

The VS Code Insiders Podcast is your insider's guide to the features, decisions, and people shaping the future of Visual Studio Code.

AI 摘要：Simon Willison 在这篇文章中总结了构建 HTML 工具的核心模式：保持单文件、避免 React、使用 CDN 加载依赖、利用复制粘贴、调试工具、URL 与 localStorage 持久化、收集 CORS API、直接调用 LLM、文件操作、可下载文件、Pyodide 与 WebAssembly、复用已有工具以及记录开发过程。通过这些模式，作者在两年内用 LLM 生成了 150+ 个实用工具，并提供了大量示例与源码链接。

shadcn (@shadcn)：隆重推出 shadcn/create – 打造专属的 shadcn/ui
全面定制。自由选择组件库、图标、底色、主题、字体，打造与众不同的视觉体验。
现已支持 Next.js、Vite、TanStack Start 及 v0 版本。

从最初的提交开始，shadcn/ui 的目标就是为您提供可靠的默认设置：间距、颜色标记、动画效果、无障碍支持，让您在此基础上自由发挥。
调整代码。添加新组件。更改颜色。
借助 npx shadcn create，这一切变得更加轻松。
从组件库开始：Radix 或 Base UI。
我们为Base UI重构了所有组件，保留相同抽象层级。它们与现有组件完全兼容，甚至支持远程注册库中的组件。
添加组件时，我们会自动检测库类型并应用对应转换规则。
同时新增5种视觉风格，助您打造独特设计：
1. Vega——经典shadcn/ui风格
2. Nova——紧凑布局的缩减间距
3. Maia——柔和圆润，间距充裕。
4. Lyra——方正锐利，与单线字体完美搭配。
5. Mira——紧凑型，专为高密度界面设计。
这远不止主题切换。
您的配置不仅改变颜色，更会重写组件代码以匹配设置。字体、间距、结构乃至所用库，一切皆可适配您的偏好。
全新命令行工具将自动完成所有配置。
立即体验：访问 https://ui.shadcn.com/ 点击 +新建项目
特别鸣谢 @base_ui 团队打造的卓越组件库。他们的成果让我们得以在保持抽象层完整的前提下轻松构建所有内容。意义重大。

Shadcn

The Foundation for your Design System - shadcn/ui

A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

以前有一个类似的尝试用 three.js 实现了这个跨窗口的粒子动画有用到这个类似的场景，我猜应该是和这个一个原理，GitHub 仓库

https://x.com/jh3yy/status/1999131244345405664
jhey ʕ•ᴥ•ʔ(@jh3yy)：今年的版本页面真是太棒了——有太多精彩的细节了 👨‍🍳

很荣幸能参与其中，团队表现出色 👏

除了令人惊叹的 WebGL 技术之外，还巧妙地运用了 CSS 容器查询、计数器、过渡/动画和 SVG！

Shopify

Shopify Editions | Winter '26

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.