Modernizr
读音:猫的奶侄儿
Modernizr是一套JavaScript 函式庫,用來偵測瀏覽器是否支持HTML5與CSS3等規格。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。
Modernizr會自動執行。不需要呼叫modernizr_init()之類的函式。執行時會建立一個名為Modernizr的元件,裡面包含了一組測試結果是否支援的布林值。舉例來說,如果瀏覽器支援Canvas API,Modernizr.canvas屬性的值就會是true;如果瀏覽器不支援Canvas API,Modernizr.canvas屬性的值就會是false:
if (Modernizr.canvas) { // 開始畫圖吧! } else { // 瀏覽器不支援原生的畫板。 }
Modernizr JavaScript範例:
<!DOCTYPE html> <html class="no-js"> <head> <title>Modernizr - Javascript Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> <script src="modernizr.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { if(Modernizr.websockets) { $("#result").html('你的瀏覽器支援Web Sockets'); } else { $("#result").html('你的瀏覽器不支援Web Sockets'); } }); </script> </head> <body> <p id="result"></p> </body> </html>
Modernizr CSS範例:
<!DOCTYPE html> <html class="no-js"> <head> <title>Modernizr - CSS Example</title> <style type="text/css" media="screen"> div.wsno, div.wsyes { display: none } .no-websockets div.wsno { display: block } .websockets div.wsyes { display: block } </style> <script src="modernizr.js" type="text/javascript"></script> </head> <body> <div class="wsno"> 你的瀏覽器不支援WebSockets。 </div> <div class="wsyes"> 你的瀏覽器支援WebSockets。 </div> </body> </html>