处理CSS前缀问题的神器——AutoPrefixer
众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量。
What is AutoPrefixer
Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,而你无需关心要为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新的规范。
How to use AutoPrefixer
介绍了这么多,如果用起来很麻烦,那还不如直接手写,而AutoPrefixer的另一大特点就是使用简便,现在来说说怎么用。
AutoPrefixer可以简单的通过下载plugin配置到Sublime
,Brackets
或Atom
等IDE里,而在WebStorm
中无法通过plugin直接安装和使用AutoPrefixer,需要通过External Tools或File Watchers来实现,详细的在WebStorm
中如何安装可以参考 这篇文章。
如果单单只能通过IDE才能使用这个功能,那它远称不上神器,真正让其拥有神器之名的原因是:它可以很简单、有效地同现有的打包工具(gulp
, webpack
等)一同使用,来完成对项目中所有的css
文件中的属性添加前缀。
下面,我们就分别来看在这两种打包工具下如何使用AutoPrefixer。
- gulp
在gulp中,可以使用 AutoPrefixer官网 推荐的postcss
+autoprefixer
两个插件的组合,也可以通过gulp-autoprefixer
这一个插件。
// Method 1: postcss + autoprefixer
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
});
// Method 2: gulp-autoprefixer
gulp.task('autoprefixer', function () {
var autoprefixer = require('gulp-autoprefixer');
return gulp.src('./src/*.css')
.pipe([ autoprefixer({ browsers: ['last 2 versions'] }) ])
.pipe(gulp.dest('./dest'));
});
- webpack(webpack1 的写法)
而在最近很火的webpack
中使用AutoPrefixer更是轻而易举、如虎添翼。
使用webpack
可以通过简单的配置将本文开头提到的sass这样的预处理器同autoprefixer
这样的后处理程序结合在一起。
var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style!css!postcss" },
{ test: /\.scss$/, loader: "style!css!postcss!sass" }
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] })
]}
注: 另外webpack
还有一个autoprefixer-loader
,但npm官网已将其标为【deprecated】,推荐使用上面示例中通过postcss-loader
的方式使用autoprefixer
。
作者:Disciple_D
链接:https://www.jianshu.com/p/f5b0b92e6b0f
处理CSS前缀问题的神器——AutoPrefixer的更多相关文章
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- 还在手动给css加前缀?no!几种自动处理css前缀的方法简介
原文首发于个人博客:还在手动给css加前缀?no!几种自动处理css前缀的方法简介 我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容.移动端还好,基本只要 ...
- webstorm 添加css前缀(兼容)自动添加
Webstorm自动添加css前缀( 兼容) 百度了很多在webstorm中添加css前缀(兼容)自动添加,autoprefixer插件是首选,对于基本的css,还有less都支持,所以就选择了aut ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- JavaScript判断各浏览器CSS前缀的两种方式
不管浏览器更新的多快,号称多么支持标准.厂商不同,他们之间还是有很多差异.我们需要区分出这些差异,针对不同的浏览器做不同的处理. 比如 CSS 前缀,IE 的是 "-ms-",旧版 ...
- 转载: Emmet:HTML/CSS代码快速编写神器
Emmet:HTML/CSS代码快速编写神器 因为文章严禁转载,那本着做一个遵纪守法的好公民,我就不转载了,把链接放下面,方便查阅. http://www.iteye.com/news/27580
- Emmet:HTML/CSS代码快速编写神器
本文来源:http://www.iteye.com/news/27580 ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...
- Emmet:HTML/CSS代码快速编写神器(转)
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- Sublime Text 3插件之Emmet:HTML/CSS代码快速编写神器
一.快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...
随机推荐
- Centos7 部署ftp
1.查看是否已经安装 vsftpd -version 2.安装vsftpd yum install -y vsftpd 3.新建FTP目录 mkdir /data/KodServer/data/Use ...
- 八、hibernate的查询(HQL)
HQL:Hibernate Query Language 提供更加丰富灵活.更为强大的查询能力 HQL更接近SQL语句查询语法 面向对象的查询 "from Children where ci ...
- 【学习总结】Python-3-逻辑运算符
参考:菜鸟教程-Python3运算符 逻辑运算符的计算规则划重点: 并不是只返回布尔型,有时会返回变量的数值 (优先级:not>and>or) 总结: '与或非'三件套中,not与数学逻辑 ...
- 【知识强化】第六章 查找 6.3 B树和B+树
本节课我们来学习本章的第一个难点,就是B树.那么B树它其实是一种数据结构,我们设计出这种数据结构就是为了提高我们的查找效率的,提高我们在磁盘上的查找效率.那么什么是B树呢?了解B树之前,我们先来回忆一 ...
- mysql百万级别重排主键id(网上的删除重建id在大数据量下会出错)
网上教程: 先删除旧的主键 再新建主键 :数据量少时没问题,不会出现主键自增空缺间隔的情况(如:1,2,3,5):但是大数据量时会出现如上所述问题(可能是内部mysql多进程或多线程同时操作引起问题) ...
- Centos7 忘记密码的情况下,修改root密码
linux管理员忘记root密码,需要进行找回操作. 本文基于centos7环境进行操作,由于centos的版本是有差异的,继续之前请确定好版本 一.重启系统,在开机过程中,快速按下键盘上的方向键↑和 ...
- JAVA中的SimpleDateFormat yyyy和YYYY的区别
最近有一个功能是对输入的日期格式化,设计给出的范例是 YYYY-MM-dd HH:mm:ss,于是我简单验证了一下是可以的,然后就这么在手册里写了.然后偶然发现有地方也用yyyy啊,这个到底有神马区别 ...
- AtCoder Beginner Contest 130 F Minimum Bounding Box 三分法求极值(WA)
题意:给n个点的起始坐标以及他们的行走方向,每一单位时间每个点往它的方向移动一单位.问最小能包围所有点的矩形. 解法:看到题目求极值,想了想好像可以用三分法求极值,虽然我也不能证明面积是个单峰函数. ...
- python数字图像处理(一)图像的常见操作
首先导入必要的库,使用Opencv读入图像,避免复杂的图像解析,同时使用Opencv作为算法的对比,由于使用环境为jupyter使用matplotlib直接可视化 import cv2 import ...
- 目标检测中roi的有关操作
1.roi pooling 将从rpn中得到的不同Proposal大小变为fixed_length output, 也就是将roi区域的卷积特征拆分成为H*W个网格,对每个网格进行maxpooling ...