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.

AI 摘要：文章以 details 元素的展开动画为例，展示如何在 :root 启用 CSS 属性 (interpolate-size) 以允许对 auto 等关键字尺寸做插值过渡，利用 lh 单位与自定义属性计算闭合态高度，开启态使用 height: auto 与 overflow: clip；无需 @supports 包裹，因为未知属性会被忽略，从而在 Chromium 获得平滑动画，在 Firefox/Safari 等未支持浏览器优雅降级为无动画但不破坏布局的最小可用体验，体现了渐进增强的最佳实践。

1. 背景与定义
• 需求来源：长期呼声是能将高度或宽度过渡到 auto 及 min-content、max-content、fit-content 等关键字尺寸。
• 能力说明：CSS 属性 (interpolate-size) 允许对关键字尺寸进行插值，使 height/width 过渡到 auto 成为可能。
• 支持现状：当前主要在 Chromium 系列可见效果，其他浏览器尚未跟进，属于渐进增强的理想目标场景。
• 参考阅读：Animate to height: auto、MDN 兼容性表、Shoptalk Show #679

2. 实践方案与代码思路
• 全局启用：在 :root 设置 interpolate-size: allow-keywords；无需 @supports 包裹，未识别属性会被忽略。
• 闭合态高度计算：采用 lh 单位 (lh) 获取文本行高，结合自定义属性计算 padding，使用 calc 组合出闭合态 height。
• 动画设置：对 height 做 transition，选择线性 (linear) 且时长短促，保证“迅捷而不拖沓”的交互手感。
• 展开态处理：使用 height: auto 配合 overflow: clip，避免滚动条并实现干净的内容裁切。
• 延伸阅读：lh 单位介绍、overflow: clip 详解

3. 渐进增强与兼容策略
• 无需防守式 @supports：未知属性在旧浏览器被忽略，不会破坏布局与交互。
• 分层体验：Chromium 获得平滑动画；Firefox/Safari 获得“无动画但可用”的最小可用体验 (MVE)。
• 零 polyfill 负担：不引入沉重的脚本或补丁，等待兼容性完善后即刻“自动生效”。
• 方法论回顾：什么是渐进增强

4. 适用场景与实用建议
• 手风琴/折叠面板：在多组 details 组成的手风琴中，可用相同 name 属性实现互斥展开。
• 动效节奏：尺寸动画更适合线性插值与短时长，避免拖沓的缓动曲线影响可用性。
• 可配置性：通过自定义属性调整 padding 与动画时长，便于在不同组件语境重用。

5. 关键要点速览
• interpolate-size 让“过渡到 auto”成为可能，但目前只在部分浏览器体现动画。
• 利用“未知即忽略”的 CSS 特性，直接书写未来语法，旧浏览器自然降级。
• 以 lh 为基础计算闭合态高度，展开态使用 auto + clip，代码简洁且语义清晰。

Piccalilli

The interpolate-size property is a great example of progressive enhancement

When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.