当前第2页 返回上一页
Autoprefixer是一款自动管理浏览器前缀的插件,把Autoprefixer添加到资源构建工具(例如Grunt)后,可以完全忘记有关CSS前缀的东西,只需按照最新的W3C规范来正常书写CSS即可
1 2 3 4 5 6 7 8 9 10 11 12 13 | //我们编写的代码
div {
transform: rotate( 30 deg);
}
// 自动补全的代码,具体补全哪些由要兼容的浏览器版本决定,可以自行设置
div {
-ms-transform: rotate( 30 deg);
-webkit-transform: rotate( 30 deg);
-o-transform: rotate( 30 deg);
-moz-transform: rotate( 30 deg);
transform: rotate( 30 deg);
}
|
webpack 中配置 postcss-loader 和 postcss-preset-env 也可以处理兼容问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | module: {
rules: [{
test: /\.css$/,
use: [
// 这个 loader 取代 style-loader。作用:提取 js 中的 css 成单独文件
MiniCssExtractPlugin.loader,
// 将 css 文件整合到 js 文件中
'css-loader' ,
//修改 loader 配置
{
loader: 'postcss-loader' ,
options: {
ident: 'postcss' ,
plugins: () => [
// postcss 的插件
require( 'postcss-preset-env' )()
]
}
}
]
}]
}
// package.json
"browserslist" : {
//开发环境配置
"development" : [
"last 1 chrome version" ,
"last 1 firefox version" ,
"last 1 safari version"
],
//生产环境配置
"production" : [
">0.2%" ,
"not dead" ,
"not op_mini all"
]
}
|
相关推荐:CSS教程
以上就是css兼容性有哪些处理方式的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css如何设置元素高度自适应
css的冲突是什么
css如何画线
css怎么设置字体大小
css垂直对齐不起作用的原因及解决方法
css中如何设置英文首字母大写
css兼容性有哪些处理方式
火狐加载css不成功怎么办
为什么要用css?
css如何垂直对齐容器中的元素
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css兼容性有哪些处理方式