浏览器兼容性与 caniuse.com
在 caniuse.com 上检查各浏览器的功能支持情况，了解厂商前缀，并在需要时使用 polyfill 或后备方案。
浏览器兼容性与 caniuse.com 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
为什么兼容性很重要？
不同浏览器实现 Web 标准的速度不同。Chrome 130 中可用的 CSS 属性或 JavaScript API，可能在旧版 Safari 或 Firefox 中不存在。针对兼容性进行测试和规划，可以防止用户遇到无法正常使用的体验。
caniuse.com——您的兼容性参考
访问 caniuse.com，输入任意 CSS 属性、JavaScript API 或 HTML 属性。您会看到涵盖所有主流浏览器及其近期版本的颜色编码支持表，以及使用率统计和部分支持说明。
阅读 caniuse 兼容性表
绿色 = 支持。黄色 = 部分支持。红色 = 不支持。灰色 = 未知。查看顶部的全球使用率百分比——如果 97% 以上的用户都可以使用它，通常就可以无需 fallback 直接使用。
browser-compat-data 与 MDN
MDN Web Docs 的页面会在每个 API 参考页面底部包含浏览器兼容性表。它使用与 caniuse 相同的数据，并由浏览器厂商持续更新。
基线计划
Baseline 计划（web.dev/baseline）根据功能在 Chrome、Edge、Firefox 和 Safari 中的支持情况，将其标记为“新近可用”或“广泛可用”。广泛可用的功能无需 polyfill 即可安全使用。
兼容性填充程序
兼容性填充程序是用于在旧版浏览器中实现较新 API 的 JavaScript 代码。常见来源包括：polyfill.io（只提供所需的兼容性填充程序）、core-js（全面的 JavaScript 兼容性填充程序）和 Babel 辅助程序。
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — CSS 中的特性查询
@supports 允许您编写仅在某个属性受支持时才生效的 CSS。它提供了 CSS 回退机制，类似于媒体查询提供响应式覆盖规则的方式。
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}浏览器厂商前缀（旧版）
较早的 CSS 特性需要浏览器厂商前缀：-webkit-、-moz-、-ms-。这些前缀如今大多已经过时，现代浏览器使用不带前缀的标准属性。如果仍有需要，Autoprefixer（PostCSS 插件）会自动添加这些前缀。
使用 Babel 进行转译
Babel 会将现代 JavaScript（ES2022 及更高版本）编译为较旧浏览器能够运行的 ES5。Vite 和 webpack 通过插件集成 Babel。请在 package.json 的 browserslist 中配置目标浏览器。
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]在真实浏览器中进行测试
DevTools 的设备模拟不能替代真实浏览器测试。请使用 BrowserStack、Sauce Labs 或实际的 Safari 浏览器（需要 macOS 或 iOS）来进行真正的跨浏览器验证。
不断更新的浏览器格局
Chrome、Edge、Firefox 和 Safari 都会自动更新。过时浏览器的长尾用户群每年都在缩小。对于大多数面向消费者的产品，以每种浏览器最近的两个主要版本为目标，就能覆盖 95% 以上的用户。
快速检查
caniuse.com 支持表中的绿色单元格表示什么？
回顾：浏览器兼容性
使用新 API 前，请先查看 caniuse.com。阅读 MDN 兼容性表格。使用 browserslist 针对合理的浏览器集合。使用 @supports 进行 CSS 特性查询。只添加必要的 Polyfill。使用 Babel 转译现代 JS。对于关键特性，请在真实浏览器中进行测试。
常见问题解答
「浏览器兼容性与 caniuse.com」课时是免费的吗？
是的 — 「浏览器兼容性与 caniuse.com」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「浏览器兼容性与 caniuse.com」这节课中我会学到什么？
在 caniuse.com 上检查各浏览器的功能支持情况，了解厂商前缀，并在需要时使用 polyfill 或后备方案。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「浏览器兼容性与 caniuse.com」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。