色胚子部落 » Web開發 http://blog.colorbase.tw 訊息多變的時代裡，需要多學習多思考 Mon, 15 Aug 2011 03:29:59 +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 HTML5 與 CSS3 準備好了嗎？ http://blog.colorbase.tw/web-development/1070 http://blog.colorbase.tw/web-development/1070#comments Sun, 16 May 2010 04:20:35 +0000 阿育 http://blog.colorbase.tw/web-development/1070 HTML5 與 CSS3 不斷出現各種令人驚艷的應用，引起了業界的高度關注，它把許多原本屬於 Flash 的特殊應用搬到了 Web 標準中，而標準化的好處在哪我想不需要我多說了，但 HTML5 與 CSS3 真的準備好了嗎？

從 HTML & CSS3 Readiness 這份圖表可以很容易看出一些關鍵，它把 HTML5 與 CSS3 從 2008 年到 2010 年各個主流瀏覽器的支援情形以扇形區色塊圖的方式呈現，每個瀏覽器及渲染引擎都有自己的色系。

  1. 目前支援度最高的新特性為 Drag and Drop / @font-face / contenteditable 。
  2. 目前支援度最佳的瀏覽器為 Chrome 與 Safari。
  3. 目前支援度最差的瀏覽器為 IE 系列。

html5_css3_readiness

HTML & CSS3 Reandiness

HTML5 與  CSS3 現在最需要什麼？

良好的集成式開發環境

我想對於開發人員而言，最需要的還是工具，因為純手工編製複雜的 Web 應用可真是一件吃力不討好的工作，但我相信只要有市場便不怕沒工具，之前 Adobe CTO Kevin Lynch 也已經說要為HTML5開發工具了，我也相信在公開的標準規範之下將會有更多軟體開發商投入精力創造出更好用的產品。

廣泛的普及

既然工具的問題排除了，那麼剩下的便是普及性的問題了，但很顯然的它們仍然還沒完全準備好，在 When can I use 裡面列出了目前HTML5個主流瀏覽器的支援情況，雖然這是一個支援度比較表，但命名更像是在抱怨。

幾種 HTML5 與 CSS3 支援度參考資料

]]> http://blog.colorbase.tw/web-development/1070/feed 0 與你的夥伴線上討論設計或概念 – Cacoo http://blog.colorbase.tw/web-development/881 http://blog.colorbase.tw/web-development/881#comments Sun, 18 Apr 2010 13:09:17 +0000 阿育 http://blog.colorbase.tw/web-development/881 Cacoo是一款很像Visio的免費線上工具，它可以用來繪製網站地圖、wireframe、UML、流程圖、網路圖等類型的圖表，其最大的特的點是它可以即時多人同時編輯。

以往當與夥伴處於異地而無法面對面直接溝通時，我們可能會用即時通訊軟體，你在那端、我在這端各自描述著自己的想法，遇到需要用圖形表示時只能透過即時通訊軟體或E-mail把編輯好的圖檔寄過去或用MSN之類的即時通訊軟體傳過去，這樣的過程不僅耗費不必要的時間，溝通起來也挺憋腳的，甚至還可能出現雞同鴨講的窘境。

現在透過Cacoo同時且即時的功能，我們將可以與夥伴的盡情的溝通，讓網路的溝通障礙減到最低，如果再搭配語音通訊的話，相信就更完美了。

image

Cacoo主要功能與特色

  • 多人線上「即時」且「同時」編輯圖表。
  • 可繪製網站地圖、wireframe、UML、流程圖及網路圖等類型的圖表。
  • 內建簡易螢幕截圖工具，可直接擷取螢幕畫面並加入圖表中。
  • 線上工具，走到哪用到哪。
  • 提供多種圖形素材可直接套用，也可上傳自己的圖片。
  • 內建即時通訊功能，就算沒裝MSN也能用溝通。

Screenshot

可繪製多種圖形，例如下圖的網路架構圖。

image

可繪製wireframe與夥伴溝同版面設計。

image

可邀請夥伴編輯同一份文件，當夥伴已經在編輯時，於文件列表中將會以「Editing」提示。

image

內建的即時通訊功能，沒有安裝MSN或Skype也能線上即時溝通(文字溝通)。

image

當對方在編輯內容時，可「即時」看到對方正在編輯的動作。

image

Cacoo官方的介紹影片

Cacoo – Real-time Collaborative Diagramming & Design from Nulab Inc. on Vimeo.

相關連結

Cacoo 線上即時協作繪圖工具

]]> http://blog.colorbase.tw/web-development/881/feed 1 XRefresh – 網頁開發解放F5 http://blog.colorbase.tw/web-development/667 http://blog.colorbase.tw/web-development/667#comments Sat, 06 Mar 2010 12:27:46 +0000 阿育 http://blog.colorbase.tw/?p=659 在寫網頁的時候通常我們經常需要在編輯器與瀏覽器切換，這種情況特別容易發生在寫CSS及Javascript時，就算是使用的是視覺化的編輯器，例如Dreamweaver，也難以避免來回切換瀏覽器的來檢視最正確的結果，而且不僅需要來回切換檢視甚至還得不斷按F5重新整理網頁，長久下來這是一件非常費力的工作，XRefresh 便是解決這種困擾的工具。

運作方式

它的運作方式為透過安裝一個常駐於系統列的監視器，監視我們所設定的目錄及檔案，當檔案發生變動的時候，它會將資訊傳達給安裝於瀏覽器中的插件進行自動重新整理網頁的動作，而目前 XRefresh 提供Firefox及IE的插件。

以下是官方提供的運作示意圖：

via http://xrefresh.binaryage.com/

在 Windwos 上使用 XRefresh

安裝完畢後啟動 Xrefresh 將會出現在系統列中：

接著按下Tryicon選單的Configuration，進行目錄監視設定：

以上圖的設定來說，我設定了監視D:\xrefresh_test\ 裡面的所有 Javascript的檔案

假設在那個目錄裡面有 index.html 裡面引入了 test.js，現在就可以使用Firefox 打開 index.html並於該分頁啟用Firebug，且將Xrefresh啟用：

現在只要我一更動test.js並儲存的話，那個分頁就會自動重新整理了，甚至如同官方所給的示意圖，裝上雙螢幕的話連切換都不必了，這樣是不是很方便、很有效率呢？

如果不想要重新整理整個頁面，還可以啟用「Use Soft Refresh for CSS」及「Use Soft Refresh for JS」讓XRefresh只重新載入CSS或JS而不是整個頁面重新載入。

至於IE的話概念上大同小異，有興趣的話可以觀看官方的介紹。

PS.XRefresh 支援 Windows 及 OSX。

相關連結
]]> http://blog.colorbase.tw/web-development/667/feed 1