正文

如何处理CSS3属性前缀（转载）总结

IP云
IP云V管理员/8 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说：

为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。

姐姐的一句话让我汗颜，我还在思考着如何让Sass来写Gradient，或者类似这样需要带前缀的CSS3属性。也这样让我在思考，那么有了Autoprefixer这样的后处理，Sass中有关于CSS3的mixins是不是已失去了他存在的意义。带着这样的为什么？我们一起来开启今天有关于CSS3前缀的探讨。

CSS3的属性为什么要带前缀

使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？

我的理解是，浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对流星器的前缀。现在主要流行的浏览器内核主要有：

  • Trident内核： 主要代表为IE浏览器
  • Gecko内核： 主要代表为Firefox
  • Presto内核： 主要代表为Opera
  • Webkit内核： 产要代表为Chrome和Safari

而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

  • Trident内核： 前缀为 -ms
  • Gecko内核： 前缀为 -moz
  • Presto内核： 前缀为 -o
  • Webkit内核： 前缀为 -webkit

来看一个简单的示例，早期写一个圆角 border-radius ，需要这样写： 

.box {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -o-border-radius: 5px;

  border-radius: 5px;

}

这样编写代码，无形之中给前端人员增加了不少工作量，于是开始有人在讨论这个问题“如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别？”

-prefix-free

为了解决手工书写前缀的问题，最早的一个解决方案是由Lea Verou提供的一个-prefix-free脚本。你只需要在你的 .html 文件中插入一个 prefixfree.js 文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。

添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚本加载失败，那么就会出现浏览器无法正常渲染CSS3的样式风格。

prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。

编辑器插件

除了prefixfree脚本之外，很多同学依赖于文本编辑器的插件来处理。这里来看看Sublime Text编辑器里是如何实现Autoprefixer功能的。

要在编辑器中安装Autoprefixer插件，首先需要你的环境中已经安装好了Node.js。你可以在命令终端执行： 

node -v

来检测是否已安装，如果没有安装，请先安装。在这里假设你已具备Node.js环境。

现在开启你的Sublime Text编辑器，你可以同时按下 command + Shift + p 三个键，选择"Install Package"。然后搜索Autoprefixer。

现在你在你的Sublime Text中使用Autoprefixer功能。假设你在样式文件中输入： 

.box {

  transform: rotate(45deg);

  border-radius: 5px;

  box-shadow: 1px 1px 0 rgba(0,0,0,.25);

  transition: all .2s ease .1s;

}

这个时候你只需要同时按下 Command + Shift + P 三个键，选择“Autoprefix CSS”，并且回车，就能得到下面这样的代码： 

.box {

  -webkit-transform: rotate(45deg);

          transform: rotate(45deg);

  border-radius: 5px;

  box-shadow: 1px 1px 0 rgba(0,0,0,.25);

  transition: all .2s ease .1s;

}

如下图所示：

注：不同的配置，执行的效果不一样。详细可以点击这里查阅。

预处理器中的混合宏

随着CSS预处理器越来越普及，部分同学开始采用预处理器中的混合宏来处理CSS3前缀的事项。比如说Compass，里面就是使用Sass的mixin为CSS3需要带前缀的属性定制了一些mixin。还有类似于Stylus中的nib等。预处理器中的混合宏确实可以解决很多问题，但也产生了新的问题，就是它所使用的语法是全新的，如果要使用就必须重新学习，另外这类工具的演进速度通常都会跟不上浏览器的发展速度，这样也会造成其产生的CSS有过时的问题，有时候为了解决一些问题，还需要自己去写mixins。比如：

正如前面所说的，如果要跟上浏览器的演进，就需要不断的更新你的CSS3 mixins,不然就会造成你的代码不是最新的。其中Compass就存在这样的问题： 

@import "compass";

.box {

  @include border-radius(5px);

}

编译出来的CSS： 

.box {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

而现实却不尽人意，因为到写这篇文章为止，我们写圆角属性只需要： 

.box {

  border-radius: 5px;

}

各主流浏览器就能正常的解析。造成这个原因的时，Compass中的CSS3的mixin没有跟上步子去更新定义好的mixins。

使用Autoprefixer

使用Sass、LESS、Stylus或者其他类似的工具都是属于CSS的前处理器（Preprocessor），而Autoprefixer则是一种后处理器（Postprocessor）。它是直接针对CSS本身来进行处理，不需要任何额外的语法。因为它是在CSS代码产生之后才进行后续处理。

Autoprefixer是以Rework这种架构所发展的CSS后处理器，他是将CSS代码解析后转成JavaScript的资料结构，进行处理后再产生新的CSS代码。

Autoprefixer会分析CSS代码，并且根据Can I Use所提供的资料来决定要加上哪些浏览器前缀，而你要做的事情就是把他加入自己的自动化开发工具中（比如Grunt或者Gulp），然后就可以直接使用W3C的标准来写CSS，不需要加上任何浏览器的私有前缀。

接下来看看如何使用自动化工具实现Autoprefixer功能。

Grunt中配置Autoprefixer

假设你的环境中已具备了Grunt的运行环境，如果没有请先移步Grunt官网了解，这里不做过多阐述。

在Github中有一个grunt-autoprefixer的插件，按照其官方提示，我在命令行中执行了下面的语句： 

npm install grunt-autoprefixer --save-dev

命令终端提示：

似乎没有成功（其实我也不太懂Grunt，只是临阵磨枪）。于是我改投@一丝姐姐说的postcss。在命令终端重新输入： 

npm install grunt-postcss --save-dev

这下似乎有戏了：

不过我还跟着官网所说的执行了另外一个命令： 

npm install grunt-postcss autoprefixer-core csswring

运行命令后可以看到下图的提示信息：

接下来需要在你项目的根目录中配置 Gruntfile.js 文件： 

'use strict';

module.exports = function(grunt) {

  // Dynamically loads all required grunt tasks

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  var autoprefixer = require('autoprefixer-core');

  // Configures the tasks that can be run

  grunt.initConfig({

    postcss: {

        options: {

            processors: [

              autoprefixer({ browsers: ['last 2 version'] }).postcss

            ]

        },

        // dist: {

        //  src: 'src/css/*.css',

        //  dest:'dest/css/*.css'

        // }

        multiple_files: {

          expand: true,

          flatten: true,

          src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css

          dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css

        },

    },

  });

  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);

};

