下載 Modernizr 請到其首頁 :
# Modernizr 首頁
目前是 2.7.0 版, 請按中央 "Development" 按鈕進入下載頁面 :
Modernizr 函式庫可以客製化 (可以下載只包含想要測試之功能的程式碼), 預設除了右下角 Extra 項下的 Media Queries 外, 其他檢測功能都已經預設選取, 建議把 Media Queries 也選取, 而且勾選左下角的 "Don't Minify Source", 這樣我們就可以研究原始碼是如何檢測 HTML5 功能的, 全功能開發版只有 29KB 而已 :
然後按 "Generate!" 鈕, 下方就會顯示函式庫原始碼, 再按 "Download" 即可下載此客製化函式庫, 其檔名可能像是 modernizr.custom.28923.js 這樣, 為了簡短, 可改為 modernizr.js 就好, 然後複製到專案目錄下, 然後在網頁中匯入 modernizr.js. 我把它放在測試目錄下 :
# modernizr.js 2.7.0 版 (按滑鼠右鍵另存新檔)
下面就來看看其用法, 測試用範本如下 :
<!DOCTYPE html>
<meta charset=utf-8>
<head>
<title>HTML5 Test</title>
<script src="modernizr.js"></script>
</head>
<body>
<script>
</script>
</body>
此函式庫匯入後會建立一個 Javascript 物件 Modernizr, 它會將 HTML5 與 CSS3 支援情形記錄在所提供的相關屬性上, 例如要測試是否支援 canvas 功能. 其語法為 :
if (Modernizr.canvas) {
//支援 canvas
}
else {
//不支援 canvas
}
要特別注意, Modernizr 所用的的屬性名稱跟用 Javascript 去存取 DOM 物件之屬性有一些不同, Modernizr 省略符號, 全部使用小寫字母, 例如新表單輸入元件 datetime-local 在 Modernizr 要改為 datetimelocal, 不需 dash.
在下列範例一中, 我用三元運算子 ? : 來做判斷 :
Modernizr.canvas? document.write("O"): document.write("X");
測試範例 1 : http://tony1966.16mb.com/html5test/modernizr.htm [看原始碼]
在 Chrome 31.0 上測試, 其未支援項目只有兩項, Web SQL 與 IndexedDB 都有支援, 僅新表單輸入元件 datetime, datetimelocal 未支援, 堪稱模範生 :
datetime, datetimelocal
於 Opera 18.0 測試, 未支援項目僅六項 :
h264, mp3, m4a, datetime, datetimelocal,
在 Firefox 25.0.1 上測試, 其未支援項目有十四項 :
h264, mp3, m4a, websqldatabase, datetime, date, month, week, time, datetimelocal, number, color, flexbox, cssreflections
總之, Firefox 在新表單輸入元件方面支援度還不是很好, 其他還不錯 (不支援 Web SQL).
在 Windows 系統的 Safari 5.1.7 上測試, 其未支援項目有十四項 :
ogg, webm, indexeddb, webgl, datetime, date, month, week, time, datetimelocal, color, autocomplete, list, flexbox
在 iPad2 之 iOS 5.1.7 的 Safari 測試, 未支援項目比 Windows 版 Safari 較少僅八項 (改天升級 iOS7 後再來測試一遍) :
ogg, webm, indexeddb, datetimelocal, color, autocomplete, list, flexbox
Safari 跟 Firefox 差不多, 也是新表單輸入元件方面支援度還不全, Safari 支援 Web SQL, 未支援 IndexedDB.
至於 IE8, 那就慘不忍睹, 與其列出其未支援項目, 不如列出其支援項目較快 :
draganddrop, localstorage, sessionstorage, postmessage, fontface
而 IE 9 聲稱要支援 HTML5, 但也只是進步一些而已, 同樣列出其支援項目較快 :
canvas, canstext, video, h264, mp3, m4a, draganddrop, localstorage, sessionstorage, geolocation, postmessage, svg, inlinsvg, svgclippaths, hashchange, fontface, backgrounsize, borderradius, boxshadow, hsla, multiplebgs, opacity, rgba, generatedcontent, csstransforms
微軟會軟趴趴, 不是沒有原因的.
好消息是 IE 11.0 有進步, 我在 Win8.1 上的 IE 11 測試結果, 其未支援項目有 13 項 :
ogg, webm, wav, websqldatabase, smil, datetime, date, month, week, time, datetimelocal, color, cssreflections
看起來跟 Firefox 差不多了, 主要也是新表單輸入元件尚未完全支援, 但 IE 11 未支援 wav 有點奇怪.
而我的 HTC Desire S 上的 Android 2.3.6 瀏覽器未支援項目 23 項 :
ogg, webm, wav, webworkers, indexeddb, websockets, svg, inlinesvg, svgclippaths, smil, webgl, url, datetime, date, month, week, time, datetimelocal, color, autocomplete, list, flexbox, csstransforms3d
在升版為 Android 4.0.3 版的三星 P7510 瀏覽器測試結果明顯比 2.3.6 好很多, 未支援項目有 9 項 :
ogg, wav, webworkers, webgl, datetimelocal, color, list, flexbox, generatedcontent
參考資料 :
# Modernizer Documentation
# Dive Into HTML5 (電子書)
# HTML5 Modernizr Tutorial
# Modernizr Features Detection Helper
沒有留言 :
張貼留言