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 面板数据。