AI 摘要：本文详细介绍了 Chrome 144 中新增的 scroll-state(scrolled) CSS 查询。作为 scroll-state() 容器查询 (container queries) 家族的一部分，它使开发者能够根据用户最近的滚动方向动态调整页面元素的样式。文章首先解释了其工作原理，包括如何设置 container-type: scroll-state 以及 scrolled 查询接受的不同方向值。随后，通过几个实用的案例演示了其应用，包括在用户向下滚动时隐藏顶部导航栏并在向上滚动时重新显示（使用 fixed 或 sticky 定位），以及结合滚动触发动画 (scroll-triggered animations) 实现方向性的元素进入效果。文章强调了这种新特性在渐进增强 (Progressive Enhancement) 方面的优势，展示了无需 JavaScript 即可实现复杂交互的可能性。

1. scroll-state(scrolled) 查询介绍
• 新特性：Chrome 144 中引入的 CSS 新查询，用于根据用户滚动方向应用样式。
• 核心功能：允许开发者基于用户最新的滚动方向来动态修改元素的样式。
2. 工作原理
• scroll-state() 查询家族：scrolled 是 scroll-state() 容器查询 (container queries) 的一个新成员，同系列还包括 stuck、snapped 和 scrollable。
• 启用方式：需在父元素上设置 container-type: scroll-state。
• 查询语法：通过 @container scroll-state(<type>: <value>) 规则块来应用基于滚动状态的样式。
3. scrolled 查询的详细说明
• 检测目标：检测最近期的相对滚动方向。
• 支持值：
• 方向性值：top、right、bottom、left。
• 逻辑方向值：block-start、inline-start、block-end、inline-end。
• 轴向速记：x、y、block、inline。
• 初始状态：none，表示容器尚未发生相对滚动。
• 动态性：浏览器会实时更新此状态，允许根据用户滚动方向（向上、向下、向左、向右）来为子元素设置样式。
4. 实际应用案例
• 案例一：使用固定定位 (fixed positioning) 实现的隐藏导航栏 (Hidey-bar)
• 功能描述：当用户向下滚动时隐藏顶部导航栏，向上滚动时重新显示。
• 优势：增加屏幕可视空间，且无需完全滚动回顶部即可访问导航。
• 渐进增强 (Progressive Enhancement)：不支持此特性的浏览器将始终显示导航栏，不影响基本功能。
• 案例二：使用粘性定位 (sticky positioning) 实现的隐藏导航栏 (Hidey-bar)
• 作者偏好方案：采用 position: sticky 实现类似的导航栏隐藏/显示功能。
• 渐进增强优势：对于不支持的浏览器，导航栏保持原有的粘性定位行为，不破坏现有用户体验。
• 用户体验：导航栏在开始滚动时动画隐藏，向上滚动时动画出现。
• 案例三：方向性滚动进入动画 (Directional scroll entry animation)
• 实现原理：结合 scroll-state(scrolled) 和实验性的滚动触发动画 (scroll-triggered animations) API，根据滚动方向改变元素的进入动画效果。
• 示例：根据是向上滚动还是向下滚动，使卡片从不同的方向（例如，从底部或从顶部）滑入视图。
• 发展前景：尽管当前的滚动触发动画 API 仍处于早期阶段并存在一些限制（如动画重播问题），但其潜力巨大，有望实现更自然的用户界面动效。

Una.im

Directional CSS with scroll-state(scrolled)

Style based on scroll direction with this new scroll-state query feature.

你需要预留一点时间来压扁这个东西。无论是垂直拖动光标，还是单击 "跟随鼠标 "复选框，都可以将这个由 Voicu Apostol 制作的内含果冻的按钮的压扁效果与鼠标移动联系起来。

AI 摘要：本教程详细介绍了如何利用 Three.js、着色器 (shaders) 和 Rapier 物理引擎，将 2D 视频流转化为动态的 3D 体素 (voxel) 下落效果。文章从核心概念——像素和重力——出发，逐步讲解了如何构建一个由 InstancedMesh 和刚体 (rigid bodies) 组成的平面，通过着色器实现平铺像素到 3D 体素的涟漪 (ripple) 变形效果，并最终通过 JavaScript 模拟涟漪进程来激活物理引擎，使体素在逼真的物理作用下散射和恢复。作者还分享了实现过程中的技术细节、优化考量以及未来扩展的可能性。

AI 摘要：本文作者 Pablo Stanley 分享了他如何开发 Efecto 应用，在网络上实时实现图像抖动（dithering）和 ASCII 艺术效果，并结合 WebGL 着色器（shaders）模拟 CRT 显示器视觉效果的经验。文章详细介绍了抖动算法（如 Floyd-Steinberg、Atkinson 等）的原理与代码实现，多色调色板的应用，以及如何通过数学函数在着色器中绘制 ASCII 字符。此外，还探讨了扫描线（scanlines）、屏幕曲率（screen curvature）、色差（chromatic aberration）等 CRT 特效的实现，并讨论了 CPU 和 GPU 在这些效果实现中的分工，最后总结了从历史算法到现代 Web 开发的宝贵经验。

