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. NOIP2006 金明的预算方案

    1.             金明的预算方案 (budget.pas/c/cpp) [问题描述] 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈 ...

  2. 利用doxygen提高源代码阅读效率

    阅读开源项目的源代码是提高自己编程能力的好方法,而有一个好的源代码阅读工具无疑能够让你在阅读源代码时事半功倍.之前找过不少源代码阅读工具,像SourceInsight.sourcenav.scitoo ...

  3. 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇05:二段跳》

    5.二段跳 二段跳概述: 基本跑酷游戏的框架搭建完毕,开发者会根据开发的游戏特性,增设一些额外功能,使游戏具有可玩性性和画面感.下面我们以角色的二段跳为例,来了解在跑酷游戏中增设其它功能的流程.二段跳 ...

  4. linux set

    linux  set 命令 功能说明:设置shell. 语 法:set [+-abCdefhHklmnpPtuvx] 补充说明:用set 命令可以设置各种shell选项或者列 出shell变量.单个选 ...

  5. use tomcat to access the file cross the environment

    background: 项目中的一个小工具,是一个Cron Job ,每天去搜集下服务器Hadoop Job的运行状态,并生成一份报告发送给整个Team,生产报告的同时把相关的日志文件保存到固定的一台 ...

  6. 组建Windows家庭组

    这里,是必须得针对Windows 7.8.10而言,因为,Windows XP 和 Windows Vista系统没有家庭网络的功能.(比较过时的一些系统了) 1.Windows家庭组的简介 使用家庭 ...

  7. nyoj 6 喷水装置(一)

    喷水装置(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以 ...

  8. stm32 时钟配置——外部时钟倍频、内部时钟倍频 【worldsing笔记】

    stm32可选的时钟源 在STM32中,可以用内部时钟,也可以用外部时钟,在要求进度高的应用场合最好用外部晶体震荡器,内部时钟存在一定的精度误差. 准确的来说有4个时钟源可以选分别是HSI.LSI.H ...

  9. HDU 4628

    这是一个大水题啊... 因为比赛时不会算复杂度耽误半天. i从0到2^n枚举集合i的所有分割两半的情况的复杂度为O(3^n),可以想象这个过程相当于是给每个位标记0,1,2(0表示不选,1,2表示两个 ...

  10. support-v4不能查看源码

    在Android实际开发过程中往往会遇到使用v4,v7或v13兼容包中的一些类如ViewPager,Fargment等,但却无法关联源码 具体步骤: 1 右击Android项目中libs文件夹下的an ...