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. Java Script after Douglas Crockford's Training (JSON father)

    有幸能参加大牛的培训,学到了很多东西,下面总结一下: 1.总的思想是每一门语言都有好有坏,我们要通过好的代码规范和其他一些方式去避免使用糟糠的那一部分.JS有很多缺点,但是也有很多优点,我们就用他的优 ...

  2. HDU-4675 GCD of Sequence 数学

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4675 题意:给一个大小为N的数列a[i],然后一个数M以及一个数K,要你求得一个数列b[i],其中b[ ...

  3. Java管道流PipedStream

    管道读取流和管道写入流可以像管道一样对接上,管道读取流就可以读取管道写入流写入的数据.需要注意的是需要加入多线程技术,因为单线程,先执行read,会发生死锁,因为read方法是阻塞式的,没有数据的re ...

  4. linux中ctime,mtime,atime的区别

    st_atime Time when file data was last accessed. Changed by  the            following   functions:    ...

  5. 第九章、文件与文件系统的压缩与打包 Linux 系统常见的压缩命令

    Linux 系统常见的压缩命令: 在Linux中,压缩文件的扩展名大多是:『*.tar, *.tar.gz, *.tgz, *.gz, *.Z, *.bz2』 Linux 支持的压缩命令非常多,且不同 ...

  6. 【3D研发笔记】之【数学相关】(一):坐标系

    现在开始学习3D基础相关的知识,本系列的数学相关笔记是基于阅读书籍<3D数学基础:图形与游戏开发>而来,实现代码使用AS3,项目地址是:https://github.com/hammerc ...

  7. Codeforces Round #200 (Div. 1) C. Read Time 二分

    C. Read Time Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/343/problem/C ...

  8. nginx 调优

    般来说nginx配置文件中对优化比较有作用的为以下几项:worker_processes 8;1 nginx进程数,建议按照cpu数目来指定,一般为它的倍数.worker_cpu_affinity 0 ...

  9. MyEclipse 10官网下载地址以及破解方法

    刚刚公布了MyEclipse 10,我如今用的还是6.5的版本号,6.5的版本号是我认为最好用的一个版本号. 我装上了,还没感受到有哪些好用,就是感觉体积庞大,和IBM 的WID一样,是个多面手,啥事 ...

  10. 升级ADT22.6后,Android模拟器无法创建

    这 两天,在社区里看到有小伙伴们反应,自己在Eclipse下无法创建Android模拟器的问题.起初,自己也没太在意,我一直使用的是 Genymotion模拟器.然后,问题不解决,总有那么一天会让自己 ...