为了验证这样做是否正确，我在项目中的 src/css/ 中创建了一个 main.css 文件，然后输入代码： 

a {

  transition: all .2s ease .1s;

  transform: rotate(45deg) translateY(200px);

}

在命令终端执行： 

grunt

终端将运行： 

Running "postcss:multiple_files" (postcss) task

File dest/css/main.css created.

Done, without errors.

查看项目中自动创建了一个 dest/css/main.css 文件，而里面的代码： 

a {

  transition: all .2s ease .1s;

  -webkit-transform: rotate(45deg) translateY(200px);

          transform: rotate(45deg) translateY(200px);

}

正是我需要的样式代码。这样尝试一回，觉得比使用Sass中的mixin爽多了。

Gulp中配置Autoprefixer

除了Grunt可以配置Autoprefixer之外，还可以使用Gulp来配置。这里也假设你的项目中已具备了Gulp的运行环境，如果没有，可以查阅Gulp官网相关资料。

根据gulp-autoprefixer官网提示，我在命令终端输入了： 

npm install gulp-autoprefixer --save-dev

在终端中可以看到这样的提示信息：

在Grunt中需要在 Gruntfile.js 进行配置，而在Gulp中也有点类似，需要在 gulpfile.js 中进行配置： 

// include gulp

var gulp = require('gulp'); 

// include plug-ins

var autoprefix = require('gulp-autoprefixer');

// JS hint task

gulp.task('styles', function() {

  gulp.src(['./src/styles/*.css'])

    .pipe(autoprefix('last 2 versions'))

    .pipe(gulp.dest('./build/styles'));

});

看上去要比 Gruntfile.js 配置简单一些。为了验证操作是否正确，我在项目中创建了 src/styles/style.css ,并且在 style.css 文件中输入了： 

a {

  transform: translateY(20px) rotate(45deg);

}

接下来在命令终端执行： 

gulp styles

看到如下提示信息： 

[12:53:26] Using gulpfile ~/Sites/test/gulp-autoprefixer/gulpfile.js

[12:53:26] Starting 'styles'...

[12:53:26] Finished 'styles' after 7.26 ms

此时，在项目中会自动创建一个 build/styles/style.css 文件，打开这个文件查看代码： 

a {

  -webkit-transform: translateY(20px) rotate(45deg);

      -ms-transform: translateY(20px) rotate(45deg);

          transform: translateY(20px) rotate(45deg);

}

正是我们需要的。

其实在PostCSS也提供了有关于如何在Gulp中配置Autoprefixer的说明。感兴趣的同学可以看看。

有了Autoprefixer这样的工具对于处理CSS3属性前缀来说就不再是头痛的事情了。当然，如果你正在使用CSS预处理器编写代码，那么也可以很完美的结合Autoprefixer去处理。

总结

经过几年的技术演进，CSS3属性前缀的问题已不再是一个问题。如今天你完全可以忽略我要不要加前缀，要加哪些前缀，而只需要专心去码你的代码。把这些烦人的事情交给Autoprefixer去处理。当然，越到后面，或许我们都不需要使用任何前缀。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html

Autoprefixer：一个以最好的方式处理浏览器前缀的后处理程序

2014/08/26 · Web前端, 开发 · 1 评论· Autoprefixer, CSS

分享到：4
  • Oeasy教你玩转后期剪辑Premiere
  • HTML5小游戏---爱心鱼（上）
  • Android-节日短信送祝福(UI篇)
  • Android-多平台分享
原文出处： css-tricks   译文出处：三桂   欢迎分享原创到伯乐头条

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里，使用Can I Use的数据来决定哪些前缀是需要的。

所有你需要做的就是把它添加到你的资源构建工具（例如 Grunt）并且可以完全忘记有CSS前缀这东西。尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样：

1
2
3
a{
transition :transform 1 s
}

Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀：

