檢測訪客瀏覽器對 HTML5 與 CSS3 的支援程度

Posted in 五月 23rd, 2010 by 阿育 | Filed under Web開發 | Comments (6)

由於各主流瀏覽器對於 HTML5 與 CSS3 中支援的程度不一，如果我們想要搶先嘗試使用它們的的新功能，卻又想要在各種瀏覽器中保持一定的可用性，那麼勢必要在 Javascript 中撰寫相關的判斷程式碼來進行判斷瀏覽器是否支援新特性，如果訪客的瀏覽器支援，則使用新功能，而反之則執行替代的程式碼或者提示使用者所使用的瀏覽器將會有部分進階功能無法使用。

關於目前各主流瀏覽器的支援情況可參考之前的文章 HTML5 與 CSS3 準備好了嗎？

自行撰寫 Javascript 進行 HTML5 與 CSS3 的檢測

如果我們使用到的 HTML5 與 CSS3 新特性並不多，則可以自行撰寫相關的檢測碼來進行判斷，至於該如何檢測，則可參考：
The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything

文章中除了羅列一大堆 HTML5 等檢測的片段程式碼，也提到了一個很好用的函式庫 Modernizer。

Modernizr

modernizr

Modernizr 是一個非常小巧的函式庫 (大約 8 KB，gzip壓縮後大約3.9 KB)，它用於檢測瀏覽器對於 HTML5 與 CSS3 支援程度，其首頁也提供了一份即時的檢測表，當使用不同的瀏覽器進入該網站時，將可看到不同的檢測結果，這個檢測表其實也可以當做一種瀏覽器支援參考，當安裝了新版本的瀏覽器時只要進入這個網站就可以即時知道瀏覽器是否有增加了什麼 HTML5 或 CSS3 的新功能。

先讓 IE 支援 HTML5 的新標籤

由於 IE9 之後才認得 HTML5 的新標籤，因此若要讓舊版本的IE也認得 HTML5的新標籤，則可以使用html5shiv來讓 IE 支援 HTML5 的新標籤，使用方式為加入以下的語法於<head>之間。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

使用 Modernizr

Modernizr 的使用方式很簡單，只需於<head>之間使用<script>標籤引入這個函式庫即可：

接著我們就可以在 Javascript 或 CSS 中做相對應的判斷及處理。

在 Modernizr 中使用 Javascript 判斷

Modernizr 載入後，即可使用 Modernizr.特性名稱的方式來判斷瀏覽器的支援，例如以下為判斷瀏覽器是否支援 canvas。

if (Modernizr.canvas) { //判斷瀏覽器是否支援 canvas
	alert("支援");
}else{
	alert("不支援");
}

在 Modernizr 中使用 CSS 判斷

Modernizr 使用了一個非常聰明的方法來達成 CSS 判斷的功能，它在載入完成後將會自動檢測瀏覽器的支援情況並將其寫入 <html> 標籤的 class 屬性，其類別名稱的格式為：

支援：特性名稱

不支援：no-特性名稱

例如當瀏覽器支援支援 canvastext 時，<html>標籤的 class 屬性中將會有一個 canvastext 值。

相反的當瀏覽器不支援 canvastext 時，<html>標籤的 class 屬性中將會有一個 no-canvastext值。

如此一來我們就可以輕易的使用 CSS Selector 來做出相對應的判斷，例如，在 HTML 中：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Modernizr Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src="modernizr.min.js"></script>
</head>
<body>
	<div id="canvasContainer">
		 <canvas id="c"></canvas>
		 <p class="supported">瀏覽器支援 canvastext</p>
		 <p class="noSupported">瀏覽器不支援 canvastext！</p>
	</div>
</body>
</html>

在 style.css 中，透過以下的 CSS，在支援 canvastext 中將顯示「瀏覽器支援 canvastext」，反之則顯示「瀏覽器不支援 canvastext！」。

#canvasContainer p{
	display: none;
}

.canvastext #canvasContainer .supported {
	display: block;
}

.no-canvastext #canvasContainer .noSupported {
   display: block;
}

點我觀看 Modernizr CSS Selector 檢測範例

同理，若要利用 CSS 判斷瀏覽器是否支援 video 則可使用「.video / .no-video」兩個 CSS 類別。

更多 Modernizr 支援的 HTML5 與 CSS3 特性檢測，請參閱其使用手冊。

需注意的事情

Modernizr 只能提供檢測而不能替瀏覽器增加新功能以達成兼容。
若要兼容 video 可使用 video4all來達成，更多詳情可參考開始HTML5 – Video。
若要讓 IE 6, 7, 8 支援 CSS3 可使用CSS3 support for IE來達成。

你可能會感興趣