fadein

CSS浏览器前缀兼容写法

Vendorprefix—浏览器引擎前缀，是⼀些放在CSS属性前的⼩字符串，⽤来确保这种属性只在特定的浏览器渲染引擎下才能识别和⽣效。⾕

歌浏览器和Safari浏览器使⽤的是WebKit渲染引擎，⽕狐浏览器使⽤的是Gecko引擎，InternetExplorer使⽤的是Trident引擎，Opera以前使

⽤Presto引擎，后改为WebKit引擎。⼀种浏览器引擎⾥⼀般不实现其它引擎前缀标识的CSS属性，但由于以WebKit为引擎的移动浏览器相

当流⾏，⽕狐等浏览器在其移动版⾥也实现了部分WebKit引擎前缀的CSS属性。

浏览器引擎前缀(VendorPrefix)有哪些？

-moz-/*⽕狐等使⽤Mozilla浏览器引擎的浏览器*/

-webkit-/*Safari,⾕歌浏览器等使⽤Webkit引擎的浏览器*/

-o-/*Opera浏览器(早期)*/

-ms-/*InternetExplorer(不⼀定)*/

为什么需要浏览器引擎前缀(VendorPrefix)？

这些浏览器引擎前缀(VendorPrefix)主要是各种浏览器⽤来试验或测试新出现的CSS3属性特征。可以总结为以下3点：

试验⼀些还未成为标准的的CSS属性——也许永远不会成为标准

对新出现的标准的CSS3属性特征做实验性的实现

对CSS3中⼀些新属性做等效语义的个性实现

这些前缀并⾮所有都是需要的，但通常你加上这些前缀不会有任何害处——只要记住⼀条，把不带前缀的版本放到最后⼀⾏：

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;

border-radius:10px;

有些新的CSS3属性已经试验了很久，⼀些浏览器已经对这些属性不再使⽤前缀。Border-radius属性就是⼀个⾮常典型的例⼦。最新版的浏

览器都⽀持不带前缀的Border-radius属性写法。

需要使⽤VendorPrefixes的CSS3属性

主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括：

@keyframes

移动和变换属性(transition-property,transition-duration,transition-timing-function,transition-delay)

动画属性(animation-name,animation-duration,animation-timing-function,animation-delay)

border-radius

box-shadow

backface-visibility

column属性

flex属性

perspective属性

完整的列表不只这些，⽽且还会增加。

浏览器引擎前缀(vendor-prefix)的⽤法

当需要使⽤浏览器引擎前缀(vendor-prefix)时，最好是把带有各种前缀的写法放在前⾯，然后把不带前缀的标准的写法放到最后。⽐如：

/*简单属性*/

.myClass{

-webkit-animation-name:fadeIn;

-moz-animation-name:fadeIn;

-o-animation-name:fadeIn;

-ms-animation-name:fadeIn;

animation-name:fadeIn;/*不带前缀的放到最后*/

}

/*复杂属性keyframes*/

@-webkit-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

@-moz-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

@-o-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

@-ms-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

/*不带前缀的放到最后*/

@keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

InternetExplorer

InternetExplorer9开始⽀持很多(但并不是全部)CSS3⾥的新属性。⽐如，你也可以在IE⾥使⽤不带浏览器引擎前缀(vendor-prefix)的border-

radius属性。

IE6到IE8都不⽀持CSS3，很遗憾的是，使⽤这些低版本浏览器的⽤户还很多。所以，确保你的⽹站设计在不⽀持CSS3的情况下也能正常

显⽰。对于⼀些属性：border-radius,linear-gradient,和box-shadow,你可以使⽤，它是⼀个很⼩的⽂件，把它放到你的⽹站的根⽬录下，

就能让你的页⾯中IE6，IE8中也⽀持这些属性。