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标准的属性会覆盖前面带有属性前缀的定义,更好地保证显示效果在所有浏览器中一致。