麒麟 / 奇安信前端兼容开发
使用原则
把兼容性作为本次实现的约束,不是做完页面再补颜色。此 Skill 适用于新开发、故障修复、依赖升级和评审;不要求特定框架。只处理任务涉及的风险,不无条件改写整个项目。
不能承诺覆盖所有奇安信版本。 产品号、发布渠道和 Chromium 内核号不同;同一内核在不同 CPU、驱动和企业策略下也可能表现不同。未知信息必须标记待确认,不能伪造验证记录。
1. 先确定支持契约
- 读取已有项目指令、锁文件、构建配置、兼容测试和支持范围,保留用户改动。
- 从用户、浏览器“关于”页及
assets/browser-probe.html收集:产品全称、产品完整版本、渠道、Chromium 完整版本、麒麟版本/SP、CPU 架构、DPR/缩放、字体/GPU、关键企业策略。UA 只作线索,不能证明实际内核。 - 建立或更新项目已有支持矩阵;无现成文件时,可使用
assets/support-matrix.example.json。填写业务必需功能、最小实际内核、真机和降级验收标准。不要在安装的 Skill 目录记录业务设备数据。 - 未知基线时先询问,不擅自等同 Chromium 102。用户要求先开发时可暂定保守基线,但必须记录为 provisional / 未验证,不得写“已兼容全部版本”。
- 读取 浏览器矩阵。不同渠道和架构分别验收;最低基线与更高版本都要覆盖,不能靠仅测最新 Chrome 代表奇安信。
2. 只读审计,确定最小改动
- 读实际源码和生产构建配置,确认 CSS 工具、UI 库、浏览器/服务端入口、第三方包以及部署方式。
- 按改动选读参考资料,不必每次加载全部文件:
| 任务 | 必读 |
|---|---|
| 样式、Tailwind、布局、主题、弹窗 | CSS 与布局 |
| JS/TS、语法编译、依赖、Web API | JavaScript 与构建 |
| 字体/输入法、文件、PDF、权限、网络、CPU/GPU | 麒麟平台与交付 |
| 测试、截图、发布验收、数据边界 | 验证与验收 |
| 查证特性支持或版本依据 | 来源与证据等级 |
- 从 Skill 实际安装路径执行检查器;
<skill-dir>表示当前SKILL.md所在目录,先替换为已确认的实际路径,不要照抄占位符:
python3 "<skill-dir>/scripts/compat_audit.py" ./src --min-chromium 102
只有支持契约已确定为 102 时才使用示例中的 102;未确定时省略 --min-chromium,输出会标记 unknown。路径按真实项目替换。检查器只读、零第三方依赖、不会修改代码;它是词法候选检测,不是 AST、CSS 编译器或兼容性认证。
3. 实现规则
CSS
- 稳定路径优先使用常规 hex/rgb/hsl、传统
transform、可回退的布局;现代特性仅在目标支持或可证明渐进增强时使用。 - 针对 102:重点检查
:has()、容器查询、新视口单位、独立变换、现代颜色、原生嵌套、Popover 与 Tailwind 生成代码。支持阈值与替代见 CSS 参考。 - Tailwind v4 官方最低 Chrome 111;102 不在支持范围。不能声称调色板补丁、Autoprefixer 或设置 JS target 就解决全部 v4 兼容性。提出受支持方案或经过验证的产物转换;迁移/降级依赖须先确认,不擅自执行。
var()的 fallback 不等于任意现代颜色回退;CSS.supports()不等于实际像素正确。分别检查解析、计算值和视觉结果。- 改弹窗定位时保留动画与拖拽的 transform 合成;检查遮罩、焦点、滚动、键盘、Portal 和层叠上下文,不只检查居中截图。
JS / 依赖
- 区分语法转译、内置对象 polyfill 和需要权限/原生平台支持的 Web API。TypeScript
target、lib、构建target不能互相替代。 - 对浏览器交付链配置真实最低内核,检查依赖、动态 chunk、worker、第三方脚本及 CSS 产物;Node 服务端 API 不能当作浏览器 API 使用。
- 新 API 在入口处能力检测,采用业务可接受的降级;语法解析失败发生在检测之前,不能用
if包住新语法代替转译。 - 不 blanket 禁用可选链等已支持能力,也不默认补全全部 polyfill。不得为了兼容关闭 CSP、证书验证、沙箱或其他安全措施。
平台 / 数据
- 覆盖字体缺失、中文输入法组合事件、架构差异、GPU、下载/打印、文件名、代理/证书、离线部署和企业权限策略。
- 涉及外部/AI 数据时,在边界按实际 schema 校验并展示明确失败/缺失状态;不要把未知评分静默补成有效分数,也不强制引入指定校验库。与浏览器无关的业务改动不扩大范围。
4. 验证顺序
- 源码风险扫描、现有单测和 lint;确认未扫描目录、误报和人工豁免的理由。
- 生产构建;扫描实际发布的 CSS/JS(使用
--include-build,确认路径不是源码映射或 Node 服务端包)。记录转换/降级的实际输出,不凭配置推断有效。 - 在目标浏览器打开离线探针,手动核对视觉区域,再访问真实项目关键流程。探针不等于项目测试,不采集账号或业务输入。
- 对照最低基线、存量版本和当前版本的真实麒麟终端,执行参考文档中的功能/截图/键盘/输入法/缩放/打印验收。普通 Chrome、Playwright 的近期 Chromium 或伪造 UA 不能替代目标真机。
- 无真机、无依赖安装权限或构建失败时,明确写出阻塞和未验证项,不生成虚假截图/成功结论。
# 仅示例:换成项目真实的浏览器产物目录
python3 "<skill-dir>/scripts/compat_audit.py" ./dist --include-build --min-chromium 102 --format json
# 可选择对所有候选风险设 CI 闸门;先处理误报和有证据的渐进增强
python3 "<skill-dir>/scripts/compat_audit.py" ./src --min-chromium 102 --fail-on warning
5. 交付格式
简短输出:
- 支持契约:实际版本/架构、最低内核;unknown/provisional 必须注明。
- 修改与依据:问题、位置、降级/转换方式;引用代码时用
path:line。 - 验证结果:源码、产物、普通浏览器、麒麟真机分别写 pass/fail/not-run,不混为一个“通过”。
- 残余风险:无法验证的版本、策略/硬件限制及需用户确认的取舍。
Skill 描述用于自动匹配;如必须每次触发,应由使用项目的 Agent 指令明确要求在相关开发前加载本 Skill。Skill 自身不能替代宿主发现机制,也不能绕过权限或强制模型调用。