HTML5 與 CSS3 準備好了嗎？

阿育 — Sun, 16 May 2010 04:20:35 +0000

HTML5 與 CSS3 不斷出現各種令人驚艷的應用，引起了業界的高度關注，它把許多原本屬於 Flash 的特殊應用搬到了 Web 標準中，而標準化的好處在哪我想不需要我多說了，但 HTML5 與 CSS3 真的準備好了嗎？

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

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

HTML5 與 CSS3 現在最需要什麼？

良好的集成式開發環境

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

廣泛的普及

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

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

網頁使用特殊字型的解決方案

阿育 — Tue, 15 Dec 2009 01:30:35 +0000

字型的兼容對於網頁設計而言是一個很頭痛的問題，如果在網頁中使用特殊字型，而訪客的電腦中沒有安裝這個字型，將會因為無法正確顯示字型而導致網頁的設計走味。因此一般在設計網頁的時候只能選擇通用的字型，如：Verdana, Geneva, sans-serif,Georgia這些芭樂到不行的字型，結果是可能會讓外觀大打折扣。

很久以前若要設計有字型樣式的文字，會用圖片來替代文字，但自從SEO觀念盛行之後，這個方法便不那麼恰當了，因為縱然使用alt或title屬性來加強描述也不是很被搜尋引擎建議的方法。

因為終極目標是除了外觀要美也要符合SEO的原則，所以目前最佳的解決之道便是「以純文字設計」，並於顯示時「替換為圖片、Flash或其他方式」。

為了解決這個困擾，曾經出現過很多不同的解決方案，在此介紹幾種已知的方法，每個方法各有利弊，實際應用時可以依照情況斟酌著使用。

1.CSS技巧 – Image Replacement

利用CSS耍點花招將文字隱藏，並以background屬性顯示圖片，來達到替換文字為「具有字體樣式的文字型圖片」效果，要將文字隱藏方法有很多，其中一個較簡便的方法就是利用text-indent將文字「縮」到看不見的地方。

#title{
	background: url(text.gif) no-repeat left top;
	width: 150px;
	height: 40px;
}

#title span{
	text-indent: -9999px;
}


	
文字

缺點：

如果想替換的地方很多的話，只能慢慢做到天荒地老、海枯石爛….。
只能於設計階段手工製作，如果是動態產生的內容則無法使用這個方法。

優點：

不論是Client端或Server端都不需消耗額外的效能與資源（因為在設計階段，已經用設計人員的腦力與耐性抵消掉了…）

2. sIFR – Scalable Inman Flash Replacement

Flash所產生的SWF播放檔可以內嵌字體，sIFR就是利用這個特性，動態的以Javascript將文字用SWF元素替代，來達到呈現特殊字型的效果。

範例：

http://dev.novemberborn.net/sifr3/svn/test/distribution/demo/

相關網址：

官方網站：http://wiki.novemberborn.net/sifr/

sIFR3：http://novemberborn.net/sifr3

缺點：

內嵌中文字型將造成SWF非常肥大。

優點：

輕鬆簡單，Server端無需耗費額外硬體資源，Client端耗用資源幾乎可以忽略不計。

3. jQuery Flash Plugin – sIFR

sIFR功能是這個jQuery Plugin的其中一個功能，一樣也是利用SWF播放檔可以內嵌字體的特性來達成替代文字的效果。

http://jquery.lukelutman.com/plugins/flash/example-text-replacement.html

範例：

http://jquery.lukelutman.com/plugins/flash/example-text-replacement.html

優缺點同sIFR。

4. cufon

這是相當有趣的一項技術，它提供一個產生器(PHP寫的)，能將字型檔案TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB)，轉換為一個Javascript格式的字型檔(或者可以說它是一個javascript的字型定義檔)，再即時的利用javascript透過canvas 與 VML，動態於網頁中繪出字體，並取代對應的網頁元素。

相關網址：

http://cufon.shoqolate.com/generate/

http://wiki.github.com/sorccu/cufon

範例：

http://www.acidsmile.co.uk/

優點：