木灵鱼儿

木灵鱼儿

阅读:194

最后更新:2022/07/17/ 3:08:09

关于给css自动添加浏览器前缀

前言

为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。

教程

给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:

webpack:

pnpm i postcss postcss-loader autoprefixer -D

添加对应的rules

{
    test: /.s?css$/,
    use: [
        ...省略
        "postcss-loader",
        "sass-loader"
    ]
}

vue cli

pnpm i autoprefixer -D

由于vue cli内置了postcss以及postcss-loader,所以我们只需要安装autoprefixer即可。


安装完毕后,官方推荐是在项目根目录创建一个postcss.config.js文件,用于统一管理postcss的配置项,里面将包括它对于插件的使用。

于是我们创建一个对应的js文件并写入以下内容:

postcss.config.js

module.exports = {
    plugins: [
        "autoprefixer"
    ]
};

需要注意的是,随着时间的流逝,网上会充斥着一些老旧的教程文章,他们的示例代码中,插件的使用大概是这样的:

module.exports = {
    plugins: {
        "autoprefixer": {
          ...省略
        }
    }
};

这种方式在新版会被弃用,所以如果可以,请使用数组的方式。

事实上我们还需要配置一个浏览器的支持列表,个人推荐的方式是创建一个.browserslistrc文件,有些人是直接写在了其他地方,其实都可以,有多种写法,这里就不细说,百度都有答案。

在根目录创建一个.browserslistrc文件,填入一下示例代码:

.browserslistrc

last 5 version
>1%
ie>=8

这段内容能保证你的css会被自动加上浏览器前缀,当然你也可以自行调整一下。

5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用。
5% in US : 同上,只是使用地区变为美国。支持两个字母的国家码来指定地区。
5% in alt-AS : 同上,只是使用地区变为亚洲所有国家。这里列举了所有的地区码。
5% in my stats : 使用定制的浏览器统计数据。
cover 99.5% : 使用率总和为99.5%的浏览器版本,前提是浏览器提供了使用覆盖率。
cover 99.5% in US : 同上,只是限制了地域,支持两个字母的国家码。
cover 99.5% in my stats :使用定制的浏览器统计数据。
maintained node versions :所有还被 node 基金会维护的 node 版本。
node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。
current node :当前被 browserslist 使用的 node 版本。
extends browserslist-config-mycompany :来自browserslist-config-mycompany包的查询设置
ie 6-8 : 选择一个浏览器的版本范围。
Firefox > 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。
ios 7 :ios 7自带的浏览器。
Firefox ESR :最新的火狐 ESR(长期支持版) 版本的浏览器。
unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。
last 2 major versions or last 2 ios major versions :最近的两个发行版,包括所有的次版本号和补丁版本号变更的浏览器版本。
since 2015 or last 2 years :自某个时间以来更新的版本(也可以写的更具体since 2015-03或者since 2015-03-10)
dead :通过last 2 versions筛选的浏览器版本中,全球使用率低于0.5%并且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。
last 2 versions :每个浏览器最近的两个版本。
last 2 Chrome versions :chrome 浏览器最近的两个版本。
defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。
not ie <= 8 : 浏览器范围的取反。
可以添加not在任和查询条件前面,表示取反

此时,如果没有意外的话,css已经可以正确的自动添加浏览器前缀了。

问题

vue cli 中无效

首先官方的文档中有这么一句话:

我们默认开启了 autoprefixer。如果要配置目标浏览器,可使用 package.json 的 browserslist 字段。

这句话从官方预设的角度来看,是没错的,前提是你没有改动vue cli 对于css的rules默认配置,也就是如果你通过vue.config.js自己配置了css的规则,那么官方开启的autoprefixer其实是失效的。

所以,这也是为什么我们开头需要安装autoprefixer的原因,如果你没有改动,那么其实这个插件是不用安装的,但是对于移动端开发,必然会使用rem转换插件postcss-pxtorem

这个插件目前主流的处理配置的方式也都是创建postcss.config.js,但是在我遇到的项目里面,他们将pxtorem的配置放在了vue.config.js的css规则中,这就导致了autoprefixer的失效。

一开始我还以为是我的browserslistrc的配置问题,最后才发现这个蛋疼的原因。

解决办法就是在vue.config.js的css规则里面将autoprefixer插件手动载入:

module.exports  = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue({ file }) {
              return file.indexOf("vant") !==  -1  ?  37.5  :  75;
            },
            propList: ["*"],
            minPixelValue:  12,
          }),
          require("autoprefixer")
        ]
      }
    }
  }
}

如果你没有自定义vue cli的css规则,且创建的是postcss.config.js配置文件,那么你完全可以省去安装autoprefixer,保证插件的干净

注意

如果项目中存在postcss.config.js文件,而vue.config.js也配置了postcss,那么就会以vue.config.js的配置为最终配置,这就会间接导致postcss.config.js文件中对于autoprefixer插件设置无效。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 10
文章被阅读 194

相关文章