HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写…
May 8, 2015
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/