Prefixfree.js
2016年9月19日

Prefixfree.js,让私有属性 -webkit-,-moz-，见鬼去吧

作者 admin
摘要: 熟话说，不吃葡萄不知葡萄酸，没用过没有发言劝，昨天用Prefixfree.js开发了项目，今天跟大家分享一下使用心得！

众所周知，在我们写CSS的时候会遇到一些小问题比如以下这样

.boxshadow #c {
  	border:none;
  	-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  
}

还有这样

 #wrap{
         border: 5px solid red;
  	-webkit-border-radius: 12px;
  	-moz-border-radius: 12px;
  	border-radius: 12px;  
}

请大家注意这里面的-webkit-  -moz-，这些都是早年遗留下来的CSS私有兼容性写法(话说都是好久以前浏览器不支持的那一套东西),可能诸位前端er~ 早已经习惯了 这种”盖高楼” 话说这种盖高楼可不是什么好事儿，很XX的一个举动，不建议大家比这个东西，，，，

 

回到正题，今天给大家隆重介绍Prefixfree.js，没错就是他，通过它可以让你拜托盖高楼的困扰， 假如你现在正学习着强大的Css3，你知道Css3的很多数属性为实验属性，使用他们的时候得加上各式各样的浏览器前缀。可能你默默忍受了，因为还没到统 一的时间。有没想过给自己减下负，偶然间在网上看到一个js解决方案，正好可以解决这个问题。他会帮你自动识别浏览器，生成对应的Css3样式前缀，这样 你就可以直接当作标准属性来使用了。，是不是感觉很酷炫！！！

​

-webkit-transform: rotate(15deg);

-o-transform: rotate(15deg);

-moz-transform: rotate(15deg);

-ms-transform: rotate(15deg);

-webkit-border-radius: 50%;

-o-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

​这些东西，通过prefixfree.js检测后 你只需要写成这样

transform:rotate(15deg);

border-radius:50%;

没了 ，就这样，即简单 又粗暴，可能你现在已经忍不住想要引入了 ，

最新版本的下载地址在这里 http://www.bootcdn.cn/prefixfree/

 

这是最近开发的一个项目，刚刚好用到，希望给大家做一个参考，最后提几个小建议

 

事物总是有两面性，带来方便的同时，也引入了一些问题，

1.因为是基于js的，所以对于一些不支持或者禁用js的浏览器用户是很不友好的，很可能会打乱布局，

2.有时候会影响你使用Css的一些技巧（比如你只是想针对某个浏览器使用某个Css3属性，由于这个js的作用，所有浏览器都会应用该条属性，明显这不 是你想要的结果）

根据鑫大神说的还有几点限制：

  1. @import-ed之类文件不鸟
  2. 跨域链接样式不鸟
  3. 无前缀链接样式Chrome和Opera下部分不鸟
  4. 行内style无前缀值在IE和FireFox3.6以下不鸟，FireFox 3.6下的属性亦如此

总结一下：这个东西好是好，但是路还是要自己慢慢走，要一步一个脚印，在学习走路的时候就跑起来，以后的路就会更加难走

最后感谢鑫大神的开源文章，给了我灵感

标签javascript

1,401 条评论在 “Prefixfree.js,让私有属性 -webkit-,-moz-，见鬼去吧”

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注