[控场AI]
概念progress 函数 / CSS progress()

progress()

CSS 数学函数,给定一个值、起始点和终点,返回 0 到 1 之间的归一化进度值,用于流体排版和线性映射计算。

时间轴 (近 90 天)

10月21日

CSS progress() 函数接收一个值、起始点和终点,返回 0 到 1 之间的无单位数值,计算公式为 (值 - 起点) / (终点 - 起点) 并钳制在 0–1 之间

待验证50%
10月21日

progress() 函数已经进入 Baseline 状态,主流浏览器引擎均已支持

待验证50%
10月21日

使用 progress() 可以将流体排版中的最小值、最大值和变化区间解耦,修改任一参数不会影响其他部分

待验证50%
10月21日

tan() 和 atan2() 的浏览器支持面远宽于 progress()

待验证50%
10月21日

使用 tan(atan2()) 组合可以在旧浏览器中生成 0–1 的无单位比值,等效于 progress() 的输出,但需要外层 clamp(0, ..., 1) 来钳制结果

待验证50%
10月21日

任何需要随连续变量线性变化的 CSS 属性(间距、圆角、容器宽度等)都可以套用 progress() 的模式

待验证50%
10月21日

对于还在观望的团队,tan(atan2()) 兜底方案提供了渐进迁移路径:先统一代码结构,等 progress() 覆盖率达到要求后替换底层实现,上层变量名和调用方式不变

待验证50%

全部知识事实 (7)

来源文章