关于postcss的自动添加浏览器前缀的那些事儿

饺子不放糖
2,007 阅读3分钟

桌面壁纸.jpeg

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

前言

我们都知道css是用来设置网页的样式的，而现如今，浏览器层出不穷，平时我们在写css时总是需要去兼容各种各样的浏览器，添加对应浏览器可以解析的前缀即可，如：-webkit-，-ms-,-moz-等，但是我们每一次写样式都手动添加前缀未免太过于浪费时间了，所以社区诞生一大批的可帮助添加前缀的办法。

1.live sass compiler

live sass compiler是vscode上的一款可以将sass语法转换成css的插件。

1.1安装

在vscode的扩展中搜索live sass compiler image.png 在setting.json里面配置一下

"liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.autoprefix": [
        "ie >= 6", //ie6以上
        "firefox >= 8",
        "chrome >= 24",
        "Opera>=10"
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ],
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css/"
        }
    ]

此时在底部的导航栏中可以看见一个Watch Sass，此时我们来新建一个sass文件 我们输入部分代码，如flex布局；

body{
    display: flex;
}

点击Watch Sass，此时会生成两个文件，一个是.css文件，一个是.css.map文件 css文件已经被转换成对应各种浏览器下的css样式了，

body {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

2 postCSS

来到我们今天的主角，postCSS，postCSS是一个用JavaScript工具和插件转换CSS代码的工具（来自官网）。 自动添加浏览器前缀，代码合并，代码压缩等，今天就是学习自动添加浏览器前缀。 根据官网： 1.增强代码的可读性，大意就是将css样式带上前缀以便浏览器能够解析 2.将未来的css特性带到今天，大意就是现在已经有了的css语法但是在现代浏览器上可能不支持，可以转换成目标浏览器所认识的语法 3.终结全局css，大意就是说存在命令困难可能导致全局的css名字会出现多个，postcss的css模块会帮助处理这些同名的css名字 4.避免css代码中的错误，就是可以检测并避免样式表的错误 接下来让我们开始使用吧！！！ 注意：需要在node环境下使用,这里就是看看作用，就不在webpack下使用了

2.1 安装

执行 npm i postcss postcss-cli -D image.png image.png 执行 npm i autoprefixer -D 安装 autoprefixer

2.2创建postcss.config.js

键入代码

const autoprefixer = require('autoprefixer')
module.exports ={
    plugins:[
        autoprefixer({
            browsers:[">0%"]//兼容市面上的所有版本的浏览器
        })
    ]
}

然后我们在文件夹下新建一个css文件，index.css image.png 在index.css中写入：

body{
    display: flex;
}

在终端中执行 npx postcss index.css css/index.css image.png 在css/index.css下可以看见已经添加好了所有的前缀 image.png 但是我在这里看见一个奇怪的现象，在命令行出现了一大堆的英文 image.png 大意就是将autoprefixer浏览器配置替换为browserslist配置，使用browserslist这个key在package.json或者.browserslistrc文件进行配置 那么我们接下来使用package.json配置使用一下

2.3 package.json配置

image.png 修改postcss.config.js文件代码： image.png 执行 npx postcss index.css package/index.css image.png 查看package/index.css文件 image.png 可以看到和刚才那个是一样的

2.3.browserslistrc配置

其实就是将在package.json文件中的代码移至过来 image.png 执行npx postcss index.css -o brow/index.css image.png image.png

和package.json下的代码一致。

结局

可以用Can I Use和autoprefixer 查看浏览器的兼容性和添加的前缀。 常见配置 last 2 version 最新的两个大版本 '>1 %':全球使用人数超过1%的浏览器 cover 99.5%:覆盖99.5%主流浏览器 chrome > 50 ie 9-11 : 指定某个版本的浏览器 not ie < 11 : 排除ie11 以下版本。 瑞思拜！！！

avatar
文章
阅读
粉丝