Efecto

Efecto - Free ASCII Art & Dithering Effects Tool

Transform 3D models, videos, and images with ASCII art, dithering, and halftone effects in real-time.

AI 摘要：文章探讨了新兴的 Web Install API，该 API 已在 Chromium 浏览器中进入原生试用 (Origin Trial) 阶段，并在 Microsoft Edge beta 版中展现出最完整的功能。此 API 的核心目标是民主化和去中心化网络应用的获取方式，允许网站通过简单的按钮点击直接安装 PWA (Progressive Web Apps)。虽然该 API 有望获得跨浏览器兴趣，但 Safari 可能由于其已有的“添加到 Dock (Add to Dock)”功能而成为推广的挑战。文章还简要提及了 Service Worker 技术的重要性，强调其在实现离线功能和缓存控制方面的强大作用。

Frontend Masters

A first look at the Web Install API

Bruce Lawson:

SkyWT(@skywt2003): 求教，那些看起来很漂亮的渐变背景都是怎么做出来的？
为什么我随便画几个几何图形叠加模糊，就没那么好看

Huazi(@HeyHuazi): 用现成的😂 来一些周刊提到过的
https://grainient.supply
https://patterncraft.fun
https://fffuel.co
https://uvcanvas.com/docs/components

Corey Chiu(@realcoreychiu): http://gradientshub.com 直接抄

grainient.supply

1000+ Gradients and AI-Generated Backgrounds

Grainient offers 1000+ awesome gradients, noisy textured, and AI-generated backgrounds. Subscribe for unlimited downloads and elevate your designs with our premium collection.

AI 摘要：文章深入探讨了 !important 在 CSS 自定义属性 (CSS Custom Properties) 中的行为，纠正了一个常见误解：当声明 —color: orange !important; 时，!important 修饰的是整个声明的优先级，而不是成为自定义属性 —color 值的一部分。这意味着自定义属性的值仍然是 orange，但该声明因 !important 而具有最高优先级，能够覆盖其他 CSS 规则的特异性 (specificity) 和源顺序 (source order)。通过一个具体示例，文章清晰地展示了这种行为如何导致预期之外的样式结果，强调了理解 !important 作用范围的重要性。

Frontend Masters

!important and CSS Custom Properties

This just bit me the other day so I’m going to write it down. Again, as it’s surprised me before. I just think I can maybe explain it even more clearly this time.

AI 摘要：这篇文章作为 2025 年末的 CSS-Tricks 双周回顾，总结了 CSS 领域在过去两周内的重要进展与趋势，并展望了 2026 年。内容涵盖了条件视图转换 (Conditional View Transitions) 等新兴 CSS 功能、设计系统组件可访问性 (accessibility) 标注的最佳实践、使用 CSS 和 SVG 创建卡通风格文本效果的技术，以及 Firefox 浏览器关于 AI 功能的争议。此外，文章还精选了 Bluesky 社区中关于高级 CSS 技巧和浏览器互操作性 (Interop) 项目的精彩讨论。

1. 新特性与前沿技术
• 条件视图转换 (Conditional View Transitions)：介绍了基于 URL 或 JavaScript 逻辑触发不同页面视图转换 (view transitions) 的方法，并提到了 CSS 未来可能支持导航匹配。
• CSS 与 SVG 文本效果：展示了如何利用 paint-order CSS 属性以及 SVG 技术创建类似卡通的文本效果，以及位移贴图文本效果的探索。
• Bluesky 上的高级 CSS 技巧：分享了结合 anchor positioning、attr()、container queries 和 shape() 等 CSS 功能实现的复杂效果。
• 互操作性项目 2026：强调了 Chrome、Firefox 和 Safari 之间在功能一致性方面的合作，并鼓励开发者为 Interop 2026 投票。

2. 开发实践与最佳规范 (Development Practices & Best Standards)
• 设计系统组件的可访问性标注：详细说明了如何为设计系统组件的 HTML、ARIA、键盘导航、缩放和用户偏好等方面添加详细的辅助功能注释。
• CSS 命名空间与语义化：讨论了为语义化类添加命名空间的好处，例如将 .btn 重命名为 .ui-button。
• 2025 年应学习的 CSS 特性回顾：回顾了年初推荐学习的 CSS 特性，并以 @property 为例进行自我评估。

3. 行业动态与社区洞察
• Firefox 的 AI 转型争议：报道了 Firefox 首席执行官宣布将其转型为“现代 AI 浏览器”引发的用户不满，以及 Mozilla 为此推出的“AI 停止开关”；并提及 Waterfox 作为 Firefox 的无 AI 分支。
• CSS 社区在 Bluesky 上的活跃度 ：肯定了 Bluesky 作为一个高质量开发者社区的价值，并引用了社区成员对 CSS 开发者辛勤工作的感谢。

CSS-Tricks

What’s !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More | CSS-Tricks

2026 is almost upon us. I know we’re all itching to see the clock strike midnight (cue The Final Countdown by Europe), but not without recapping the best CSS-related things that happened over the last two weeks!