1
2
3
4
5
a{
-webkit-transition :-webkit-transform 1 s;
transition :-ms-transform 1 s;
transition :transform 1 s
}

问题

当然我们可以手写浏览器前缀，但是这显得乏味以及易错。
我们也可以使用类似Prefixr这样的服务以及编辑器插件，但这仍然乏于跟一堆重复的代码打交道。
我们可以使用象Compass之于Sass以及nib之于Stylus之类的预处理器提供的mixin库。它们可以解决绝大部分问题，但同时又引入了其他问题。
它们强制我们使用新的语法。它们迭代慢于现代浏览器，所以当稳定版发布时会产生很多不必要的前缀，有时我们需要创建自己的mixins。
Compass实际上并没有为你屏蔽前缀，因为你依然需要决定许多问题，例如：我需要为 border－radius 写一个mixin吗？我需要用逗号分割 +transition 的参数吗？
Lea Verou的-prefix-free几乎解决了这个问题，但是使用客户端库并不是个好注意，当你把最终用户性能考虑进去的话。为了防止反复做同样的事情，最好是在资源构建或者项目发布时再构建一次CSS。
揭秘
Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS而不使用特定的语法。可以轻松跟Sass以及Stylus集成，由于它在CSS编译后运行。
Autoprefixer基于Rework，一个可以用来编写你自己的CSS后处理程序的框架。Rework解析CSS成有用Javascript结构经过你的处理后导回给CSS。
Autoprefixer的每个版本都包含一份最新的 Can I Use 数据：
  • 当前浏览器列表以及它们的普及度。
  • 新CSS属性，值和选择器前缀列表。
Autoprefixer默认将支持主流浏览器最近2个版本，这点类似Google。不过你可以在自己的项目中通过名称或者模式进行选择：
  • 主流浏览器最近2个版本用“last 2 versions”；
  • 全球统计有超过1%的使用率使用“>1%”;
  • 仅新版本用“ff>20”或”ff>=20″.
然后Autoprefixer计算哪些前缀是需要的，哪些是已经过期的。
当Autoprefixer添加前缀到你的CSS，还不会忘记修复语法差异。这种方式，CSS是基于最新W3C规范产生：
1
2
3
4
5
6
7
a {
background : linear-gradient(to top , black , white );
display : flex
}
::placeholder {
color : #ccc
}
编译成：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 CSS库），因此下面的代码：
1
2
3
4
a {
-webkit-border-radius : 5px ;
border-radius : 5px
}
编译成：
1
2
3
a {
border-radius : 5px
}
因为经过Autoprefixer处理，CSS将仅包含实际的浏览器前缀。Fotorama从Compass切换到Autoprefixer之后，CSS大小减少了将近20%。
演示
如果你还没用过任何工具来自动化构建你的静态资源，一定要尝试下Grunt，我强烈推荐你开始使用构建工具。这将开启你整个语法糖世界，高效的mixin库以及实用的图片处理工具。所有开发者的高效方法用来节约大量精力以及时间（自由选择语言，代码服用，使用第三方库的能力）现将都适用于前端开发人员。
让我们创建一个项目目录以及在style.css中写些简单的CSS：
style.css
a { }
在这个例子中，我们将使用Grunt。首先需要使用npm安装 grunt-autoprefixer ：
npm install grunt-cli grunt-contrib-watch grunt-autoprefixer
然后我们需要创建 Gruntfile.js 文件以及启用Autoprefixer：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Gruntfile.js
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文件变化 重新编译 build/style.css。
启用Grunt的Watch功能：
./node_modules/.bin/grunt watch
现在我们添加一个CSS3表达式到style.css并保存：
style.css
1
2
3
a {
width : calc(50% - 2em)
}
接下来是见证奇迹的时刻，现在我有了build/style.css文件，Grunt监测到style.css文件发生变化并启用Autoprefixer任务。
Autoprefixer发现了 calc() 值单元需要Safari 6的浏览器前缀。
build/style.css
1
2
3
4
a {
width : -webkit-calc( 50% - 2em );
width : calc( 50% - 2em )
}
我们再添加多一点点复杂的CSS3到style.css并保存：
style.css
1
2
3
4
a {
width : calc( 50% - 2em );
transition : transform 1 s
}
Autoprefixer已知Chrome，Safari 6以及Opera 15需要为 transition 及 transform 添加 前缀。但IE9也需要为transform添加前缀，作为transition的值。
build/style.css
1
2
3
4
5
6
7
a {
width : -webkit-calc( 1% + 1em );
width : calc( 1% + 1em );
-webkit-transition : -webkit-transform 1 s;
transition : -ms-transform 1 s;
transition : transform 1 s
}
Autoprefixer为完成你所有脏活而设计。它会根据Can I Use数据库，写入所有需要的前缀并且同样理解规范之间的区别，欢迎来到未来的CSS3 – 不再有浏览器前缀！
下一步？
1、Autoprefixer支持Ruby on Rails，Middleman，Mincer，Grunt，Sublime Text。了解更多关于如何在你的环境中使用的文档。
2、如果你的环境还不支持Autoprefixer，请报告给我。
3、关注@autoprefixer获得更新以及新特性信息。

相关阅读

目录[+]