browser-compatibility

name	browser-compatibility
description	浏览器兼容性检查 —— 目标浏览器覆盖率、特性支持度验证与降级策略
category	前端
loading	on-demand
triggers	{"keywords":["浏览器兼容","compatibility","降级","polyfill","浏览器支持","IE"]}

浏览器兼容性

概述

提供系统化的跨浏览器兼容性验证流程和降级策略，确保 Web 应用在目标用户群体的浏览器中一致可用。

使用场景

• 项目初始化时确定浏览器支持范围
• 引入新 Web API 或 CSS 特性前的兼容性评估
• 用户反馈某浏览器异常时的排查
• 框架或依赖升级后的兼容性回归检查

核心原则

1. 渐进增强：核心功能在所有目标浏览器可用，增强特性仅在支持的浏览器启用。
2. 以数据定范围：基于用户分析数据（如 Google Analytics 浏览器分布）确定支持矩阵，而非拍脑袋。
3. 优雅降级而非功能缺失：不支持的特性提供等效替代方案，而非空白或报错。
4. 优先标准，减少 polyfill：能用标准实现的不用 polyfill；polyfill 带来体积和维护负担。

支持策略模板

• 一级支持（完全测试）：最新两个版本的 Chrome、Firefox、Safari、Edge
• 二级支持（关键路径测试）：移动端 Safari、Chrome Android、Samsung Internet
• 三级支持（基本可用）：一年内版本的其他现代浏览器
• 不支持：IE 全系（除非业务强制要求）

检查清单

• 是否定义了明确的目标浏览器支持矩阵？
• 新 CSS/JS 特性是否通过 caniuse.com 验证覆盖范围？
• CSS 是否有降级方案（如 @supports 或 fallback 样式）？
• 关键功能在不支持的浏览器是否优雅降级而非崩溃？
• CI 中是否有跨浏览器视觉回归测试？