前言

以前使用PostCSS做css兼容性处理,常常就是使用autoprefixer做个浏览器前缀处理就完事了,但是实际上如果真要实现所谓的兼容性处理,css甚至还需要做转换处理,类似于js的async...await的语法转换处理。

autoprefixer只是自动添加浏览器前缀,而本次使用的postcss-preset-env除了自动添加浏览器前缀,并且会根据目标浏览器自动转换成兼容的格式,包含许多其他 CSS 提案的 polyfill。

举个例子:

:root {
    --main-color: #06c;
}

body {
    color: var(--main-color);
    display: grid;
}

使用autoprefixer得到如下:

:root {
    --main-color: #06c;
}

body {
    color: var(--main-color);
    display: -ms-grid;
    display: grid;
}

使用postcss-preset-env得到:

:root {
    --main-color: #06c;
}

body {
    color: #06c;
    color: var(--main-color);
    display: -ms-grid;
    display: grid;
}

可以看到有很经典的回退方案处理,这相对于只添加前缀,效果会好很多。

教程

安装依赖:

pnpm i postcss-preset-env -D

我使用的是vite,vite自己自带了PostCSS支持,所以我只需要在项目里创建postcss.config.js即可,其他情况请自行谷歌搜索,如何使用PostCSS。

由于新版的vite5其实已经是完全的es模块了,所以我的这个配置文件不在是node模块的形式导出,这点需要注意,可能你的项目还是老一点的,你需要自己改成node模块导出,也就是module.exports的形式。

import postcssPresetEnv from "postcss-preset-env";

export default {
    plugins: [postcssPresetEnv()]
};

插件配置完毕后我们还需要配置一个浏览器支持列表,也就是.browserslistrc文件。

基于vite的支持,我之前的文章也有提供一份,这里直接也贴一份吧。

Chrome >= 51
Edge >= 15
Safari >= 10
Firefox >= 54
Opera >= 38
iOS >= 10
not ie <= 11
Android >= 5
not IE <= 11

然后我们保存文件,重启项目即可享受。

分类: vue 开发实战 标签: postcssautoprefixercss兼容

评论

暂无评论数据

暂无评论数据

目录