CSS3无前缀脚本prefixfree.js及Animatable介绍

我是从《响web设计》p106知道prefixfree是用于css文件自动追加前缀的JavaScript方案。

prefixfree官网http://leaverou.github.io/prefixfree/，但没找到下载地址

——————————————————————————————————

如下是张鑫旭博客《CSS3无前缀脚本prefixfree.js及Animatable介绍》（原文：http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/）：

1、引导之言

虽然现代浏览器支持CSS3，可是一些过往的版本或是目前有些CSS3属性的应用仍是离不开前缀的。像box-shadow,border-radius这类属性，目前较新版本的浏览器都是不须要前缀的（包括IE9），可是，有些CSS3属性，例如渐变，oh,my GEE GEE，前缀少不了，因而每次应用都像是建大楼同样，以下jQuery Mobile CSS中的某一渐变截图：

比楼高是很傻逼的一件事情，因此如此霸气侧漏的CSS大楼反而让人伤不起，咱们总但愿一马平川小山丘，老天开眼掉美妞。心中甚是但愿跟这些前缀说“顾德白”。有此想法的前端er们想必大有人在，因而，一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的东西。有了这个东西，嘿嘿，阴沉的天空顿时划出一道圣洁光芒。

2、prefixfree.js的使用

首先，在页面的头部调用以下脚本：

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

github有时候会出现反应迟钝的状况，您还能够调用以下连接：

<script src="http://www.zhangxinxu.com/study/js/mini/prefixfree.min.js"></script>

而后，随便你是在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery .css()方法此脚本会自动补上须要的前缀，让响应的浏览器支持该CSS3属性。使用很是之轻松惬意。

例如后面这个demo页面所展现的，您能够狠狠地点击这里：prefixfree.js使用简单测试demo

demo页面的渐变相关代码就是下面寥寥两行：

background-color: #a0b3d6;
background-image: linear-gradient(top, #beceeb, #34538b);

可是，全部较新的现代浏览器下都长得一表人才，例如支持渐变较晚的Opera浏览器：

是否是简单得让人提不起精神哈！

貌似prefixfree项目的首页你能够去这个地址查看：http://leaverou.github.com/prefixfree/

该页面上列出了prefixfree.js几个局限性的地方：

1. @import-ed之类文件不鸟
2. 跨域连接样式不鸟
3. 无前缀连接样式Chrome和Opera下部分不鸟
4. 行内style无前缀值在IE和FireFox3.6如下不鸟，FireFox 3.6下的属性亦如此

浏览器支持
目标浏览器为IE9+, Opera 10+, Firefox 3.5+, Safari 4+ 和 Chrome。

3、prefixfree.js应用之Animatable

Animatable是纳尼？
Animatable这东东彷佛与prefixfree.js的有些同父这般狗血的血缘关系。由于Animatable项目的页面地址是：http://leaverou.github.com/animatable/

这就跟打死我也不相信王语嫣和神仙姐姐没有关系同样。八卦先扔一边，Animatable借助prefixfree.js将CSS中各个属性的动画效果都展现出来了。有些动画效果是不看不知道，看了吓一跳。好比说第四个晃得我眼睛看到星星的纹理动画效果：

我看了这些动画效果，顿生了很多灵感和渐进加强的交互应用，不知你是否也有些想法呢？

Animatable项目页面动画效果的批量实现原理以下：
1. 遍历页面上每一个含有data-property属性的a元素；
2. 根据dom元素上的data-property值，form值和to值组装无前缀的CSS3 animate样式代码；
3. 以style节点元素的形式将组装的CSS代码append到head标签中，因页面调用了prefixfree.js脚本，因而各个浏览器下的animate CSS被渲染，效果呈现。

用一个成语形容上图内容就是：百画齐放——一百个动画效果一块儿播放。

注：颜色的动画效果嘛，仍是使用hsla颜色更好些。

4、结语

prefixfree.js能够大大简化偶们CSS3代码的数量，Animatable能够为咱们实现一些交互效果提供灵感。上面我提到过我实现一些效果的灵感，例以下面这个例子，层的悬空动画效果：

鼠标以上去，div层左上位置，同时阴影愈来愈大，愈来愈淡。模拟真实世界的场景，因而就有了悬空感受的效果。咱们能够将相似这样子的效果渐进加强式的应用在咱们的页面上，会是咱们的页面蓬荜生辉的。

您能够狠狠地点击这里：层悬空动画效果demo