面试题：使用工具处理CSS浏览器兼容性的实践

1. PostCSS 相关

安装

在项目目录下通过 npm 或 yarn 安装：

npm：npm install postcss postcss-cli autoprefixer --save-dev
yarn：yarn add postcss postcss-cli autoprefixer -D

配置

在项目根目录创建 postcss.config.js 文件，内容如下：

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

Autoprefixer 可以根据你指定的目标浏览器（默认为最新的两个版本各主流浏览器）添加必要的 CSS 前缀。你也可以自定义目标浏览器，例如：

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['Chrome >= 51', 'Firefox >= 53']
    })
  ]
}

工作原理

PostCSS 是一个用 JavaScript 插件转换 CSS 的工具。它允许你使用各种插件对 CSS 进行转换。Autoprefixer 是 PostCSS 的一个插件，它解析 CSS，根据目标浏览器的特性，自动添加所需的浏览器前缀，比如 -webkit-、-moz-、-ms- 等。它通过分析 CSS 规则，检查哪些属性需要前缀，并依据 browserslist 配置（可以是 package.json 中的 browserslist 字段，或者 .browserslistrc 文件）确定要支持的浏览器范围，然后添加相应前缀。

2. Autoprefixer 单独使用（不通过 PostCSS）

安装

同样通过 npm 或 yarn：

npm：npm install autoprefixer --save-dev
yarn：yarn add autoprefixer -D

配置

如果不通过 PostCSS，Autoprefixer 可以直接在构建工具（如 Gulp、Webpack）中配置。

Webpack：在 webpack.config.js 中配置如下：

const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: () => [
                  autoprefixer({
                    overrideBrowserslist: ['Chrome >= 51', 'Firefox >= 53']
                  })
                ]
              }
            }
        ]
      }
    ]
  }
};

Gulp：在 gulpfile.js 中配置如下：

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

gulp.task('styles', function () {
  const plugins = [
    autoprefixer({
      overrideBrowserslist: ['Chrome >= 51', 'Firefox >= 53']
    })
  ];
  return gulp.src('src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('dist'));
});

工作原理

Autoprefixer 自身的工作原理与通过 PostCSS 时类似，它解析 CSS 规则，根据配置的目标浏览器，从 Can I Use 等浏览器兼容性数据来源获取需要添加前缀的信息，然后为 CSS 属性添加对应的浏览器前缀，从而解决浏览器兼容性问题。

面试题：使用工具处理CSS浏览器兼容性的实践

知识考点

面试题答案

1. PostCSS 相关

安装

配置

工作原理

2. Autoprefixer 单独使用（不通过 PostCSS）

安装

配置

工作原理