一、引導之言

雖然現代瀏覽器支持CSS3，但是一些過往的版本或是目前有些CSS3屬性的應用還是離不開前綴的。像box-shadow, border-radius這類屬性，目前較新版本的瀏覽器都是不需要前綴的（包括IE9），但是，有些CSS3屬性，例如漸變，oh,my GEE GEE，前綴少不了，于是每次應用都像是建大樓一樣，如下jQuery Mobile CSS中的某一漸變截圖：

比樓高是很傻逼的一件事情，所以如此霸氣側漏的CSS大樓反而讓人傷不起，我們總希望一馬平川小山丘，老天開眼掉美妞。心中甚是希望跟這些前綴說 “顧德白”。有此想法的前端er們想必大有人在，于是，一些牛逼且執著于web技術且樂于分享的仁兄(Lea Verou)就搞了個名叫prefixfree.js的東西。有了這個東西，嘿嘿，陰沉的天空頓時劃出一道圣潔光芒。

二、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幾個局限性的地方：

@import-ed之類文件不鳥

跨域鏈接樣式不鳥

無前綴鏈接樣式Chrome和Opera下部分不鳥

行內style無前綴值在IE和FireFox3.6以下不鳥，FireFox 3.6下的屬性亦如此

瀏覽器支持
目標瀏覽器為IE9+, Opera 10+, Firefox 3.5+, Safari 4+ 和 Chrome。

三、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顏色更好些。

四、結語

prefixfree.js可以大大簡化偶們CSS3代碼的數量，Animatable可以為我們實現一些交互效果提供靈感。上面我提到過我實現一些效果的靈感，例如下面這個例子，層的懸空動畫效果：

鼠標以上去，div層左上位置，同時陰影越來越大，越來越淡。模擬真實世界的場景，于是就有了懸空感覺的效果。我們可以將類似這樣子的效果漸進增強式的應用在我們的頁面上，會是我們的頁面蓬蓽生輝的。

您可以狠狠地點擊這里：層懸空動畫效果demo

總結

以上是生活随笔為你收集整理的CSS3无前缀脚本prefixfree.js及Animatable介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。