📄 本页由源文件
rules/浏览器兼容性规范.mdc自动投影生成（单一权威源）。请勿直接编辑本页。
浏览器兼容性规范
本规则为浏览器兼容性检查的单一真相源，由 browser-compat skill 和 code-review L1 审查按需加载。
一、目标浏览器基线（项目可覆盖）
项目通过 package.json > browserslist 或 .browser-compat.json 声明基线；未声明时使用「保守型」默认。
| 基线级别 | 适用场景 | Chrome | Safari | Firefox | Edge | ES 级别 |
|---|---|---|---|---|---|---|
| 保守型（默认） | 企业客户端 Web、C 端门户 | 70+ | 12+ | 68+ | 79+ | ES2019 |
| 标准型 | 管理后台 / 内部工具 | 90+ | 14+ | 90+ | 90+ | ES2021 |
| 激进型 | Chrome-only 内嵌、Electron | 100+ | — | — | — | ES2022+ |
本规则所列「禁用」默认针对 保守型 基线；标准型/激进型下部分条目可放宽，按项目实际 browserslist 判定。
二、JS 禁用 API 清单
🔴 CRITICAL（保守型必须禁用，检测到即 Block）
| API | 禁用原因 | 替代方案 |
|---|---|---|
Array.prototype.at() | Safari 15.4+ / Chrome 92+ | arr[arr.length - 1] 或 arr.slice(-1)[0] |
structuredClone() | Safari 15.4+ / Chrome 98+ | JSON.parse(JSON.stringify(x)) 或 lodash.cloneDeep |
Object.hasOwn() | Safari 15.4+ / Chrome 93+ | Object.prototype.hasOwnProperty.call(obj, key) |
Array.prototype.toSorted/toReversed/toSpliced | Safari 16+ / Chrome 110+ | [...arr].sort() / [...arr].reverse() |
Object.groupBy / Map.groupBy | Safari 17.4+ / Chrome 117+ | arr.reduce((acc, x) => { ... }) |
Promise.withResolvers | Safari 17.4+ / Chrome 119+ | let resolve, reject; new Promise((r, j) => { resolve = r; reject = j; }) |
crypto.randomUUID() | Safari 15.4+ / Chrome 92+ | uuid npm 包 |
🟡 WARNING（保守型下需确认项目已引入 polyfill）
注：以下 🟡 条目仅作为 AI 生成代码时的上下文参考，当前
scripts/compat-check.js暂不做自动检测（假设项目已统一 polyfill 或特性检测）。如需扫描，建议在code-reviewL1/L2 手动确认 polyfill 是否就位。
| API | 说明 |
|---|---|
ResizeObserver | 项目应已 polyfill，否则 Safari 13.1 以下不可用 |
IntersectionObserver | 项目应已 polyfill |
requestIdleCallback | Safari 不支持，使用前要特性检测或 setTimeout 降级 |
三、CSS 禁用属性清单
🔴 CRITICAL（保守型必须禁用）
| 属性/特性 | 禁用原因 | 替代方案 |
|---|---|---|
:has() 选择器 | Safari 15.4+ / Chrome 105+ | JS 逻辑 + className 切换 |
container-type / 容器查询 | Safari 16+ / Chrome 105+ | ResizeObserver + JS |
color-mix() | Safari 16.2+ / Chrome 111+ | CSS 变量 + 预计算 |
subgrid | Safari 16+ / Chrome 117+ | 嵌套 grid 或重新设计布局 |
Flexbox gap | Safari 14.1+（12 不支持） | margin + 负 margin 抵消 |
aspect-ratio | Safari 15.4+ / Chrome 88+ | padding-bottom 百分比技巧 |
inset 简写 | Safari 14.1+ | 展开为 top/right/bottom/left |
text-wrap: balance/pretty | Safari 17.5+ / Chrome 114+ | 不使用，让浏览器默认换行 |
@layer 级联层 | Safari 15.4+ / Chrome 99+ | 使用选择器优先级控制层级 |
accent-color | Safari 15.4+ / Chrome 93+ | 自定义 checkbox/radio 样式 |
🟡 WARNING（需加前缀或降级方案）
注：以下 🟡 条目中，
scripts/compat-check.js当前仅实现backdrop-filter缺失-webkit-前缀的检测；overscroll-behavior/clamp()/scroll-behavior仅作为 AI 生成代码时的上下文参考，不参与自动扫描。
| 属性 | 说明 |
|---|---|
backdrop-filter | 需 -webkit-backdrop-filter 前缀 + 不支持时的兜底背景色 |
overscroll-behavior | 需 touch-action 兜底 |
clamp() / 复杂 calc() | Safari 12 对 calc() 中单位除法支持不完整 |
scroll-behavior: smooth | Safari 15.4+ 才支持，动画类可用 JS 平滑滚动替代 |
四、检查时机
AI 生成代码时（本规则的首要作用）
- 对照上述清单，禁止直接输出 🔴 项的代码
- 🟡 项输出时必须注明降级方案或确认 polyfill 已就位
code-reviewL1 审查第 5 条- 调用
use_skill('browser-compat')对本轮 diff 执行compat-check.js - 🔴 违规 → 强制修复后才能进入下一步
- 🟡 违规 → 弹出用户决策（修复 / 加降级 / 跳过）
- 调用
独立使用
- 用户说"检查兼容性"/"这段代码能用吗" → 直接触发
browser-compatskill
- 用户说"检查兼容性"/"这段代码能用吗" → 直接触发
项目级 pre-commit hook（可选）
- 项目安装
scripts/git-hook-check.js后，commit 前自动扫描 staged 文件
- 项目安装
五、例外处理
- 项目
.browser-compat.json的ignore字段可声明允许使用的 API/属性（需在文件中写明业务理由） - 代码行级豁免：
// @compat-ignore: 原因或/* @compat-ignore: 原因 */ - 全局 polyfill 已引入的项目在
.browser-compat.json > polyfills中声明，检测脚本自动排除对应规则
六、规则版本
- v1.0（2026-05-07）：初版，覆盖保守型基线下的核心 JS/CSS 禁用清单
- v1.1（2026-05-08）：🟡 WARNING 段前新增"脚本覆盖度"说明，明确自动扫描边界