CSS3 各浏览器私有属性前缀
2012-12-13 23:11
204 查看
CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。
以下是几种常用前缀
-webkit-moz
-ms
-o
举例来说,一个CSS3旋转的代码是:
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/
CSS3前缀+标准代码的顺序
既然CSS3代码中(暂时)需要写上这么多前缀,那么他们的顺序是如何的呢?一篇文章中详细分析了代码顺序:ordering css3 properties
结论是先写私有的CSS3属性,再写标准的CSS3属性。
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/ transform:rotate(-3deg); /*为nothing*/
去掉CSS3前缀
什么时候我们可以去掉一个属性的CSS3前缀呢?答案是,当一个属性成为标准,并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。以border-radius为例:
-moz-border-radius: 12px; /* FF1-3.6 */ -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
FF4、Saf5以及Chrome都支持border-radius属性了,我们就没有必要写以上两条了,代码变成:
border-radius: 12px;
【注】CSS Lint有一条:使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require
all browser prefixes),我认为不要盲目迷信,你觉得呢?
相关文章推荐
- css3私有属性前缀及主流浏览器内核
- CSS3在各浏览器上的属性前缀
- CSS3:各种浏览器私有属性
- CSS3 浏览器私有属性标识和transform
- CSS3浏览器内核以及私有前缀
- 为什么建议将浏览器私有CSS3属性写在前面,标准属性写在后面?
- 【css】浏览器私有属性前缀使用详解
- 各浏览器私有属性前缀
- CSS3 浏览器私有前缀
- CSS声明各个浏览器私有属性的命名前缀
- CSS3中浏览器私有属性
- js原生函数检查浏览器支持的css3属性前缀
- 四二、js操作DOM(dom)改变css3属性时封装方法使自动识别浏览器添加css3属性前缀
- 如何处理CSS3属性前缀
- 如何处理CSS3属性前缀
- JS判断浏览器是否支持某一个CSS3属性的方法
- css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
- 让IE6/IE7/IE8浏览器支持CSS3属性
- css3元素私有前缀及其用法
- css3前缀、rem和浏览器css3支持版本