您的位置:首页 > Web前端 > CSS

css3中浏览器厂商前缀

2015-06-09 13:46 483 查看
css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程,css中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险,同时也会出现有的浏览器厂商支持的好,有的支持的不好,所以就用厂商前缀加以区分。

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代码中(暂时)需要写上这么多前缀,那么他们的顺序是如何的呢?

答案在下面↓

是先写私有的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;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: