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.