[译]Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器
Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里。
你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以忘记CSS前缀了,按照最新的W3C标准尽情书写无前缀的CSS,像这样:
a {
transition: transform 1s
}
Autoprefixer使用一个浏览器流行度和属性支持度的数据库来给你的CSS添加前缀。
a {
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}
问题
当然,我们可以手动编写带有浏览器前缀的CSS,但是冗长并且容易出错。
我们可以使用像Prefixr的服务和文本编辑器插件,但是处理大量重复的代码依然让人心累。
我们可以使用Sass的Compass或者Stylus的nib这些预处理器提供的mixin库,他们确实解决了许多问题,但也带来了许多问题:他让我们必须使用一种新的语法;他们的更迭速度慢于现代的浏览器。所以我们使用的稳定的发行版本可能带有许多不需要的前缀,并且有时候还需要自己编写mixin库。
同时,Compass并没有为你隐藏前缀,因为你依然要解决许多问题,比如:我需要为border-radius
写一个mixin库吗?我需要用逗号分隔+transition
的参数吗?
Lea Verou的-prefix-free几乎解决了这个问题,但是当你把最终的用户性能考虑进去的话,使用浏览器器端的库并不是一种好的方式。为了防止一遍遍的重复这样的事情,最好的方式就是在资源构建或者项目部署的一次性构建。
揭秘
Autoprefixer是一个CSS后处理器,而不是像Sass和Stylus一样的预处理器。他没有使用新的语法,并且由于他在CSS编译后执行的,所以可以和Sass和Stylus很好的集成。
Autoprefixer基于Rework,一个用于写你自己的CSS后处理器的框架,Rework将CSS解析为有用的JavaScript结构,然后在经过你的处理后再给你输出CSS。
每一版本的Autoprefixer都包含一份最新的Can I Use数据。
- 浏览器以及流行度的清单
- CSS新属性、值和选择器必要的前缀清单
Autoprefixer默认支持两个最新的主要浏览器,这点类似Google,但是你可以选择你的项目所支持的浏览器,通过名称(像 “ff 21”)或者以下规则:
- 主流浏览器的最近两个版本使用 “last 2 versions”
- 全球统计超过1%的使用率使用 “> 1%”
- 只是最新版本使用 “ff>20” 或者 “ff>=20”
然后Autoprefixer计算出哪些前缀是必须的,哪些是过时的。
当Autoprefixer给CSS添加了前缀后,他不会忘记修正语法的差异,通过这样的方式,你的CSS符合最新的W3C标准:
a {
background: linear-gradient(to top, black, white);
display: flex
}
::placeholder {
color: #ccc
}
编译后:
a {
background: -webkit-linear-gradient(bottom, black, white);
background: linear-gradient(to top, black, white);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
:-ms-input-placeholder {
color: #ccc
}
::-moz-placeholder {
color: #ccc
}
::-webkit-input-placeholder {
color: #ccc
}
::placeholder {
color: #ccc
}
同时,Autoprefixer也会情理过时的前缀(从遗留代码或者像Bootstrap库),比如:
a {
-webkit-border-radius: 5px;
border-radius: 5px
}
编译为:
a {
border-radius: 5px
}
所以,Autoprefixer处理后,CSS只会包含实际存在的浏览器前缀,Fotorama从Compass切换为Autoprefixe之后,CSS文件大小减小了将近20%。
Demo
如果你还没有使用过任何自动化的资源构建工具,强烈推荐Grunt。他给你打开一片心的世界,美妙的语法糖、高效的mixin库以及实用的图像处理工具。让开发者效率大大提高,节省了大量时间和精力(自由选择语言、代码复用、使用第三方库能力),这些现在都唾手可得。
下面让我们创建一个项目目录并且创建一个名为style.css
的CSS文件。
a { }
在这个例子里,我们使用Grunt,首先我们需要使用npm
安装grunt-autoprefixer
。
npm install grunt-cli grunt-contrib-watch grunt-autoprefixer
然后我们需要创建Gruntfile.js
并且开启Autoprefixer。
module.exports = function (grunt) {
grunt.initConfig({
autoprefixer: {
dist: {
files: {
'build/style.css': 'style.css'
}
}
},
watch: {
styles: {
files: ['style.css'],
tasks: ['autoprefixer']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
};
这个配置文件,使用Autoprefixer将style.css
编译到build/style.css
,同时我们使用grunt-contrib-watch
监控style.css
文件的改变来重新编译。
让我们开启Grunt的Watch操作
./node_modules/.bin/grunt watch
现在,我们加入CSS3的语法,保存。
a {
width: calc(50% - 2em)
}
见证奇迹的时刻到了。我们得到build/style.css
,Grunt检测到style.css
的变化然后启动Autoprefixer任务,Autoprefixer发现了calc()
值,需要带上Safari6的浏览器前缀。
a {
width: -webkit-calc(50% - 2em);
width: calc(50% - 2em)
}
现在我们向style.css
添加一些更加复杂的CSS3语法。
a {
width: calc(50% - 2em);
transition: transform 1s
}
Autoprefixer已经知道Chrome,Safari6和Opera 15 需要为transition
和transform
添加浏览器前缀,但IE 9需要为transform
添加前缀,作为transition
的值。
a {
width: -webkit-calc(1% + 1em);
width: calc(1% + 1em);
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}
Autoprefixer为你解决那些脏累的活,他会检查Can I Use数据库,添加所需要的浏览器前缀,并且他懂得规范之间的区别。欢迎来到CSS3的未来——再也没有前缀!
接下来呢?
Autoprefixer支持Ruby on Rails,Middleman,Mincer,Grunt,Sublime Text。从这份文档中学习如何在你的环境中使用Autoprefixer。
如果你的环境不支持Autoprefixer,提交给我我会尝试提供帮助。
关注@autoprefixer,获取最新特性和更新信息。
[译]Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器的更多相关文章
- 转:[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
原文来自于:http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html Autoprefixer解析CSS文件并且添加浏览器前缀到 ...
- [译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可 ...
- 浏览器前缀-----[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可 ...
- Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可 ...
- Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完 ...
- autoprefixer安装或者里sass的$mixin处理浏览器前缀
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...
- 使用selenium时,使用从系统启动浏览器与通过自动化驱动方式启动浏览器控件ID不一样解决方法
最近遇到一个怪事,通过正常打开浏览器,按照正常的web登录然后点击进入系统流程,将各控件的ID识别成功,然后使用 python3+selenium写好脚本,高高兴兴的用脚本跑时老是提示找不到控件,然后 ...
- hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...
- Cocos2dx项目在各种IDE中新建类之后的可行编译方式
注:这里说可行,但是并不是最好的,只是可以完成编译. 1.linux+code::blocks下的cocos2dx项目新建一个类TestScene.h 新建的TestScene.h和TestScene ...
随机推荐
- Dijkstra in python
下面是一段由python实现的Dijkstra算法,一些地方的处理实在非常棒,相比于C,代码的数量已经缩减到了60行,所以我想通过本文简单的介绍一下这段代码的细节之处,首先给出源程序: from sy ...
- DataTable 基本转换简单实例
var query = from dt in tblProduct.AsEnumerable() where dt.Field<string>("StockNo") = ...
- UITableview 中获取非选中的cell
实现效果如图: 在cell中有一个button,选中cell改变button的选择状态 yes,选中另外一个cell,别的cell中的button选择状态变成false. //获取当前可显示的cell ...
- Spring Quartz结合Spring mail定期发送邮件
文件配置例如以下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...
- 图片轮换cycle插件的运用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 应用:ValueStack
理解ValueStack的基本机制!对各种现象作出解释. ValueStack实际上就是对OGNL的封装,OGNL主要的功能就是赋值与取值,Struts2正是通过ValueStack来进行赋值与取值的 ...
- 5.6 在线DDL (online DDL)详解
ONLINE ddl 原理: online ddl相关参数 测试原表数据是否能进行ONLINE DDL方法: online DDL 局限性 测试
- View绘制详解(四),谝一谝layout过程
上篇博客我们介绍了View的测量过程,这只是View显示过程的第一步,第二步就是layout了,这个我们一般译作布局,其实就是在View测量完成之后根据View的大小,将其一个一个摆放在ViewGro ...
- C++ (P199—P211)多态 虚函数 抽象类
在介绍多态之前,先回忆:赋值兼容原则.虚基类.二义性.派生类如何给基类赋值等知识. 在赋值兼容原则中:父类对象的指针赋给基类的指针或者父类的对象赋给基类的引用,可以通过强转基类的指针或者引用变为父类的 ...
- posix thread概述
1. 基本概念 一个Unix进程可以理解为一个线程加上地址空间.文件描述符和其他数据.异步表明事情相互独立发生, 除非有强加的依赖性. 并发指实际可能是穿行发生的事情好像同时发生一样.并行指并发序列同 ...