CSS3 - 样式的开发商前缀介绍（及使用js插件自动添加前缀）

2015-10-23 发布：hangge 阅读：717

1，查看各CSS3特性的支持情况
在http://caniuse.com上，我们可以查询CSS3里各个特性在不同浏览器下的支持情况。

2，不同浏览器的开发商前缀（vendor prefix）
由于很多CSS3特性还在修订，没最终定案。所以浏览器开发商为这些还在开发中的CSS属性和功能加上特定浏览器实现的前缀

-moz- ：Firefox
-webkit- ：Chrome，Safari和最新版的Opera（它们使用引擎都是WebKit）
-ms- ：Internet Expolrer
-o- ：旧版的Opera（15之前）

3，开发商前缀的使用

以radial-gradient()这个渐变特性为例，由于不是每个浏览器都支持，这里就使用了开发商前缀。
（为保证不支持这一特性的浏览器显示差异不会太大，同时设置了默认背景色）

<style>
	.box1 {
		background: green;
		background-image: -moz-radial-gradient(circle, yellow, green);
		background-image: -webkit-radial-gradient(circle, yellow, green);
		background-image: -o-radial-gradient(circle, yellow, green);
		background-image: -ms-radial-gradient(circle, yellow, green);
	}
</style>

<div class="box1" style="width:200px;height:100px"></div>

4，使用插件自动添加开发商前缀
-prefix-free是一个小巧的js脚本插件。使用它我们只需要对CCS3属性创建普通的样式。当用户浏览页面的时候，-prefix-free会检测当前浏览器并自动添加浏览器所需要的开发商前缀。

<script src="prefixfree.min.js"></script>

<style>
	.box1 {
		background: green;
		background-image: radial-gradient(circle, yellow, green);
	}
</style>

<div class="box1" style="width:200px;height:100px"></div>