色胚子部落 » library http://blog.colorbase.tw 訊息多變的時代裡，需要多學習多思考 Sun, 20 Jun 2010 10:06:49 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 檢測訪客瀏覽器對 HTML5 與 CSS3 的支援程度 http://blog.colorbase.tw/web-development/1099 http://blog.colorbase.tw/web-development/1099#comments Sun, 23 May 2010 02:26:00 +0000 阿育 http://blog.colorbase.tw/web-development/1099 由於各主流瀏覽器對於 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>標籤引入這個函式庫即可：

<script src="modernizr.min.js"></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 特性檢測，請參閱其使用手冊。

需注意的事情

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

相關連結與參考文章

]]> http://blog.colorbase.tw/web-development/1099/feed 6 兩款用於開發 iPhone Web 應用的 UI Framework http://blog.colorbase.tw/web-development/1010 http://blog.colorbase.tw/web-development/1010#comments Wed, 05 May 2010 10:42:04 +0000 阿育 http://blog.colorbase.tw/web-development/1010 最近在雜誌上看到了關於手機平台開發的專欄，裡面提到了手機平台Web上很難做出如同本機應用程式所能做出的使用者體驗(User experience)，雖然這是事實，但透過Framework的輔助多少可降低難度及開發成本。

iUI: iPhone User Interface Framework

image

為iPhone Web UI提供完整的解決方案，只需利用Javascript與標準的HTML就能開發出長得很像iPhone應用程式的Web應用。

網址：http://code.google.com/p/iui/

概觀：http://www.k10design.net/articles/iui/

範例：http://www.k10design.net/articles/iui/demo/

jQTouch

image

這是一個jQuery Plugin，如果熟悉jQuery的話是個不錯的選擇。

網址：http://www.jqtouch.com/

範例：http://www.jqtouch.com/preview/demos/main/

]]> http://blog.colorbase.tw/web-development/1010/feed 0 Framework 與 Library 的概念與不同 http://blog.colorbase.tw/programming/660 http://blog.colorbase.tw/programming/660#comments Thu, 25 Feb 2010 12:29:20 +0000 阿育 http://blog.colorbase.tw/?p=657 Framework 中文常譯為「框架」、「架構」而 Library 中文常譯為「庫」。

很多 Framework 因為結構上的需求而帶有大量的 Library 所以很容易讓人對於這兩者的概念混淆不清。

Framework 在字義上帶有結構的意義。

它具備引導的作用，並透過預先規劃好的結構或機制以協助改善開發上的問題，例如：結構性、彈性、可維護性等等；為了引導到正確的開發方向 Framrework 甚至有時會做出適度或大量的限制開發方向、方法，在限制上來說意義就吻合了中文字義「框架」；對於結構而言，Framrewok 某些地方沒有顯著的以限制的方式引導，而是提供了某些機制，例如：.Net Framework 中提供了事件機制；Framework 中可能會包含大量類別或函數，這其中有一部是所謂的Library，另一部分則是因應 Framework 結構或機制而存在，例如：事件經常也是一個類別。

而 Library 在字義上帶有收藏或集合的意義。

因此 Library 很單純的收集常用或通用程式庫，若內容物為函數則常被稱之為「函式庫」，若內容物為類別則常被稱之為「類別庫」。Library完全不理會程式結構如何開發，它很單純的只是為了完成某些較為獨立的事，也完全不會限制或引導開發邏輯或流程。

個人觀點，僅供參考

2010/02/26 補充、 修改

]]> http://blog.colorbase.tw/programming/660/feed 4