[译]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 需要为transitiontransform添加浏览器前缀,但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的未来——再也没有前缀!

接下来呢?

  1. Autoprefixer支持Ruby on Rails,Middleman,Mincer,Grunt,Sublime Text。从这份文档中学习如何在你的环境中使用Autoprefixer。

  2. 如果你的环境不支持Autoprefixer,提交给我我会尝试提供帮助。

  3. 关注@autoprefixer,获取最新特性和更新信息。

 

转载于:https://www.cnblogs.com/zjzhome/p/4330408.html

你可能感兴趣的:(数据库,人工智能,ruby)