CSS3常用工具

一、使用Prefix free处理CSS3跨浏览器兼容

使用prefixfree后在项目中写CSS时就不再需要写那么多冗长的带有属性前缀的CSS3定义了。

Prefix free相关用法：
1、下载prefixfree.js文件后放在项目中直接进行引用即可。
2、使用Github提供的远程链接进行引用。
示例：

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

二、应用Normalize统一不同浏览器下的样式

每种浏览器都有自身默认的一种样式，这样即使在CSS失效或是没有正常加载时，仍然可以保证一定的可读性。但是在开发中会造成一定的影响：如果某个样式没有被开发者自定义的样式覆盖，那么就会保持浏览器默认的样式，但是不同浏览器默认样式是不同的。这样会导致其相关的样式在不同的浏览器中会显示出不同的样式。

Normalize本质上也是一个Reset方案，只不过比起传统的Reset更注重通用的方案，重置掉该重置的样式，保留有用的默认样式，同时修复一些Bug。并且它还对HTML 5标签做了一定的约定。目前流行的Bootstrap 3、Foundation等框架都采用了Normalize进行HTML默认样式的Reset。

Normalize的用法和其他Reset没有任何区别，可以在它的官方网站http://necolas.github.io/normalize.css/进行下载，只要将下载好的文件在CSS文件之前引入即可。

三、应用Grunt进行CSS压缩

在绝大多数情况下，项目完成后需要将CSS文件进行合并和压缩后再部署到生产环境上，这样一方面可以减少网站的HTTP请求数量，提高加载速度；另一方面可以降低网站的流量开销，降低成本。

可以采用Grunt来进行JS/CSS自动化压缩、合并。Gruut的官网是http://gruntjs.com/。Grunt是基于Node.js的自动化任务运行工具，在完备的插件系统帮助下可以执行各种自动化任务，常用的包括CSS/JS的自动合并压缩、LESS/SASS的自动编译等。

实例：假设将项目的CSS文件全部放在项目目录下名为css的文件夹中，现在要求将它们压缩合并成一个名为main-min.css文件，放在css-min文件夹下。
1、在相关的机器下安装Node.js。
2、在项目目录下建立名为package.json的文件，用于配置需要安装的npm包，package.json的内容为：

{
    "name":"CSS_ZIP",
    "description": "css压缩器",
    "engines": {
        "node": ">=0.8.0"
    },
    "dependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-cssmin": "x"
    }
}

必须填写的是dependencies部分，需要用json格式填写npm包的名称和对应的版本号，半杯好可以用x来代替。这里用到了Grunt和Grunt的一个用于合并压缩CSS的插件grunt-contrib-cssmin。
3、完成后从命令进入项目目录下，执行命令

npm install

4、编写Grunt配置文件Gruntfile.js。在项目目录下新建文件Gruntfile.js作为Grunt的配置文件，内容如下：

module.exports = function(grunt) {
    grunt.initConfig ({
        cssmin: {
            options: {
                keepSpecialComments: 0
            },
            compress: {
                file: {
                    'css-min/main-min.css':[
                        "css/*.css"
                    ]
                }
            }
        }
    });
    //载入cssmin插件，用于合并和压缩CSS
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    //注册任务
    grunt.registerTask('default', ['cssmin']);
}

5、上一步完成后，在命令中执行：

Grunt

以后如果CSS有任何修改，只要执行Grunt命令就可以了。