浏览器私有属性前缀及去除方法

Posted 2020-09-23 dontes

什么是浏览器私有属性前缀

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。

以下是几种常用前缀

• -webkit-
• -moz-
• -ms-
• -o-
• -khtml-（现在基本都没有用了，被-webkit-取代）

举例来说，一个CSS3圆角的代码是：

-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;

CSS3前缀+标准代码的顺序

既然CSS3代码中（暂时）需要写上这么多前缀，那么他们的顺序是如何的呢？

一篇文章中详细分析了代码顺序：ordering css3 properties

结论:是先写私有的CSS3属性，再写标准的CSS3属性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

去掉CSS3前缀

什么时候我们可以去掉一个属性的CSS3前缀呢？答案是，当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。

以border-radius为例：

-moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, ios 1-3.2, android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

FF4、Saf5以及Chrome都支持border-radius属性了，我们就没有必要写以上两条了，代码变成：

border-radius: 12px;

彻底甩掉css3前缀

你知道Css3的很多数属性为实验属性，使用他们的时候得加上各式各样的浏览器前缀。可能你默默忍受了，因为还没到统一的时间。有没想过给自己减下 负，偶然间在网上看到一个js解决方案，正好可以解决这个问题。他会帮你自动识别浏览器，生成对应的Css3样式前缀，这样你就可以直接当作标准属性来使 用了。

引用方式：<script src=”http://leaverou.github.com/prefixfree/prefixfree.min.js”></script>

该js项目地址为http://leaverou.github.com/prefixfree/。 事物总是有两面性，带来方便的同时，也引入了一些问题，因为是基于js的，所以对于一些不支持或者禁用js的浏览器用户是很不友好的，很可能会打乱布局， 而且有时候会影响你使用Css的一些技巧（比如你只是想针对某个浏览器使用某个Css3属性，由于这个js的作用，所有浏览器都会应用该条属性，明显这不 是你想要的结果）