呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #CSS #前端 #Web标准 #浏览器兼容
蛮有意思的。
The Web’s Most Tolerated Feature - Bocoup

AI 摘要:本文讲述了 CSS zoom 属性如何从 IE 5.5 的非标准功能开始,被开发者滥用、误解、依赖,进而导致兼容性困境。随着 CSS transform 出现,zoom 一度被各浏览器忽略或不一致实现。但由于其在布局层面的独特作用,开发者持续呼声使其最终被纳入 W3C 规范,并在 Interop 2025 得到统一支持。这段历程反映了 Web 标准在兼顾创新与兼容中如何形成共识。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 非标准的起点
• 2000 年 IE 5.5 引入 zoom,允许元素放大或缩小,但缺乏正式规范。
• 各浏览器厂商竞相差异化实现,造成碎片化问题,开发者不得不写兼容代码。

2. 替代与取舍
• Mozilla 坚持标准化,未支持 zoom,转而推动 CSS transform。
• Safari 同时实现 transform 与 zoom,导致实现差异与兼容问题。
• zoom 因缺乏标准,处于既流行又边缘的尴尬位置。

3. 使用误区与“伪流行”
• 后续研究发现 zoom 使用率虚高,原因多是用 zoom:1 修复 IE 的 layout bug。
• 通过 HTTP Archive 数据分析,排除 zoom:1 后,实际真实使用率下降约 94%。
• 意味着 zoom 的高排名不过是兼容遗留问题,而非开发者真正需求。

4. 开发者诉求与再度回归
• 部分高流量 Web 应用(如 Excel Web、Gmail 移动端)需要 zoom 的布局影响特性。
• 2023 年 CSS Working Group 提出重新定义 zoom,简化并规范化语义。
• 2025 年进入 Interop 计划,获得主要浏览器支持,终于成为标准化功能。

5. 经验与启示
• Web 的共识虽慢,但能孕育开放与长期可持续的方案。
• 避免依赖专有技术,因短期便利可能导致长期维护成本与兼容困境。
• Web 标准的推进常与社区反馈、开发者需求紧密相关。


author Mike Pennisi
#优质博文 #前端 #CSS #动画 #渐进增强 #浏览器兼容 #HTML
The interpolate-size property is a great example of progressive enhancement

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: autoMDN 兼容性表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,代码简洁且语义清晰。


author Andy Bell The interpolate-size property is a great example of progressive enhancement
 
 
Back to Top