modernizr css3、h5兼容方案

• .modernizr原理，就是判断是否支持某个css3、html5特性，支持做支持的事。不支持，做不支持的。

• 如何获取modernizr
  ps：官网对modernizr进行了拆分，支持开发根据项目需要的特性，进行配置modernizr，这样可以加速modernizr加载速度。

  1.官网：https://modernizr.com/download
  2.安装modernizr命令行工具：
  npm install -g modernizr（全局安装）
  推荐在项目路径下安装，当然利用grunt开发的话，完全可以配置到package.json中，利用npm install 进行局部安装。
  如果都安装完成了，仅仅需要安装grunt-modernizr，完全可以利用npm install grunt-modernizr –save-only=dev 进行安装。
  package.json举例：

{
  "name": "hellworld",
  "version": "1.0.0",
  "description": "hello world",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "author",
  "license": "ISC",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-cssmin":"*",
    "grunt-contrib-sass":"*",
    "grunt-contrib-watch":"*",
    "grunt-contrib-clean":"*",
    "grunt-contrib-concat":"*",
    "grunt-cssc":"*",
    "grunt-htmlhint":"*",
    "grunt-modernizr":"*",
    "matchdep":"*"
  }
}

3.获取modernizr.js(developement build默认会勾选全部)

1. 从官网中选择项目中需要的特性进行下载。
   
2. 命令行直接获取
   下载command line config，然后cmd 切换到下载目录，然后使用如下命令获取，即可。

modernizr -c modernizr-config.json

1. grunt中获取
   本人项目中使用grunt。把modernizr的grunt-config.json中tests copy过来，故Gruntfile.js配置如下：

module.exports = function(grunt){
    //// Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: {//删除文件
            build: {
                src: ["webapp/hello/js/dev/all.js"]
            }
        },
        concat: {//合并文件
            options: {
                separator: ';',
                stripBanners: false,
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            dist: {
                src: ['webapp/hello/js/**/*.js'],
                dest: 'webapp/hello/js/dev/all.js',
            },
        },
        modernizr: {//检测css3\h5支持情况
            dist: {
                "parseFiles": true,
                "customTests": [],
                "devFile": "webapp/hello/js/modernizr-dev.js",
                "dest": "webapp/hello/js/modernizr-output.js",
                "tests": [
                    "json",
                    "svg",
                    "cssanimations",
                    "backgroundblendmode",
                    "bgpositionshorthand",
                    [
                        "bgrepeatspace",
                        "bgrepeatround"
                    ],
                    "bgsizecover",
                    "borderradius",
                    "boxsizing",
                    "csscalc",
                    "checked",
                    "csscolumns",
                    "display-runin",
                    "ellipsis",
                    "cssexunit",
                    "flexbox",
                    "flexboxtweener",
                    "fontface",
                    "opacity",
                    "supports",
                    "textshadow",
                    "csstransforms3d",
                    "csstransitions",
                    "localstorage",
                    "svgasimg",
                    "svgclippaths",
                    "svgfilters",
                    "svgforeignobject",
                    "inlinesvg",
                    "smil"
                ],
                "options": [
                    "setClasses"
                ],
                "uglify": true
            }
        },
        uglify: {//压缩文件
            options: {
                stripBanners: false,
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: ['webapp/hello/js/dev/all.js'],
                dest: 'webapp/hello/js/min/<%=pkg.name%>.min.js'
            }
        },

    });

    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks("grunt-modernizr");
    grunt.loadNpmTasks('grunt-contrib-uglify');


    grunt.registerTask('default', ['clean','concat','modernizr','uglify']);

}

• 如何使用modernizr
  我们引入了Modernizr.js类库后， 标签的class属性就会被相应的赋值，以显示浏览器是否支持某类CSS属性.
  比如在IE6下面，不支持boderradius特性，那么在 标签中就会出现 no-borderradius 类，我们可以做一些fallback的工作：

.no-borradius div{
    /*-- do some hacks here --*/
}

基于 YepNope.js ，Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript，这无疑对避免不必要的资源加载有极大的帮助。

你可以在这里( HTML5 Cross Browser Polyfills )找到几乎所有新特性的fallback解决方案。

Modernizr.load(
test: Modernizr.webgl,
yep : ‘three.js’,
nope: ‘jebgl.js’
);
当浏览器支持WebGL的时候，就引入 three.js 这个类库做一些3D效果。浏览器不支持WebGL的时候可以使用 jebgl.js 做一些fallback操作。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>
现在用Modernizr.load()可以这么写：

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);