CSS网页布局与浏览器兼容
上QQ阅读APP看书,第一时间看更新

1.6 浏览器的私有CSS属性

当一个新的CSS属性被开发出来后,由于W3C标准的申请和审核流程十分严格和漫长,浏览器厂商往往会暂时绕开这一流程,通过添加前缀的方式让自己的浏览器率先支持新的属性,本节将向大家介绍各种不同浏览器的私有属性前缀。

1.6.1 不同核心的浏览器的私有CSS属性前缀

不同核心的浏览器都定义了自己的私有CSS属性前缀,以下是在网站的制作过程中经常用到的私有CSS属性的前缀。

-webkit:WebKit核心浏览器的私有CSS属性前缀,包括Chrome、Safari浏览器等。

-moz:Gecko核心浏览器的私有CSS属性前缀,主要是Firefox浏览器。

-ms:Trident核心浏览器的私有CSS属性前缀,主要是IE浏览器。

-o:Presto核心浏览器的私有CSS属性前缀,主要是Opera浏览器。

在实际的网站页面制作和开发过程中,对于大多数CSS3属性来说,考虑到浏览器兼容性,往往需要把所有的浏览器私有属性都写上,如下面的CSS样式设置代码。

.transform {

-webkit-transform: rotate(-30deg);   /*Chrome、Safari浏览器的私有属性前缀*/

-moz-transform: rotate(-30deg);     /*Firefox浏览器的私有属性前缀*/

-ms-transform: rotate(-30deg);     /*IE浏览器的私有属性前缀*/

-o-transform: rotate(-30deg);      /*Opera浏览器的私有属性前缀*/

transform: rotate(-30deg);        /*W3C标准语法,无属性前缀*/

}

1.6.2 CSS属性前缀的排序

即使W3C标准得到了一致通过和广泛推广,但浏览器厂商为了兼容老的内容,还是不得不继续支持带有前缀的私有CSS属性,而开发者面对一些使用低版本浏览器的用户时,也不得不继续在编写CSS样式代码时写上所有的属性前缀。

但是问题随之产生:W3C标准属性在某些情况下与带有前缀的属性具有不同的表现形式,那有什么解决方法呢?

这一方面需要依赖网站开发者的知识和经验,另一方面也可以采取通用的方法,即把W3C的标准语法放在CSS规则的最后面,如下面的CSS样式设置代码。

.btn1 {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;        /*W3C标准语法,无属性前缀*/

}

这样即使出现不一致的情况,后写的符合W3C标准的属性会覆盖前面带有属性前缀的定义,更好地保证显示效果在所有浏览器中一致。