CSS3中的前缀
来源:互联网 发布:python ggplot facet 编辑:程序博客网 时间:2024/06/05 00:25
CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。
看看都有哪些前缀:
-webkit Webkit内核(Chrome/Safari)
-moz Gecko内核(火狐浏览器)
-ms Trident内核(IE浏览器)
-o Presto内核(Opera)
举例来说,一个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); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg);
去掉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;
0 0
- CSS3中的前缀
- IE10中的无前缀CSS3渐变
- css3前缀
- css3前缀
- grunt中的autoprefixer,自动一键补充css3兼容前缀
- CSS3前缀和rem
- CSS3浏览器前缀
- CSS3浏览器兼容前缀
- css3前缀和rem
- css3浏览器前缀兼容
- CSS3为什么有一堆前缀
- 不同浏览器的CSS3前缀
- css3中浏览器厂商前缀
- 常用的CSS3 -webkit-前缀
- 如何处理CSS3属性前缀
- [13]CSS3 前缀和rem
- 【CSS3】浏览器前缀兼容写法
- CSS3 各浏览器私有属性前缀
- Tracing on Linux (tracepoint induction)
- ProgressDialog.setCanceledOnTouchOutside(false);
- 未知长度链表数据随机抽取问题
- iOS - NSLog的使用方法
- APP被苹果App Store拒绝的79个原因(未完待续)
- CSS3中的前缀
- iOS应用程序生命周期(前后台切换,应用的各种状态)详解
- 机器学习(Machine Learning, ML)
- Cocos2d-x 多分辨率适配完全解析
- 局部加权回归
- 如何学会做一名优秀的下属
- 主从数据库架构
- 如何使用chrome search engine和firefox search engine自定义搜索引擎
- uva - 11292 - Dragon of Loowater(贪心)