还在手动给css加前缀?no!几种自动处理css前缀的方法简介
我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容。移动端还好,基本只要兼容webkit内核的即可,pc端就虐心了,ff、ie、Opera……可以说五花八门,应有尽有,每次要使用例如一些css3属性的时候,就要考虑到添加前缀兼容的问题,那么多属性那么多前缀,简直是泯灭人性!
不过好在现在各种工具的出现,已经可以很好地解决这个问题了,下面就简单介绍几个吧。
1. postcss
postcss是一个用JS插件转化样式的工具。这些插件可以检查CSS,支持变量和mixin,转译未来的CSS语法,内联图像等等……总之是一个非常强大的css处理工具。
在本文中我们主要介绍postcss里面使用率最高的一个插件Autoprefixer。Autoprefixer是专门用来添加厂商前缀的postcss插件,它处理兼容性的依据来源于caniuse。
使用效果
编译前:
.example { display: flex; transition: all .5s; user-select: none; background: linear-gradient(to bottom, white, black);
}
编译后:
.example { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all .5s; transition: all .5s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: -webkit-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black);
}
如何使用?
使用构建工具gulp、webpack、grunt等
gulp
在gulp中,你可以安装npm包gulp-postcss来启用Autoprefixer。
var gulp = require('gulp');
gulp.task('autoprefixer', function () { var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); return gulp.src('./postcss/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('./dist/postcss'));
});
webpack
在webpack中,你可以安装npm包postcss-loader来启用Autoprefixer。
var autoprefixer = require('autoprefixer');module.exports = { module: {
loaders: [
{
test: /.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}
grunt
在grunt中,你可以安装npm包grunt-postcss来启用Autoprefixer。
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [ require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
2.在less、sass等css预处理器中处理前缀
less
在less中可以使用mixin来解决。
例如:
.animation(@args){
-webkit-animation:@args;
-moz-animation:@args;
-ms-animation:@args;
-o-animation:@args; animation:@args;
}
然后调用:
div{
.animation(fadeIn 1s);
}
sass
在sass中可以使用工具库compass来帮助我们。(安装compass前需要先安装Ruby,如何安装自行百度)
然后我们在sass中引入compass模块中需要的部分,然后通过@include命令调用,例如:
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
编译后结果:
.rounded { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
}
3.css预处理搭配构建工具使用Autoprefixer更酸爽
其实我们也看出来了,在预处理中添加前缀其实还是有点麻烦的,但是在webpack等工具中同时使用它们会更为便捷,思路其实很简单,就是:先用预处理器把less、sass转为css,然后再通过Autoprefixer给编译好的css加前缀。以webpack为例:
var autoprefixer = require('autoprefixer');module.exports = { module: {
loaders: [
{
test: /.less$/,
loader: "style-loader!css-loader!postcss-loader!less-loader"
}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}
首先我们先用less-loader编译less为css,然后在通过postcss-loader给编译后的css加前缀,就是这么简单。 参考文章:
https://github.com/postcss/autoprefixer
http://www.ruanyifeng.com/blog/2012/11/compass.html
http://blog.csdn.net/natalie86/article/details/43524285
- Javascript解析机制 执行机制
- Tomcat9源码——编译环境搭建
- 谈谈个人网站的建立(五)—— 小集群的部署
- 跟Google学写代码--Chromium/base--cpu源码学习及应用
- Spring项目路径
- 跟Google学写代码--Chromium/base--stl_util源码学习及应用
- libphonenumber--windows上编译libphonenumber.lib以及使用(C++、VS2015)
- querySelector与querySelectorAll
- 【技术博客】Spark性能优化指南——基础篇
- 移动端兼容系列 HTML与CSS兼容
- 保存到配置文件
- linux学习第六十篇:Linux监控平台介绍,zabbix监控介绍,安装zabbix,忘记Admin密码如何做
- 支持向量机及Python代码实现
- 【技术博客】Android自定义Lint实践
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- R海拾遗-tidyverse
- Flutter Hooks 使用及原理
- ggplot2_总纲
- 聊聊怎样学习Binder
- ggplot2_散点图
- 你真的理解Binder“一次拷贝“吗?
- ggplot2_boxplot
- ggplot_Violin Plot & dot plot
- 只要网速够快,小视频看完一个删一个,任性!Python爬取小视频
- ggplot barplot and error bars
- 设计稿生成游戏界面
- ggplot Stripchart and line
- ggplot2 核密度图和直方图
- 喜欢的歌曲不在一个平台怎么办?你需要一个自己专属的音乐播放器
- ggplot_QQ图和ECDF