CSS便捷开发小工具汇总

虽然现代浏览器支持css3，但是一些过往的版本或是目前有些css3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方（能生效的方）插入插件:

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

 

然后打开页面可以看到html标签中加入（或其他后缀-o-,-ms-,-moz-）

但是其实部分我们要的想要的css3效果就是没有出现，怎么回事呢？那么我们应该在css里这样写才会有效的:

background-image:-*-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));

摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html

Normalize.css

Normalize 是一个css Reset工具， 相比传统的Reset， 它保留了有用的默认样式， 并对一些html 5 标签进行了一些一致化修正。 其功能特点：

1、保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。

2、修复了浏览器的bug

它修复了常见的桌面端与移动端浏览器的bug。这往往超出了Reset所能做到的范围。关于这一点，Normalize.css修复的问题包含了html5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3、不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。

4、是模块化的

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到的部分（比如表单的一般化）。

5、拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。

 

Grunt 

是基于Node.js的自动化任务运行工具， 在完备的插件系统帮助下可以执行各种自动化任务， 常用的包括CSS/js的自动合并压缩， LESS/SASS 的自动编译等。