From bcbf03208db4e1ceff8387bbb1c86ad767b9f828 Mon Sep 17 00:00:00 2001 From: Ruan YiFeng Date: Sat, 2 Mar 2013 11:24:25 +0800 Subject: [PATCH] add library/modernizr --- .index.md.un~ | Bin 0 -> 2760 bytes index.md | 3 +- library/.modernizr.md.un~ | Bin 0 -> 43253 bytes library/modernizr.md | 123 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 .index.md.un~ create mode 100644 library/.modernizr.md.un~ create mode 100644 library/modernizr.md diff --git a/.index.md.un~ b/.index.md.un~ new file mode 100644 index 0000000000000000000000000000000000000000..ab7a2fda7bb36e2a357492a974122f8f5429f814 GIT binary patch literal 2760 zcmWH`%$*;a=aT=Ffr*33?RmC$BD+?|pXQwr4iYDq@A<16&8{x;`WL zjRJ8-0S!U`7#-Wd(ZRs*RRU-}3lM|isuYMpQ6ZL_pOTrDnVRCCXQg0dU}&ssV5Dnk zX4(jjJdg@dY{LL3B0-TS0umUFJWwdm5&$D_JBg8JjEFo?WPzd^20#(%2EXRlLBw=bI1AdwH2vMX}I0L(W导论 @@ -68,6 +68,7 @@ modifiedOn: 2013-02-16

函数库

- [Underscore.js](library/underscore.html) +- [Modernizr](library/modernizr.html)

开发工具

diff --git a/library/.modernizr.md.un~ b/library/.modernizr.md.un~ new file mode 100644 index 0000000000000000000000000000000000000000..cbb59bafd4e15cbf5ef27a54c7d25ede67f981ed GIT binary patch literal 43253 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 literal 0 HcmV?d00001 diff --git a/library/modernizr.md b/library/modernizr.md new file mode 100644 index 00000000..fba03f1f --- /dev/null +++ b/library/modernizr.md @@ -0,0 +1,123 @@ +--- +title: Modernizr +category: library +layout: page +date: 2013-03-02 +modifiedOn: 2013-03-02 +--- + +## 概述 + +随着HTML5和CSS3加入越来越多的模块，检查各种浏览器是否支持这些模块，成了一大难题。Modernizr就是用来解决这个问题的一个JavaScript库。 + +首先，从modernizr.com下载这个库。下载的时候，可以选择所需要的模块。然后，将它插入HTML页面的头部，放在head标签之中。 + +{% highlight html %} + + + + + + + + + + + +{% endhighlight %} + +## CSS的新增class + +使用Modernizr以后，首先会把html元素的class替换掉。以chrome浏览器为例，新增的class大概是下面的样子。 + +{% highlight html %} + + + +{% endhighlight %} + +IE 7则是这样： + +{% highlight html %} + + + +{% endhighlight %} + +然后，就可以针对不同的CSS class，指定不同的样式。 + +{% highlight css %} + +.button { + background: #000; + opacity: 0.75; +} + +.no-opacity .button { + background: #444; +} + +{% endhighlight %} + +## JavaScript侦测 + +除了提供新增的CSS class，Modernizr还提供JavaScript方法，用来侦测浏览器是否支持某个功能。 + +{% highlight javascript %} + +Modernizr.cssgradients; //True in Chrome, False in IE7 + +Modernizr.fontface; //True in Chrome, True in IE7 + +Modernizr.geolocation; //True in Chrome, False in IE7 + +if (Modernizr.canvas){ + // 支持canvas +} else { + // 不支持canvas +} + +if (Modernizr.touch){ + // 支持触摸屏 +} else { + // 不支持触摸屏 +} + +{% endhighlight %} + +## 加载器 + +Modernizr允许根据Javascript侦测的不同结果，加载不同的脚本文件。 + +{% highlight javascript %} + +Modernizr.load({ + test : Modernizr.localstorage, + yep : 'localStorage.js', + nope : 'alt-storageSystem.js' + complete : function () { enableStorgeSaveUI();} +}); + +{% endhighlight %} + +Modernizr.load方法用来加载脚本。它的属性如下： + +- test：用来测试浏览器是否支持某个属性。 +- yep：如果浏览器支持该属性，加载的脚本。 +- nope：如果浏览器不支持该属性，加载的脚本。 +- complete：加载完成后，运行的JavaScript代码。 + +可以指定在支持某个功能的情况，所要加载的JavaScript脚本和CSS样式。 + +{% highlight javascript %} + +Modernizr.load({ + test : Modernizr.touch, + yep : ['js/touch.js', 'css/touchStyles.css'] +}); + +{% endhighlight %} + +## 参考链接 + +- Chris Griffith, [Up and running with Modernizr](http://www.adobe.com/devnet/html5/articles/up-and-running-with-modernizr.html)