Prefix free：摆脱 CSS3 前缀

做前端开发，经常各种Code （html css js），特别是css3的一些属性，经常需要添加-moz-、-webkit-、 -o-、 -ms-，表示无比的淡疼；本来很简介的代码，这样下来，乱乱的感觉。

还好，有些牛逼的前端开发的人在，有个叫Lea Verou的家伙就搞了一个Prefix free的东东来完善减轻一些负担。类似插件还有jQuery CSS3 Finalize。

 

Prefix free简介

特点：

• 处理 <link> 或<style>元素，在需要的地方自动添加前缀；
• 处理新的<link>或<style>元素，即网页加载完后再添加的新标签，需要Dynamic DOM plugin；
• 使用jQuery’s .css()来设置属性，需要jQuery plugin；
• JS 只有 5KB（gzip后仅2.5KB）。

缺点：

• 不支持 @import 文件；
• 不支持跨域（cross-origin）链接的样式表；
• 不支持 filter和一些未知的属性。

支持浏览器

IE9+, Opera 10+, Firefox 3.5+, Safari 4+ 和 Chrome

 

如何使用Prefix free

 

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

 

你可以放在网页的任何地方，建议放在样式表后，以尽量减少FOUC（Flash Of UnCSS3-ed Content）

使用后，游览器会自动添加“相当”的前缀；例如 Firefox 就会添加 -moz-，Chrome 就会添加 -webkit-，Opera 添加 -o-，IE10 添加 -ms-等。

 

例子

Chrome v15 使用前

background: #80A060;
background-image: linear-gradient(transparent, rgba(10,0,0,.3));
text-shadow: .08em .08em .2em rgba(0,0,0,.6);
border-radius: 50%;
box-shadow: .1em .2em .4em -.2em black;
box-sizing: border-box;
transform: rotate(15deg);
animation: rotate;
cursor: zoom-in;

 

 

Chrome v15 使用后

background: #80A060;
background-image: -webkit-linear-gradient(transparent, rgba(10,0,0,.3));
text-shadow: .08em .08em .2em rgba(0,0,0,.6);
border-radius: 50%;
-webkit-box-shadow: .1em .2em .4em -.2em black;
-webkit-box-sizing: border-box;
-webkit-transform: rotate(15deg);
-webkit-animation: rotate;
cursor: -webkit-zoom-in;

 

 

 

本文由「子任」原创编辑整理，链接: Prefix free：摆脱 CSS3 前缀

主页：http://leaverou.github.io/prefixfree/