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. List 接口以及实现类和相关类源码分析

    List 接口以及实现类和相关类源码分析 List接口分析 接口描述 用户可以对列表进行随机的读取(get),插入(add),删除(remove),修改(set),也可批量增加(addAll),删除( ...

  2. mysql日期格式说明符

  3. mac linux netstat -n

    一直都不明白为什么mac就是不现实8080端口,现在明白了 USERtekiiMac-3:~ user$ netstat -an | grep tcp46 tcp46 0 0 *.8009 *.* L ...

  4. SaltStack管理从这里开始

    Modules 1:查看所有module列表: salt 'jcfx-4' sys.list_modules jcfx-4: - acl - aliases - alternatives - apac ...

  5. C/C++流程图生成器 C转流程图【worldsing笔记】

    此版本仅供学习,请大家支持正版软件!! AutoFlowChart v3.1软件下载: http://url.cn/OUK17C 支持导出:word.visio.图片格式.   例如:main.c # ...

  6. 谷歌下设置滚动条的css样式

    .oLi-lists-scroll::-webkit-scrollbar { width:5px;  padding:1px; background:url(../images/repeat-bar. ...

  7. 剑指OFFER之栈的压入、弹出序列(九度OJ1366)

    题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈 ...

  8. git 回退和删除操作

    今天不小心把分支的commit提交到master上了.衰 主要通过下面几个命令解决了,很简单记录一下. git reset –hard  回退到某一个版本git push origin :xxxx  ...

  9. com.opensymphony.xwork2.ActionSupport类源码

    version : xwork-2.1.0 /* * Copyright (c) 2002-2006 by OpenSymphony * All rights reserved. */ package ...

  10. 46 关于Linux的I/O重定向

    I/O重定向是一个过程,这个过程捕捉一个文件.或命令.或程序.或脚本.甚至代码块(code block)的输出,然后把捕捉到的输出,作为输入发送给另外一个文件.或命令.或程序.或脚本. 1.I/O重定 ...