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