2012年5月29日 星期二

[HTML5]檢測 HTML5 的功能 - Modernizr

HTML5已經是現行網頁開發的趨勢,雖然各大主流的Browser都已經支援大部份的HTML5功能,但是各家Browser支援程度也有所差異,亦有鑒於還有相當部份的user仍在使用老舊的Browser(如IE 6,7等)。
網頁開發者在開發上,不管是要做到相容各個版本,還是只是簡單的告訴user“你的瀏覽器並不支援XXX功能”,都需要進行支援度的判斷

因為HTML5並不是一種獨立的功能或是語言,而是很多獨立功能的集合,所以我們需要判斷的,並不是這個Browser有沒有支援HTML5,而只是需要判斷他有沒有支援HTML5某個功能而已。

在這裡介紹一個javascript的plugin - Modernizr
Modernizr是一個可以測試HTML5 函式庫的opensource。可檢查許多針對HTML5和CSS3功能的支援。
請自行下載modernizr.min.js,引用到自己的網頁內。


當Modernizr執行時,會建立一個static object - Modernizr,透過直接呼叫Modernizr內的object來產生判斷是否有支援某個功能的boolean值。


Canvas

HTML5中透過<canvas>元素,可使用javascript進行繪圖,要知道user的瀏覽器有沒有支援<canvas>,我們可以直接使用:
if(Modernizr.canvas){
  //support!
  // draw something
}else{
  // not support
  alert("你的瀏覽器不支援canvas元素");
}


Canvas Text

有些Browser雖然支援<canvas>,但卻不支援在canvas中繪製文字,這是因為canvas text是在後期才加入的API,故有些早期有支援canvas的browser後來卻沒有引入。
檢查canvas text,我們可以使用:
if(Modernizr.canvastext){
  //support!
  // draw some text
}else{
  // not support
  alert("你的瀏覽器不支援canvas中繪製文字");
}

Video

在HTML5中,不用透過如window media player或flash等的plugin,只要使用<video>元素,指定其src,就可以直接播放影片,相當方便。要檢查有否支援<video>,可使用:



另外,雖然某些browser有支援影片<video>元素,但未必每種影片的格式都會支援,這時便需要判斷browser是否有支援某種codec,而這個檢查,Modernizr也有提供相對的功能




Local Storage

使用local storage,讓用戶端的資料能夠儲存於local端,不用受限於cookies,也可節省時間和頻寬去和server做溝通,使用HTML5 storage,用javascript就可以直接存取儲存起來的data了。檢查是否有支援Local Storage功能,可使用:



Web Workers

Web workers就是為browser提供可在background執行javascript的方法。若有寫過java的朋友,web workers就相等於 thread(執行緒)的作用。
有了background threads,在user操作UI的時候,就可以同時在背後執行一些運算,而又不會讓user的介面操作卡在某個運算的過程中,諸如複雜的數學運算,網路request,data access等,都會是一些耗時的動作,讓這些耗時的動作在background執行,便不會影響user在介面操作上的流暢度。
對於Web Workers的支援,可用:



Application Cache

若果有些網頁的操作不用隨時都使用到網路上最近的資料,像是網路小說,文件,影片等,基本上如果下載完之後,就可以在local site去閱讀或使用的話,可以考慮使用application cache來處理
當browser瀏覽有支援application cache的網站時,一旦browser下載了所有必要的檔案後,即使並未接上網路,我們也可以瀏覽這網站。在離線狀態所做的改變,變網路恢復時也可以被上傳到server裡,gmail離線版就是使用了這個功能。
檢查Application cache:





以下的一些功能比較簡單,我就直接介紹用法了

Geolocation 定位

Modernizr.geolocation


Input Type 表單輸入

HTML5中新增了十幾種表單中的類型,以方便進行某些情況的輸入
像是

  • search
  • number
  • range
  • color
  • tel
  • url
  • email
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local


Modernizr.inputtypes.search

Modernizr.inputtypes.number

Modernizr.inputtypes.range

...
...


Placeholder Text

當輸入欄是空白或不是被focus的時候,會預設在輸入欄中的文字,通常是用來當輸入的說明用的


Modernizr.input.placeholder



Auto Focus

使用autofocus,就可以在一個網頁載入後指定滑鼠遊標直接跳到哪個input輸入欄中,就像到Google首頁時,會自動幫你把遊標跳到search bar裡。

Modernizr.input.autofocus

P.S. 以上所有的用到的Modernizr中的方法都是回傳boolean值
有支援 - true,
沒支援 - false
還要注意的是,像是localstorage, applicationcache,等的複合字,必為小寫,與DOM的寫法不一樣。





以上資料由我自己閱讀 O'Reilly的<<HTML5 建置與執行>> 一書後整理出來,也有引用到當中一些句子說明。

沒有留言:

張貼留言

Powered By Blogger

Label Cloud

2009 (1) 不能連localhost (1) 內嵌音訊 (1) 求職 (1) 面試 (1) 音樂 (1) 動畫師 (1) 帳號管理 (1) 排程 (1) 畢展 (1) 創意市集 (1) 惡意程式 (1) 電腦動畫 (1) 權限管理 (1) adobe (1) android (4) animation (1) animator (1) apache (3) art (5) art taipei 2008 (1) audio (2) bbs (1) birthday (1) black and white (1) browser (2) career (2) certification (1) cgw (1) cinematography (1) code (3) Collie (1) color (2) command (16) competition (1) computer science (3) connection (1) cover (1) crafyJS (1) creative (1) CSS (1) DBN (2) design (7) developer (1) display (1) drawing (1) eclipse (3) embed (1) engine (1) EntityJS (1) exception (1) exhibition (1) flower (1) frame (1) freebsd (11) french (1) friends (3) function (1) game (1) google (2) graphic (3) html (2) HTML5 (1) https (1) illustrator (1) image processing (1) interactive storytelling (1) internet (3) interview (1) introduce (1) ip (1) japan (1) java (4) javascript (3) JIT (1) jmonkey (1) job (1) jquery (1) LAMP (1) LimeJS (1) linux (8) liquid galaxy (1) ListView (1) localhost (1) log (1) mail (1) marquee (1) midi (1) mime-type (1) mis (1) MIT (2) mo-cap (1) mobile (1) Modernizr (1) motion capture (1) movie (1) music (3) narrative (2) NCCU (3) news (1) note (10) originality (1) otaku (1) painting (4) performance (1) photography (2) photoshop (7) php (1) player modelling (1) poster (1) postfix (1) programming (5) QuarkJS (1) resource (1) schema (1) scroll (1) self aware (1) semantic (1) server (1) share (1) sketch (2) software (4) solve (2) Sonivox (1) speaking (1) ssl (1) SSLPeerUnverifiedException (1) streaming (1) Subversion (1) sunspider (1) SVN (3) svn server (1) system (1) taipei (1) test (1) tfam (1) tool (1) TortoiseSVN (1) tutor (1) ubuntu (3) update (1) uri (1) video (1) vim (1) w3c (1) wap wcss css css2.0 (1) web (8) WebGL (1) webkit (2) well-form (1) wiimote (1) wiiusej (1) workshop (1) xhtml (1) xml (2)