标签：渐进增强
共 16 篇文章
-
CSS 布局对齐三层演进：flexbox、grid 与 subgrid 的协作边界
系统梳理 CSS 布局对齐的三个层次：flexbox 的组件内一维对齐、grid 的页面级二维对齐、subgrid 的跨组件轨道级对齐。明确三者的能力边界与协作模式，附卡片墙、表单字段集、仪表盘面板三类典型场景的分层方案与选型决策矩阵，帮你避免用错工具的布局陷阱。
-
CSS 数学函数指南：exp/log/sqrt/pow/round 与取整对齐
系统讲解 CSS 数学函数：exp/log/sqrt/pow/abs/sign/mod/rem/round，参数与返回值类型、单位转换、对数刻度、幂律缓动、镜像布局、模运算循环、网格对齐、rem 与 mod 符号差异实战案例。
-
EXIF 元数据编辑实战：从 JPEG 二进制结构到隐私字段删除
从 EXIF 元数据隐私泄露风险切入，深入 JPEG 二进制结构（SOI / APP1 / DQT / DHT / SOF / SOS / EOI 标记序列）、TIFF 头与 IFD 树（IFD0 / ExifIFD / GPSIFD / IFD1）、字节序（II 小端 / MM 大端）、EXIF 标签编码（Tag / Type / Count / Value 四字段结构）、编辑操作实现（删除 GPS / 删除个人信息 / 删除 MakerNote / 删除缩略图 / 修改拍摄时间 / 清除全部 EXIF）、原地修改策略（置零 tag + 修正计数）与紧凑重建策略对比、与图像压缩数据隔离保证质量无损、与 EXIF 查看器协同的工作流，给出 8 条最佳实践与工具矩阵协同建议。
-
图片裁剪完全指南：从比例选型到 Canvas drawImage 源矩形裁剪原理
从图片裁剪的应用场景（头像、社交封面、视频缩略图、电商主图、证件照）切入，对比 9 种常见比例（1:1 / 4:3 / 3:4 / 16:9 / 9:16 / 3:2 / 2:3 / 自定义）的适用场景，深入 Canvas API 裁剪原理（drawImage 源矩形参数 sx/sy/sWidth/sHeight/dWidth/dHeight）、坐标系换算（原图坐标与显示坐标的缩放）、可视化裁剪框的 8 手柄调整算法（边界限制 + 比例锁定 + 最小尺寸保护）、等比缩放与不放大原则、透明通道与背景色填充，给出 8 条最佳实践与工具矩阵协同建议。
-
图片格式转换实战：PNG / JPEG / WebP / AVIF 选型与批量互转完全指南
从 PNG / JPEG / WebP / AVIF 四种格式的编码原理、压缩特性、浏览器支持、透明通道、动图支持、适用场景全面对比，到 Canvas API 转换实现、AVIF 编码能力探测、批量处理内存控制、全格式体积对比方法论、渐进增强策略与最佳实践，配工具矩阵协同建议。
-
图片缩放完全指南：从重采样算法到 Canvas drawImage 整图变换
从图片缩放的应用场景（社交媒体上传、电商商品图、博客配图、缩略图生成、壁纸适配）切入，对比 5 种常见缩放模式（按宽度 / 按高度 / 按宽高 / 按百分比 / 按预设尺寸）的适用场景，深入 Canvas API 缩放原理（drawImage 整图重采样 + imageSmoothingQuality 高质量双三次插值）、长边等比缩放算法、放大控制与不放大原则、等比锁定与自由拉伸、透明通道与背景色填充、批量缩放与 ZIP STORE 打包原理，给出 8 条最佳实践与工具矩阵协同建议。
-
CSS if() 条件函数完全指南：style/media/supports 三类条件、多分支与降级实践
深入解析 CSS if() 条件值函数：style() 样式查询、media() 媒体查询、supports() 特性查询三类条件语法，多分支短路求值、嵌套与逻辑运算、浏览器兼容性降级，附实战案例。
-
CSS 锚点定位指南：anchor() 函数与 tooltip 自动避让
深入解析 CSS 锚点定位：anchor-name 与 position-anchor 绑定、anchor() 与 anchor-size() 函数、position-try-fallbacks 翻转避让，附 tooltip 实战。
-
CSS position-area 完全指南：3x3 网格定位区域与锚点定位的协同
深入解析 CSS position-area 定位区域：3x3 网格划分、三套关键字体系、span 跨格定位、popover 重置陷阱与 anchor() 选型对比，附实战案例。
-
CSS interpolate-size 尺寸插值指南：auto 过渡与 calc-size()
深入解析 CSS interpolate-size 尺寸插值属性：allow-keywords 取值、auto 等尺寸关键字插值原理、calc-size() 函数计算、与 max-height 技巧对比，附折叠面板实战案例。
-
CSS light-dark() 暗色模式完全指南：双主题颜色函数、color-scheme 与渐进降级
深入解析 CSS light-dark() 颜色函数：配合 color-scheme 声明原理、与 prefers-color-scheme 对比、CSS 变量双主题组织与渐进降级，附实战案例。
-
CSS scroll-driven 动画：scroll()/view() 时间线
深入解析 CSS scroll-driven 滚动驱动动画：scroll() 与 view() 时间线选型、animation-range 范围控制、命名时间线与渐进增强，附实战示例。
-
CSS @starting-style 入场动画指南：display 切换与 popover 弹层
深入解析 CSS @starting-style 入场动画规则：嵌套与独立语法、首次渲染/display 切换/popover 三种触发场景、allow-discrete 离散过渡、与 animation/transition 对比选型，附实战案例。
-
CSS subgrid 子网格完全指南：嵌套网格轨道继承与对齐最佳实践
深入解析 CSS subgrid 子网格：双向轨道继承机制、四种方向选型、gap 自动继承与浏览器兼容性，附卡片墙与表单对齐实战示例。
-
CSS text-wrap 换行指南：balance 平衡与 pretty 优化
深入解析 CSS text-wrap 文本换行属性：wrap/nowrap/balance/pretty/stable 五种值、balance 平衡换行算法与 10 行限制、pretty 孤行优化策略，附渐进降级实战。
-
CSS view-transition 视图过渡完全指南：同文档/跨文档过渡、命名元素与伪元素动画
深入解析 CSS view-transition 视图过渡：同文档与跨文档过渡选型、view-transition-name 命名、伪元素树结构与自定义动画，附 SPA 与 MPA 实战示例。