面试题：CSS Autoprefixer工具原理及深度定制

Question

Autoprefixer是基于PostCSS实现的，请深入阐述Autoprefixer是如何识别需要添加前缀的CSS属性及值的原理。如果需要根据特定业务需求，对Autoprefixer的前缀添加规则进行深度定制，应该从哪些方面入手，举例说明如何自定义添加一些特殊浏览器的特定前缀。

Answer 1

Autoprefixer识别需添加前缀CSS属性及值的原理

1. 基于Can I Use数据：Autoprefixer依赖于Can I Use（caniuse.com）提供的浏览器特性支持数据。该网站维护了各浏览器对CSS属性、值及特性的支持情况，包括哪些浏览器需要前缀以及在什么版本开始支持等信息。
2. 解析CSS：PostCSS会将CSS代码解析成抽象语法树（AST）。Autoprefixer遍历这棵AST，识别出CSS属性和值。
3. 匹配规则：根据当前目标浏览器（通过配置指定，如browserslist配置），Autoprefixer在Can I Use数据中查找对应的属性和值。如果发现某个属性或值在目标浏览器中有特定的前缀需求，就会按照规则添加前缀。例如，对于display: flex，旧版本的浏览器（如Chrome 28 - 49）需要-webkit -前缀，Autoprefixer就会根据目标浏览器版本范围添加-webkit - display: flex。

深度定制前缀添加规则的方面及示例

1. 配置目标浏览器：
   • 方面：通过修改browserslist配置来改变目标浏览器范围。不同的目标浏览器集合会影响哪些属性需要添加前缀。
   • 示例：如果项目只需要兼容现代浏览器，在package.json中设置"browserslist": ["last 2 versions", "not dead"]，这样就不会为极旧浏览器添加不必要的前缀。如果要兼容特定的旧浏览器，比如IE 11，添加"ie 11"到browserslist配置中，那么就会针对IE 11的需求添加相应前缀。
2. 自定义插件：
   • 方面：可以编写自定义的PostCSS插件，在Autoprefixer处理之前或之后对AST进行额外的处理，以实现特殊前缀添加规则。
   • 示例：假设需要为特定的实验性CSS属性--my - custom - property添加-experimental -前缀给特定浏览器（如Firefox Nightly）。

// 自定义PostCSS插件
const postcss = require('postcss');

function addExperimentalPrefix() {
    return {
        postcssPlugin: 'add - experimental - prefix',
        Declaration: function (decl) {
            if (decl.prop === '--my - custom - property') {
                // 这里假设通过判断浏览器标识来添加，实际可能更复杂
                if (/* 判断为Firefox Nightly */) {
                    decl.prop = '-experimental -' + decl.prop;
                }
            }
        }
    };
}
addExperimentalPrefix.postcss = true;

// 使用自定义插件
postcss([
    addExperimentalPrefix(),
    require('autoprefixer')
]).process(css).then(result => {
    console.log(result.css);
});

3. 修改Autoprefixer配置：
   • 方面：Autoprefixer本身有一些配置选项可以调整前缀添加行为。例如，可以设置overrideBrowserslist选项来临时覆盖browserslist配置，或者设置cascade选项来控制前缀的级联方式。
   • 示例：在postcss.config.js中配置：

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: ['firefox >= 60'],
            cascade: false
        })
    ]
};

这里设置只对Firefox 60及以上版本进行前缀处理，并且关闭前缀级联（即不会在已有无前缀属性的情况下再添加带前缀属性）。