理解厂商前缀 -webkit- / -moz- / -ms- / -o-

         CSS3规范如果想要达到W3C的推荐标准状态还需要不断改进。浏览器则通常在W3C开发标准的过程中就会体现这些特性。这样,标准在最终敲定之前就能知道哪些地方还能进一步改进。

         在包含某个特性的的初始阶段,浏览器通常会使用厂商前缀实现这类特征,这样每个浏览器都可以引入自己的CSS属性支持方式,从而可以获取反馈,一旦标准发生改变也不会造成影响,例如

使用border-radius属性示例

div{-webkit-border-radius:10px;
      border-radius:10px;}

该属性需要使用-webkit前缀支持旧版本的Android、IOS和Safari浏览器。

这些浏览器的一些新版本已经不需要使用带有前缀的属性了,只需要使用无前缀的属性就行了(简单写成border-radius:10px)。

样式规则中的最后一条声明优先级别最高,这也是将无前缀版本放在最后的原因。

不过,这种方式会造成一定程度的混乱,因此很多浏览器都逐渐取消了厂商前缀的使用。

但是还有一些地方还是需要用到它的,比如说需要兼容一些旧的浏览器的时候。

每个主流浏览器都有自身的前缀,这些前缀放在css属性名的前面

  • -webkit-     (Webkit / Safari / 旧版本的Chrome)
  • -moz-          (Firefox浏览器)
  • -ms-          (Internet Explorer 浏览器)
  • -o-             (Opera浏览器)

多数情况下一般只需要 -webkit- 前缀,但也并非所有的CSS属性都需要为浏览器准备的前缀。

原文地址:https://www.cnblogs.com/nyw1983/p/11345873.html