(转)css3前缀
CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。
看看都有哪些前缀:
- -webkit(chrome)
- -moz(firefox)
- -ms(ie)
- -o(opera)
举例来说,一个CSS3旋转的代码是:
- -webkit-transform:rotate(-3deg);
- -moz-transform:rotate(-3deg);
- -ms-transform:rotate(-3deg);
- -o-transform:rotate(-3deg);
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;
- -webkit-border-radius: 12px;
- border-radius: 12px;
FF4、Saf5以及Chrome都支持border-radius属性了,我们就没有必要写以上两条了,代码变成:
- border-radius: 12px;
(转)css3前缀的更多相关文章
- 第 20 章 CSS3 前缀和 rem
学习要点: 1.CSS3 前缀 2.长度单位 rem 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 在发展中实行标准化的一些问题,重点探讨 CSS3 中新属性前缀问题和新的单位 rem. 一 ...
- 第七十七节,CSS3前缀和rem长度单位
CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...
- 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)
正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...
- webpack快速入门——CSS进阶:自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- 主流浏览器内核,以及CSS3前缀识别码
现在国内常见的浏览器有:IE.Firefox.QQ浏览器.Safari.Opera.Google Chrome.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.UC浏览器.遨游浏览器.世界之窗浏览器 ...
- html5--6-24 css3前缀
html5--6-24 css3前缀 学习要点 掌握css3前缀的使用 CSS3目前很多新增属性尚未被W3C列为标准,对这些暂时未被公布为标准的属性,各家浏览器会在属性前加上前缀词,也将其称之为浏览器 ...
- CSS3前缀
我们经常会遇到写的有些css3属性会在不同的浏览器下呈现不兼容的情况,那是因为浏览器内核不同而导致的兼容性问题. 首先我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的 ...
- webpack打包css自动添加css3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- CSS3前缀自动补全方案和插件
第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...
随机推荐
- windows串口通信的一个活动图
1,打开串口的活动图: 2,关闭串口的活动图:
- 浏览器中显示视频,flash等的代码处理
window.flashView=function(flash_url){ var html=''; html+='<div id="obj_flash_div">'; ...
- mysql修改字段的语句写法
http://www.111cn.net/database/mysql/50678.htm 下面为您介绍的sql语句都是mysql修改字段操作中的一些常用语句,如果您是一个刚刚接触mysql数据库的新 ...
- Xcode5和ios7下交叉编译ffmpeg
先申明本机环境 dev-mini:ffmpeg devone$ sw_vers ProductName: Mac OS X ProductVersion: BuildVersion: 1 ...
- ubuntu openstack spice
Openstack启用spice协议 #控制节点 #安装 ? 1 apt-get install nova-spiceproxy spice-html5 spice-vdagent #配置 nano ...
- Android Studio 模拟器启动问题——黑屏 死机 解决方法
今天用了下Android Studio,出现了一些问题,现在将启动过程中遇到的问题和解决方案列出来,方便大家参考. 安装过程不多说,网上一搜一大把. 那直接说问题吧: 1. 无法启动,报错:Faile ...
- 再次踩bug:遍历删除list(java.util.ConcurrentModificationException)
再次踩bug:遍历删除list(java.util.ConcurrentModificationException) 使用 List<Long> list = new ArrayList& ...
- A Tour of Go Map literals continued
If the top-level type is just a type name, you can omit it from the elements of the literal. package ...
- Objective-C Runtime 运行时之六:拾遗
super 在Objective-C中,如果我们需要在类的方法中调用父类的方法时,通常都会用到super,如下所示: @interface MyViewController: UIViewContro ...
- Cocos2d-x 重写draw方法绘制直线等图形时被遮挡覆盖问题的一种解决方案
最近在学习过程cocos2dx的过程中需要使用到绘制直线的功能,所以我就采用了引擎中 ccDrawLine 方法,然后重写 draw 方法,在该方法中绘制直线. 但是出现了一个问题,那就是绘制的图形被 ...