- CSS网页布局与浏览器兼容
- 张晓景
- 731字
- 2021-01-08 17:58:58
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标准的属性会覆盖前面带有属性前缀的定义，更好地保证显示效果在所有浏览器中一致。