面试题：Can I Use网站对CSS兼容性决策的影响

Question

假设你正在开发一个新的前端项目，其中用到了CSS的新特性。请详细说明如何借助Can I Use网站来评估该特性的兼容性，并根据评估结果，如何结合Autoprefixer等工具做出最佳的兼容性处理策略。

Answer 1

1. 借助Can I Use网站评估兼容性
   • 搜索特性：打开Can I Use网站（https://caniuse.com/ ），在搜索框中输入要使用的CSS新特性名称，例如“CSS grid”。
   • 查看兼容性数据：网站会展示该特性在不同浏览器（如Chrome、Firefox、Safari、Edge等）及其版本中的支持情况。绿色表示完全支持，黄色表示部分支持，红色表示不支持。还可以查看每个浏览器版本具体的支持细节，如是否有前缀要求等。
   • 分析结果：根据展示的兼容性情况，了解哪些浏览器需要额外处理。如果大部分主流浏览器都支持，且不支持的浏览器市场份额极小，可以考虑直接使用该特性。若存在部分重要浏览器不支持，则需要采取兼容性处理措施。
2. 结合Autoprefixer做出兼容性处理策略
   • 安装与配置：如果使用的是基于npm的项目，通过npm install autoprefixer - -save - dev安装Autoprefixer。在项目构建工具（如Webpack）中进行配置，以PostCSS为例，在postcss.config.js文件中添加如下配置：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

• 根据Can I Use结果配置：Autoprefixer会根据Can I Use网站的数据来自动添加浏览器前缀。如果Can I Use显示某些浏览器需要特定前缀（如-webkit -，-moz -等），Autoprefixer会在构建过程中为相应的CSS规则添加这些前缀。例如，对于display: grid，在需要前缀的浏览器中，Autoprefixer可能会将其转换为display: -webkit - grid; display: -moz - grid; display: grid;。
• 自定义配置：可以通过在package.json文件中配置browserslist字段来自定义要支持的浏览器范围。例如，"browserslist": ["ie >= 11", "last 2 versions"]表示支持IE 11及以上版本，以及各主流浏览器的最后两个版本。这样Autoprefixer会根据此配置生成对应的前缀，以确保项目在指定浏览器范围内的兼容性。