什么是 CSS 兼容性？为什么它很重要？
CSS 兼容性指的是某个 CSS 属性或特性在不同浏览器（Chrome、Firefox、Safari、Edge 等）及其不同版本中的支持程度。由于各浏览器使用不同的渲染引擎（如 Chrome 的 Blink、Firefox 的 Gecko、Safari 的 WebKit），对 CSS 规范的实现进度和方式可能存在差异。
在 Web 开发中，确保 CSS 兼容性至关重要，直接关系到用户在不同设备和浏览器上的体验一致性。忽视兼容性可能导致页面在部分浏览器中布局错乱、样式丢失甚至功能不可用。
建议开发者在项目初期就使用 @supports 进行特性检测，并参考 Can I Use 或本工具速查兼容性数据。
如何使用 @supports 进行 CSS 特性检测？
@supports 是 CSS 原生的特性查询规则，可以检测浏览器是否支持某个 CSS 属性或值，从而有条件地应用样式。这是实现渐进增强的核心工具。
基本语法：
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
@supports not (display: grid) {
.container {
display: flex;
flex-wrap: wrap;
}
}
也可以组合检测多个属性：@supports (display: grid) and (gap: 1rem)。所有现代浏览器均支持 @supports（Chrome 28+、Firefox 22+、Safari 9+、Edge 12+）。
浏览器厂商前缀（vendor prefix）是什么？还需要使用吗？
浏览器厂商前缀是浏览器在实验性支持某个 CSS 属性时添加的特定前缀，用于在属性标准化之前进行测试。常见前缀包括：
-webkit-：Chrome、Safari、新版 Edge、Opera（WebKit/Blink 内核）
-moz-：Firefox（Gecko 内核）
-ms-：旧版 IE 和旧版 Edge（Trident/EdgeHTML 内核）
-o-：旧版 Opera（Presto 内核，已废弃）
如今，大多数主流 CSS 属性已经标准化，不再需要手动添加前缀。但对于一些较新的特性（如 backdrop-filter、user-select），在特定场景下仍可能需要 -webkit- 前缀以覆盖旧版 Safari。
推荐使用 Autoprefixer（PostCSS 插件）自动处理前缀，根据 browserslist 配置自动添加所需前缀，避免手动维护。
CSS Grid 和 Flexbox 的兼容性如何？可以放心使用吗？
Flexbox（弹性布局）在现代浏览器中得到了极好的支持（Chrome 29+、Firefox 28+、Safari 9+、Edge 12+）。IE 11 有部分支持（存在一些已知 bug，如 flex-wrap 和 min-height 的组合问题）。如果不需要兼容 IE，Flexbox 可以放心使用。
CSS Grid（网格布局）同样在现代浏览器中得到广泛支持（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）。IE 11 仅支持旧版 Grid 语法（需 -ms- 前缀，功能受限）。Subgrid 特性在 Chrome 117+、Firefox 71+、Safari 16+ 才得到支持。
对于 2024 年的项目，如果目标用户使用现代浏览器，Grid 和 Flexbox 都可以放心使用。建议配合 @supports 做降级处理。
CSS 变量（自定义属性）兼容性如何？
CSS 自定义属性（CSS Variables），使用 --* 声明并通过 var() 调用，在现代浏览器中支持非常好（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）。IE 完全不支持。
CSS 变量支持动态更新、继承、级联，并且可以通过 JavaScript 的 element.style.setProperty() 动态修改，非常适合实现主题切换、动态样式等场景。
:root {
--primary-color: #6366f1;
--spacing-unit: 1rem;
}
.button {
background: var(--primary-color);
padding: var(--spacing-unit);
}
移动端浏览器（iOS Safari / Android Chrome）的 CSS 兼容性有什么特殊注意点？
移动端浏览器的 CSS 兼容性整体与桌面端保持同步，但有以下特殊注意点：
iOS Safari 的更新依赖系统更新，旧 iOS 设备上的 Safari 版本可能较老。例如 :has() 需要 iOS 15.4+（Safari 15.4+）才支持。
overscroll-behavior 在部分移动浏览器中支持不完整。
backdrop-filter 在 iOS Safari 中需要 -webkit- 前缀。
100vh 问题：移动浏览器地址栏的显示/隐藏会影响 vh 单位的计算。推荐使用 dvh（动态视口高度，Chrome 108+、Safari 15.4+）。
触摸事件相关的 CSS（如 touch-action）在移动端尤为重要。
Android 设备碎片化严重，不同厂商的 WebView 版本可能差异很大。
什么是渐进增强和优雅降级？如何选择策略？
渐进增强（Progressive Enhancement）：从基础功能出发，确保所有浏览器都能正常访问核心内容，然后为支持新特性的浏览器添加增强体验。策略是"先保证能用，再追求好看"。
优雅降级（Graceful Degradation）：先为现代浏览器构建完整的高级体验，然后为旧浏览器提供降级方案，确保基本功能不受影响。
推荐策略：在现代 Web 开发中，渐进增强更为实用。使用 @supports 进行特性检测，为不支持的浏览器提供 fallback 方案。例如：
.card {
/* Fallback: 旧浏览器使用浮动布局 */
float: left;
width: 33.33%;
}
@supports (display: grid) {
.card {
float: none;
width: auto;
}
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
如何高效查询 CSS 属性的浏览器兼容性？
除了使用本工具进行快速速查外，还可以通过以下途径获取权威的 CSS 兼容性信息：
Can I Use（caniuse.com）：最权威的浏览器兼容性数据库，提供详细的支持版本、全球使用率统计和备注说明。
MDN Web Docs（developer.mozilla.org）：每个 CSS 属性页面底部都有详细的浏览器兼容性表格。
BrowserStack / LambdaTest：在真实设备上进行跨浏览器测试。
使用 VSCode 插件（如 Can I Use 插件）在代码编辑器中直接查看兼容性。
关注 Chrome Platform Status 和 WebKit Feature Status 了解最新特性进展。