面试题：CSS 浏览器前缀与现代 CSS 特性的兼容性权衡

Question

假设你正在开发一个支持多浏览器的项目，现在有一个新的 CSS 特性，主流浏览器中部分支持无前缀写法，部分仍需特定前缀。你会如何权衡是否使用前缀以及如何处理各浏览器的兼容性，以确保最佳的用户体验和代码可维护性？请详细阐述你的思路和步骤。

Answer 1

1. 调研浏览器支持情况
   • 使用 CanIUse 等网站，查询新 CSS 特性在各主流浏览器（如 Chrome、Firefox、Safari、Edge 等）及其不同版本中的支持情况，明确哪些浏览器需要前缀，哪些支持无前缀写法。
2. 考虑项目目标受众
   • 如果项目面向的是较新浏览器版本的用户群体，且旧版本浏览器用户占比较少，可以优先考虑无前缀写法，并对不支持的旧版本浏览器提供适当降级方案。例如，若项目是面向年轻开发者社区的工具，可更多依赖无前缀写法。
   • 若项目需要兼容大量旧版本浏览器用户，如面向企业内部办公系统，可能需更全面地使用前缀。
3. 选择 CSS 预处理工具
   • 使用如 Sass 或 Less 这样的 CSS 预处理工具。以 Sass 为例，可以通过自定义 mixin 来处理前缀问题，提高代码可维护性。例如：

@mixin transform($value) {
  -webkit - transform: $value;
  -moz - transform: $value;
  -ms - transform: $value;
  -o - transform: $value;
  transform: $value;
}

• 然后在需要使用 transform 特性的地方调用该 mixin：

.element {
  @include transform(rotate(45deg));
}

4. 使用 Autoprefixer
   • 在构建过程中引入 Autoprefixer。它可以根据目标浏览器的配置，自动为 CSS 属性添加所需前缀。在项目的构建工具（如 Webpack）中进行配置，例如在 postcss.config.js 文件中配置：

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['ie >= 11', 'last 2 versions']
    })
  ]
};

• 这样在编译 CSS 时，Autoprefixer 会根据设定的浏览器范围自动添加或移除前缀。

5. 测试与验证
   • 在本地使用 BrowserStack、CrossBrowserTesting 等工具，对各主流浏览器及其不同版本进行测试，确保新 CSS 特性在各浏览器下显示效果一致且符合预期。
   • 在实际部署环境中，利用用户反馈或日志系统，及时发现并修复可能出现的兼容性问题。
6. 代码注释与文档化
   • 在使用前缀的代码处添加注释，说明使用前缀的原因以及对应的浏览器支持情况。例如：

/* Safari 和 Chrome 旧版本需要 -webkit - 前缀 */
 -webkit - border - radius: 5px; 
/* Firefox 旧版本需要 -moz - 前缀 */
 -moz - border - radius: 5px; 
border - radius: 5px;

• 在项目文档中记录新 CSS 特性的使用情况、浏览器兼容性处理方法，方便后续开发人员维护和扩展代码。