CSS 兼容性指的是某个 CSS 属性或特性在不同浏览器（Chrome、Firefox、Safari、Edge 等）及其不同版本中的支持程度。由于各浏览器使用不同的渲染引擎（如 Chrome 的 Blink、Firefox 的 Gecko、Safari 的 WebKit），对 CSS 规范的实现进度和方式可能存在差异。

在 Web 开发中，确保 CSS 兼容性至关重要，直接关系到用户在不同设备和浏览器上的体验一致性。忽视兼容性可能导致页面在部分浏览器中布局错乱、样式丢失甚至功能不可用。

建议开发者在项目初期就使用 @supports 进行特性检测，并参考 Can I Use 或本工具速查兼容性数据。

@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+）。

浏览器厂商前缀是浏览器在实验性支持某个 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 配置自动添加所需前缀，避免手动维护。

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 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);
}

移动端浏览器的 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 兼容性信息：

• Can I Use（caniuse.com）：最权威的浏览器兼容性数据库，提供详细的支持版本、全球使用率统计和备注说明。
• MDN Web Docs（developer.mozilla.org）：每个 CSS 属性页面底部都有详细的浏览器兼容性表格。
• BrowserStack / LambdaTest：在真实设备上进行跨浏览器测试。
• 使用 VSCode 插件（如 Can I Use 插件）在代码编辑器中直接查看兼容性。
• 关注 Chrome Platform Status 和 WebKit Feature Status 了解最新特性进展。