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;
相关文章推荐
- css-文本垂直居中(转)
- 页面文案展开和收缩样式的操作
- CSS3的文字阴影—text-shadow
- Html+Css新手简单快速仿京东商品分类导航
- Css 外边距折叠(collapsed margin ) 浅析
- 修改列表的行样式
- CSS---清除浮动
- css基础知识
- css 背景色渐变---和背景色透明
- css骇客编码,兼容例子
- 常用的CSS代码
- 下拉列表框Spinner-采用自定义布局文件作为Spinner样式
- css3 在线编辑工具 连兼容都写好了
- css3之outline属性
- HTML第二十节(CSS制作照片墙效果与瀑布流)
- HTML+CSS样式设置——CSS一学就会
- 让navigationItem.leftBarButtonItem具有backBarButtonItem的外观样式
- HTML和CSS书写心得
- CSS--使用伪选择器制作箭头图标
- 知道一个div的宽高背景色,如何不通过写在行间样式的办法更改样式?currentStyle(只兼容ie),getComeputedStyle(兼容)-->获取非行间样式