平滑降级不是加个html5shiv或写个<noscript>就完事，而是从DOCTYPE、语义结构、JS检测、fallback内容四条线同步控制——漏掉任何一条，用户在旧浏览器里看到的就可能是空白、错位或不可操作的页面。
直接说结论：平滑降级不是加个 html5shiv 或写个 <noscript> 就完事，而是从 DOCTYPE、语义结构、JS 检测、fallback 内容四条线同步控制——漏掉任何一条，用户在旧浏览器里看到的就可能是空白、错位或不可操作的页面。
DOCTYPE 必须顶格无 BOM，否则所有降级都失效
这是整个降级链的开关。只要 HTML 文件第一行前面有空格、<!-- 注释 -->、PHP 输出的空白，或 UTF-8 BOM 字节（EF BB BF），IE/Edge 就立刻进入 Quirks Mode。此时盒模型、浮动、字体渲染全乱，后续 CSS 和 JS 的降级逻辑根本没机会执行。
- 验证方式：Chrome DevTools → Elements 面板顶部看渲染模式，必须显示
Standards；若显示Quirks，就得回查源码开头 - 编辑器检查：VS Code 或 Sublime 右下角确认编码为
UTF-8（不是UTF-8 with BOM） - CI 中可加校验脚本：
head -c 3 file.html | xxd查 BOM；或用grep -l '^<!DOCTYPE' file.html确认 DOCTYPE 真正在首行
语义标签不能只换不修，否则 IE8 布局直接塌陷
把 <div class="header"> 改成 <header> 是第一步，但 IE8–IE11 默认把 <header>、<nav>、<section> 当成 inline 元素渲染，不设 display: block，布局就垮了——html5shiv 只解决“识别”，不解决“渲染”。
- 必须配 CSS 规则：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 条件加载更安全：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 避免零散调用
document.createElement('header')——漏写一个，对应区域就按 inline 渲染，难排查也难维护
JS 降级必须用 API 存在性检测，UA 判断已不可靠
navigator.userAgent 字符串极易伪造或过时。某 Android WebView 声称是 Chrome，却缺失 localStorage；新版 Safari 可能伪装成旧版绕过限制。检测必须落在真实能力上，而不是字符串匹配。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
if ('IntersectionObserver' in window) { ... }、if ('fetch' in window) { ... }、if (!!document.createElement('canvas').getContext) { ... } - 关键 API 要早检测：放在
<head>里同步执行，不能等业务 JS 加载完才判断——那时白屏或错乱布局已经出现 - 失败后立即插入提示浮层：
<div id="compat-notice">，而不是清空<body>或跳转；文字直说“您的浏览器版本过低，无法运行本页面”，并提供两个动作：“点击升级浏览器”和“查看推荐浏览器列表”
<noscript> 和 alt 不是占位符，得真能替代核心功能
很多团队把 <noscript> 当成必填字段，里面只写“请启用 JavaScript”；alt 填成 alt="图片" 或留空。这不是 fallback，是放弃责任。
-
alt必须传达等价信息：图标按钮用alt="删除订单"，数据图表用alt="2025年Q2销售额环比增长12%，柱状图"，纯装饰图用alt=""（空字符串，不是空格） -
<video>内部必须含文本 fallback：<p>视频无法播放，请下载原始文件</p> -
<noscript>要提供核心功能替代路径：表单提交失败时显示静态联系方式，动态列表失效时渲染静态 HTML 表格 - CI 中可用 Puppeteer 启动无 JS 模式访问关键页面，断言
<noscript>内容是否可见、alt是否非空且非泛化
最容易被忽略的是：降级不是一次性配置，而是每次 DOM 操作、每个新引入的 API、每处 <img> 都要重新校验是否破坏了基线。比如新增一个 fetch 请求，就得同步补上 XMLHttpRequest 回退；加了个 gap 布局，就得确认 IE11 下是否还能用 margin 模拟。平滑，来自持续对底线的敬畏，而不是某次重构的终点。
