使用prefixfree来简化CSS开发过程

更新时间:2015-04-30 09:41:56点击次数:647次

熟悉前端开发的朋友,肯定经历过烦心的CSS属性浏览器兼容性调整过程,为了使得CSS属性支持所有的浏览器,例如, chrome,firefox,IE,opera,Safari等等,你不得不处理添加一大推的冗余CSS代码(带有浏览器特定前缀的CSS相关代码)。特别是CSS3中的相关属性,尤其需要处理。


下面是一个动画效果例子相关代码:

1. @keyframes myanim {

2.   0%   { opacity: 0; }

3.  100% { opacity: 1; }

4.}

5. 

6.#box{

7.  animation: myanim 5s infinite; /* IE 10+, Fx 29+ */

8.}

以上代码对于支持CSS3动画属性keyframe非常来的浏览器来说,没有任何问题,但是对于一些浏览器,比如,chrome,可能你看不到任何动画效果,我们不得不添加并修改成如下代码:

1.@-webkit-keyframes myanim {

2.  0%   { opacity: 0; }

3.  100% { opacity: 1; }

4.}

5.@-moz-keyframes myanim {

6.  0%   { opacity: 0; }

7.  100% { opacity: 1; }

8.}

9.@-o-keyframes myanim {

10.  0%   { opacity: 0; }

11.  100% { opacity: 1; }

12.}

13.

14.@keyframes myanim {

15.  0%   { opacity: 0; }

16.  100% { opacity: 1; }

17.}

18. 

19.#box{

20.  -webkit-animation: myanim 5s infinite; /* Safari 4+ */

21.  -moz-animation:    myanim 5s infinite; /* Fx 5+ */

22.  -o-animation:      myanim 5s infinite; /* Opera 12+ */

23.  animation: myanim 5s infinite; /* IE 10+, Fx 29+ */

24.}

具体代码运行效果及其相关代码请参考课程: http://www.gbtags.com/gb/gbtutorials/566.htm


为了简化开发过程和相关的代码冗余问题,我们引入了prefixfree这个类库,这个类库,可以自动帮助你添加相关的浏览器特有前缀属性,我们不再需要在css代码中自己手动加入相关的属性,使用也非常的方便,只需要引入prefixfree这个类库即可,如下:


1.<script src="http://cdn.gbtags.com/prefixfree/1.0.7/prefixfree.min.js"></script>


  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息