兼容性如何处理？

CSS 兼容性处理的重点通常不是“手动加前缀”，而是明确目标浏览器、选择合适的特性，并在必要时提供降级方案。

明确兼容目标

• 先确定需要支持哪些浏览器和版本。
• 团队通常会通过 browserslist 统一这份目标清单。

构建工具集成

常见做法是交给 PostCSS 生态处理：

• autoprefixer：根据目标浏览器自动补前缀。
• postcss-preset-env：帮助使用部分未来 CSS 特性并做一定转换。

降级与回退

• 使用 @supports 做能力检测。
• 为新特性准备更稳妥的后备样式。
• 避免把核心功能建立在兼容性较差的新特性上。

.layout {
  display: flex;
}

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

手动前缀

如 -webkit-、-moz-、-ms-、-o-，现在通常不建议手写维护，除非在处理极少数历史问题或明确的私有实现。