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/

Leave a Reply