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默认会勾选全部)

从官网中选择项目中需要的特性进行下载。



命令行直接获取

下载command line config，然后cmd 切换到下载目录，然后使用如下命令获取，即可。

modernizr -c modernizr-config.json

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'
}
]);