一、引導(dǎo)之言

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

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

二、prefixfree.js的使用

首先，在頁(yè)面的頭部調(diào)用如下腳本：

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

github有時(shí)候會(huì)出現(xiàn)反應(yīng)遲鈍的情況，您還可以調(diào)用如下鏈接：

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

然后，隨便你是在link中，或是style中，或是dom元素的style中書寫CSS3 code，或是jQuery .css()方法此腳本會(huì)自動(dòng)補(bǔ)上需要的前綴，讓響應(yīng)的瀏覽器支持該CSS3屬性。使用非常之輕松愜意。

例如后面這個(gè)demo頁(yè)面所展示的，您可以狠狠地點(diǎn)擊這里：prefixfree.js使用簡(jiǎn)單測(cè)試demo

demo頁(yè)面的漸變相關(guān)代碼就是下面寥寥兩行：

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

但是，所有較新的現(xiàn)代瀏覽器下都長(zhǎng)得一表人才，例如支持漸變較晚的Opera瀏覽器：

是不是簡(jiǎn)單得讓人提不起精神哈！

貌似prefixfree項(xiàng)目的首頁(yè)你可以去這個(gè)地址查看：http://leaverou.github.com/prefixfree/

該頁(yè)面上列出了prefixfree.js幾個(gè)局限性的地方：

@import-ed之類文件不鳥

跨域鏈接樣式不鳥

無(wú)前綴鏈接樣式Chrome和Opera下部分不鳥

行內(nèi)style無(wú)前綴值在IE和FireFox3.6以下不鳥，FireFox 3.6下的屬性亦如此

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

三、prefixfree.js應(yīng)用之Animatable

Animatable是納尼？
Animatable這東東似乎與prefixfree.js的有些同父這般狗血的血緣關(guān)系。因?yàn)锳nimatable項(xiàng)目的頁(yè)面地址是：http://leaverou.github.com/animatable/

這就跟打死我也不相信王語(yǔ)嫣和神仙姐姐沒(méi)有關(guān)系一樣。八卦先扔一邊，Animatable借助prefixfree.js將CSS中各個(gè)屬性的動(dòng)畫效果都展示出來(lái)了。有些動(dòng)畫效果是不看不知道，看了嚇一跳。比如說(shuō)第四個(gè)晃得我眼睛看到星星的紋理動(dòng)畫效果：

我看了這些動(dòng)畫效果，頓生了不少靈感和漸進(jìn)增強(qiáng)的交互應(yīng)用，不知你是否也有些想法呢？

Animatable項(xiàng)目頁(yè)面動(dòng)畫效果的批量實(shí)現(xiàn)原理如下：
1. 遍歷頁(yè)面上每個(gè)含有data-property屬性的a元素；
2. 根據(jù)dom元素上的data-property值，form值和to值組裝無(wú)前綴的CSS3 animate樣式代碼；
3. 以style節(jié)點(diǎn)元素的形式將組裝的CSS代碼append到head標(biāo)簽中，因頁(yè)面調(diào)用了prefixfree.js腳本，于是各個(gè)瀏覽器下的animate CSS被渲染，效果呈現(xiàn)。

用一個(gè)成語(yǔ)形容上圖內(nèi)容就是：百畫齊放——一百個(gè)動(dòng)畫效果一起播放。

注：顏色的動(dòng)畫效果嘛，還是使用hsla顏色更好些。

四、結(jié)語(yǔ)

prefixfree.js可以大大簡(jiǎn)化偶們CSS3代碼的數(shù)量，Animatable可以為我們實(shí)現(xiàn)一些交互效果提供靈感。上面我提到過(guò)我實(shí)現(xiàn)一些效果的靈感，例如下面這個(gè)例子，層的懸空動(dòng)畫效果：

鼠標(biāo)以上去，div層左上位置，同時(shí)陰影越來(lái)越大，越來(lái)越淡。模擬真實(shí)世界的場(chǎng)景，于是就有了懸空感覺(jué)的效果。我們可以將類似這樣子的效果漸進(jìn)增強(qiáng)式的應(yīng)用在我們的頁(yè)面上，會(huì)是我們的頁(yè)面蓬蓽生輝的。

您可以狠狠地點(diǎn)擊這里：層懸空動(dòng)畫效果demo

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。