html5优雅降级核心是“先测再用”，通过js实时检测功能存在性（如canplaytype、getcontext等）决定启用或兜底，结合语义化html fallback结构、modernizr批量检测与polyfill按需补全。
HTML5 新特性本身不自带降级能力，优雅降级的关键是“先测再用”——不靠猜浏览器型号，而是用 JavaScript 实时检测功能是否存在，再决定是否启用、如何替代。核心逻辑就一条：有就用，没有就兜底，且兜底方案必须能正常工作。
用原生 JS 直接检测关键特性
现代浏览器普遍支持 canPlayType、getContext、typeof Storage 等接口，它们返回明确的布尔或字符串值，比 UA 判断可靠得多：
- 视频格式支持：
video.canPlayType('video/webm; codecs="vp9,opus"') === "probably" - Canvas 支持：
!!document.createElement('canvas').getContext - 本地存储：
typeof localStorage !== 'undefined' - 地理定位：
!!navigator.geolocation - Fetch API：
typeof fetch === 'function'
HTML 层面做好语义化 fallback 结构
检测只是第一步，真正起作用的是 HTML 本身的层级设计。比如 <video></video> 标签必须按优先级写多个 <source></source>，浏览器会自动尝试第一个能播的：
- WebM（VP9+Opus）放最前，适合 Chrome/Firefox
- MP4（H.264+AAC）紧随其后，覆盖 Safari/iOS/旧 Edge
- 结尾加文字提示：
您的浏览器不支持视频播放。
这段 HTML 本身就能在无 JS 环境下完成基础降级，JS 检测只是锦上添花。
用 Modernizr 简化批量检测与样式分流
当项目涉及大量特性（Flexbox、CSS Grid、WebP、IntersectionObserver 等），手动写检测太繁琐。Modernizr 在加载时自动运行测试，并为 添加类名：
- 支持 WebP：
；不支持则为 - CSS 中可直接写：
.no-webp .hero-img { background-image: url(jpg-fallback.jpg); } - JS 中判断：
if (Modernizr.webp) { loadWebPAssets(); }
它不提供功能补丁，但把“能不能用”这件事变得清晰、统一、可维护。
配合 polyfill 补齐老环境能力
检测出不支持 ≠ 只能放弃。对关键缺失能力（如 Promise、fetch、IntersectionObserver），可按需加载轻量 polyfill：
- 只在不支持的环境注入：
if (!window.fetch) { loadScript('fetch-polyfill.js'); } - 用
async或动态import()避免阻塞首屏 - 优先选按需加载的 polyfill（如 core-js 的模块化引入），别一股脑全塞进去
注意：polyfill 是增强手段，不是降级替代。它应在检测确认缺失后触发，且不能影响已支持环境的性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
