木灵鱼儿
阅读:1113
关于给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已经可以正确的自动添加浏览器前缀了。
插件版本问题
最新的autoprefixer要求的postcss版本较高,如果是走最新版,那么直接让npm自动安装就行了,但是如果postcss-pxtorem
使用的是5.1.1这种低版本,autoprefixer需要使用8.0.0的版本才可以正常使用。
npm i autoprefixer@8.0.0
问题
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
插件设置无效。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
css选择器优先级计算规则
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器:* {}选择符:+、>、~、空格、||逻辑组合伪类::not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器:.foo {}属性选择器:[foo] {}伪类::hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
vue cli3-cli4 打包后项目在二级路径的方法
默认情况vue的build打包,都是基于根路径来进行的,但是,如果我们将打包的文件放置再二级目录,就会导致文件无法加载,页面空白。原因有两个:路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时,我们常常会看到一个base选项,内容如下:const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释:类型: string 默认值: "/"应用的基路径。例如,如果整个单页应用服务在 /app/ 下...

实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue cli异步路由加载原理
webpack会解析路由文件的引入,就算你是一个setTimeout输出的路由配置文件,或者if else判断的路由配置文件,他都会将你明文书写的路由vue文件打包。为什么?其原理未知,估计并不是解析代码,而且代码关键字的抓取。如果你是一个api返回的路由配置,webpack的无法准确感知到路由文件的是否被引入,所以它的办法是全部都打包,src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件,哪怕你的这个组件已经被某个路由页明确引入了,这个路由除了会被打包到这个路由页,还会生成单独的chunk...
transform 知识补充
rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴,每个轴的旋转方向默认如图箭头所示。所有的旋转角度,正值都是根据默认的旋转方向来得,负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的,如下图所示:因为在二维的界面Z轴的变化才是有效的,所以默认值的设置就是Z轴,所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的,比如X轴移动100px;transform: translateX(100...
