PrefixFree 给 CSS 自动添加浏览器前缀

Question

新版的 CSS 拥有多个新属性，而标准有没有统一，有的浏览器厂商为了吸引更多的开发者和用户，已经加入了最新的 CSS 属性支持，这其中包含了很多炫酷的功能，但是我们在使用的时候，不得不在属性前面添加这些浏览器的私有前缀，这样的代码量一下就大了不少。

为了解决这个问题，国外的牛人开发了了一个 -Prefix-free 的插件，能够自动给我们添加这些前缀，我们仅仅需要编写一次代码，无需在考虑是否兼容其他浏览器，而且如果后面浏览器支持这个属性了，我们只需要移除 -Prefix-free 即可，都不需要修改 CSS 代码。

简介

-prefix-free 是一个 JavaScript 工具库，你只要在网页引入这个插件即可，无需任何配置和函数调用，-prefix-free 在幕后工作，将当前浏览器的前缀添加到任何 CSS 代码中。

特征

• 在网页解析的过程中，自动给样式表 <link> 和 <style> 内的元素添加一个浏览器厂商 CSS3 前缀。
• 过程元素的一个风格属性和增加供应商前缀在需要的地方。
• 兼顾新的 <link> 或 <style> 元素，style 属性的变化而变化（ requires plugin ）
• 让 jQuery 的 css() ，方法获取和设置属性（ requires plugin ）

局限性

• 前缀代码在 @import-ed 文件中不支持
• 前缀跨来源链接的样式表是不支持的
• 无前缀的链接样式表不工作局部在 Chrome 和 Opera。
• 没有前缀价值观在内联样式，不支持 IE 和 Firefox 3.6 版本以下的浏览器。

如何使用

在页面中引入 prefixfree.js 建议把它放在样式表的后面。

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

然后你就可以在你的网页中、Style 文件里面尽情的编写你的 CSS 代码，无需担心浏览器兼容问题，另外 jQuery 的 .css() 方法也会自动补上浏览器前缀，让响应的浏览器支持该 CSS3 属性，使用非常之轻松惬意。

相关链接

• Github 地址： https://github.com/LeaVerou/prefixfree 有一些 API 函数可供使用
• 项目地址： https://www.wenjiangs.com/wp-content/uploads/2017/06/prefixfree/