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前缀的更多相关文章

  1. 第 20 章 CSS3 前缀和 rem

    学习要点: 1.CSS3 前缀 2.长度单位 rem 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 在发展中实行标准化的一些问题,重点探讨 CSS3 中新属性前缀问题和新的单位 rem. 一 ...

  2. 第七十七节,CSS3前缀和rem长度单位

    CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...

  3. 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)

    正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...

  4. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  5. 主流浏览器内核,以及CSS3前缀识别码

    现在国内常见的浏览器有:IE.Firefox.QQ浏览器.Safari.Opera.Google Chrome.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.UC浏览器.遨游浏览器.世界之窗浏览器 ...

  6. html5--6-24 css3前缀

    html5--6-24 css3前缀 学习要点 掌握css3前缀的使用 CSS3目前很多新增属性尚未被W3C列为标准,对这些暂时未被公布为标准的属性,各家浏览器会在属性前加上前缀词,也将其称之为浏览器 ...

  7. CSS3前缀

    我们经常会遇到写的有些css3属性会在不同的浏览器下呈现不兼容的情况,那是因为浏览器内核不同而导致的兼容性问题. 首先我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的 ...

  8. webpack打包css自动添加css3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  9. CSS3前缀自动补全方案和插件

    第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...

随机推荐

  1. win10+vs2013+Qt5.4 安装方法

    环境:win10 cn_visual_studio_ultimate_2013_x86_dvd_3009109 qt-opensource-windows-x86-msvc2013_64_opengl ...

  2. 50道经典的JAVA编程题(46-50)

    50道经典的JAVA编程题(46-50),最后五道题了,这是一个美妙的过程,编程真的能让我忘掉一切投入其中,感觉很棒.今天下午考完微机原理了,大三上学期就这样度过了,这学期算是解放了,可是感觉我还是没 ...

  3. HW5.28

    public class Solution { public static void main(String[] args) { System.out.printf("%s\t%s\n&qu ...

  4. 10行Java代码实现最近被使用(LRU)缓存

    在最近的面试中,我曾被多次问到,怎么实现一个最近最少使用(LRU)的缓存.缓存可以通过哈希表来实现,然而为这个缓存增加大小限制会变成另一个有意思的问题.现在我们看一下怎么实现. 最近最少使用缓存的回收 ...

  5. Java网络编程(UDP协议-聊天程序)

    接收端: package WebProgramingDemo; import java.net.DatagramPacket; import java.net.DatagramSocket; publ ...

  6. nyoj 975 关于521

    关于521 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 Acm队的流年对数学的研究不是很透彻,但是固执的他还是想一头扎进去. 浏览网页的流年忽然看到了网上有人用玫 ...

  7. UI进阶 数据请求

    一.HTTP和HTTPS协议 URL URL全称是Uniform Resource Locator(统一资源定位符)通过1个URL,能找到互联网上唯一的1个资源,也被称为网址,因特网上标准的资源网址 ...

  8. 10个Visual Studio原生开发调试技巧

    10个Visual Studio原生开发调试技巧(1) 2013-05-29 13:30 佚名 开源中国 我要评论(1) 字号:T | T 以下的列表中你可以看到写原生开发的调试技巧(接着以前的文章来 ...

  9. spring3.2.2+mybatis3.2.3+c3p0项目整合

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  10. jQuery生成二维条形码 jquery.qrcode.js

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...