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. C语言不支持默认参数,不过可以用宏来模拟

    C语言不支持默认参数,不过可以用宏来模拟: //--------------------------------------------------------------------------- ...

  2. Struts2.x jsp页面无法使用jsp:forward跳转到action

    问题:使用<jsp:forward page="test"></jsp:forward>语句无法跳转到test所对应的action. 解决办法:在web.x ...

  3. HW6.8

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  4. [读书笔记]了不起的node.js(二)

    这周做项目做得比较散(应该说一直都是这样),总结就依据不同情境双开吧-这篇记录的是关于node的学习总结,而下一篇是做项目学到的web前端的知识. 1.HTTP篇 node的HTTP模块在第一篇时接触 ...

  5. Delphi监视进程并结束进程

    监视进程并结束进程在很多地方都用到这里借前人的经验写了个小例子: 以QQ的进程qq.exe为例 关键代码如下: function CheckTask(ExeFileName: string): Boo ...

  6. 多线程基础及实例(java)

    前言: 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以线程基本上是轻量级的进程 ...

  7. NSTimer运行机制和线程问题

    A.首先要理解NSTimer运行机制和Runloop之间的关系: 1.IOS的Run Loops机制 Run Loops是线程的基础部份,任何线程,包括主结程,都包含了一个run loop对象,Coc ...

  8. [MODx] 8. Snippet get data, chunk display

    Simple Example: Lets process this chunk and output its value. We have this Chunk, called "Welco ...

  9. UIAlertController 简单修改title以及按钮的字体颜色

    苦逼的开发者,最终败给了一个任性的UI,系统原生UIAlertController的按纽颜色必须改.于是,开始了不归路.之前的版本是自己用view写的一个仿系统UIActionSheet,动画感觉都挺 ...

  10. PHP 环境塔建与数据类型转换

    手动塔建PHP开发环境 安装php c:\apps\php 安装apache c:\apps\apache 1.配制apache 配制c:\apps\apache\conf\httpd.conf Do ...