HTML5前瞻與心得：技術與藝術的糾纏。

在長久的片面宣傳下，說起HTML5，大都直指Video標籤，好像HTML5=Video標籤一樣，但實際上隨著我越來越深的陷入HTML5，越來越深入的應用HTML5，就越來越強烈的感受到，它帶來的遠遠不止Video，真的是Web的未來。最重要的是，IE9跟上時代了，微軟跟上了。IE9率先實現的硬體加速確實具備相當的前瞻性，而IE9在HTML5的支援力度上步伐邁得很大，IE8到IE9雖然只是1個數字的分界，但卻是一個時代的分界，雖然IE9離釋出還有很長一段時間，但必須鼓掌，微軟很努力，在奮起直追。

CSS 3

【IE9 OK】 CSS3 selectors

IE9的全面支援是最大亮點。選擇，是一切的開始。雖然CSS2的選擇基本夠用，但讓選擇又有了更多更好的選擇，為什麼不呢？我做了一些有趣嘗試，很舒服。

【IE9 OK】 CSS3 Colors

無論RGBA還是HSLA，那個A，太重要了。字型色彩，背景色彩，邊框色彩……任何色彩應用中都能引入透明，這能夠讓讓整個設計顯得晶瑩而透徹，幫助極大。我對A簡直愛不釋手，已經逐漸拋棄#FFF的定義，換成rgba(255,255,255,1)，再配合transition……

【IE9 OK】 CSS3 Rounded corners

設計對圓角的渴望不用多說，雖說圓角不萬能，但無處不在又不搶眼的圓角設計所帶來的一種自然和柔和，會瞬間滅了IE678。想起教主的話：看過視網膜屏，你就再也回不去了。圓角就是這樣的，還記得那個叮噹貓嗎？

【IE9 NO】 CSS3 Text-shadow & CSS3 Box-shadow

人要凹凸有致，文字也一樣。但和圓角不同的是，文字陰影要適可而止，儘可能的少用、淡用。還有光暈，如果配合transition……盒模型的陰影是層次化設計的條件，在層窗越來越必要和豐富的今天，它在視覺上扮演的角色很重要，更別說內陰影的存在。

之所以把這兩個陰影放在一起，因為這是我在CSS3中除了圓角以外用得最多的兩個屬性。嗯，Color的A帶來了光，而Shadow就是影，光影光影，頁面的飽滿與質感就靠他倆了！可是，可是為什麼這麼重要的屬性，在我眼裡僅次於圓角，IE9卻至今一直未支援，丫給了光不給影，腦袋有包啊！

我不期待IE9釋出便能支援transform、transition、gradient還有很多高階屬性，因為一些東西比如動畫可以放棄，一些東西比如漸變可以找到代替，但是shadow我即不能放棄又找不到代替，用蹩腳的濾鏡麼？用死板的圖片麼？再說了，沒有shadow，圓角廢了一半。IE9 即將走進Beta版本了，我希望在Beta期間能夠給我們帶來那重要的影，否則，老子繼續略過！

【IE9 OK】 CSS3 Multiple backgrounds

多背景的意義不在於圖片上，因為我們通常會把小圖合併在一起。多背景的意義更多在於Gradient，多層次帶著A的漸變，能搞出華麗的背景。IE9不支援Gradient，不過我們有替代品。

【IE9 OK】 CSS3 Border images

圖片做邊框，很漂亮麼？從來沒過，也從來沒想到可用之處。

【IE9 OK】 CSS3 Box-sizing

沒有用過，主要是已經很習慣了width、height、margin、padding的配合，這不像之前的那些屬性，都屬於在現有習慣上的增彩，而這個是要改變現有習慣，不太容易，慢慢來。

【IE9 NO】 CSS3 Multiple column layout

同樣沒有用過，理由也同上，已經習慣了relative、absolute、float。

【IE9 NO】 CSS3 Gradient

相對於圓角與陰影的難替代，漸變是最容易被替代的，圖片平鋪，當然僅限於水平或垂直。如果是斜線或圓形漸變，那就是災難了。Gradient的出現讓人省心很多。即便IE9最後不支援，也可以找到替代，嗯，我說幾次了，你猜到了嗎？

【IE9 NO】 CSS3 Transforms

Transforms更多的是為Transition而存在，獨立的Transforms幾乎沒存在價值。

【IE9 NO】 CSS3 3D Transforms

別說IE9 NO了，迄今為止，只有Mac Safari 4+和Win Safari 5支援，Win下Safari就是一坨屎，一開幾百兆記憶體就沒了，不誇張。看起來最華麗又最杯具的屬性，但是，iOS完美支援，你能錯過iOS麼？前段時間我小試牛刀就被折服了，那體驗……請允許我少見多怪一聲：額滴神哪，Flash一邊死去！

【IE9 NO】 CSS3 Transitions

變換就是變幻莫測，在我搞懂以後現在是我的動畫主力。但是，不得不說應用面相當有限，且不說尚未釋出的FF4才剛剛支援，而Opera市場份額很少，就效能而言，FF4和Opera10.6的Transitions效能都很糟糕，糟糕到還不是聊勝於無，而是不如無。效能問題以後再詳談，現在空口無憑，多說無益。

【IE9 NO】 CSS3 Animation

在沒搞懂Tansitions前，從去年中開始，我玩了半年多的Animation。“動畫”比“變換”文字上顯然更動畫，對吧，時間線的存在對於動畫設計也是親切的。後來我發現Animation有些問題實在難以解決，才憋著去理解Transitions，然後今年上半年開始全面轉。Animation的問題在於它的流程是從時間線起點到終點，但是不是停在終點而是回到起點。雖然可以在特定情況下讓它停在終點，但是障礙很多甚至邁不過。即便用JS監聽事件也是靠不住的，1毫秒誤差都會產生閃爍。而Transitions不是時間線的起點終點，而是從一個狀態到另一個狀態並不會返回。

折騰了一年後，我才覺悟，真是名副其實啊。Animation就是指一長段動畫，基於時間線有始有終還會自動倒帶回到初始狀態，意思是指重點是產生一段動畫，但物體本身沒變。而Transitions就純粹是一次變換，從狀態A變換到狀態B，雖然也有一定意義上的時間線，但重點是改變而不是動畫，變都變了，當然不會回頭。嗯，這比較繞的兩個東西，我覺得我還是說得比較清楚了，怎麼選擇應該就清楚了，也可能還是暈的，哈哈，那就繼續暈。（額滴神啦，3點半了，寫不完了，新的24小時都過了，睡覺睡覺，明天繼續。）

【IE9 OK】 CSS3 Media Queries

這是一個非常好的屬性。使用者不可控的解析度已經讓設計非常的困難了，全域性自適應設計早就不適合時代了，定製才是最好的。我的部落格園在高分屏下全屏瀏覽體驗就很不爽。沒有辦法下，1024定寬居中的設計方式成為唯一選擇，於是帶來了兩邊越來越大的空白，字型也越來越小，這還只是電腦上的情況。另外一邊，隨著iOS和Android率領移動網際網路的高速發展，3寸，3.2寸，3.5寸，4寸，5寸，9寸……320，480，720，768，960……更多的亂七八糟的螢幕大小與解析度加入進來，怎麼辦？噢，天啦，iPhone 4還帶來了精度，可預見的以後精度波及到顯示器上，不再統一為72dpi，所有靜態圖片也將分離出不同規格的設計，前所未有的災難！

如果你不是完美主義者，這對你沒什麼影響，你可以繼續1024定寬居中。但如果像我這樣無窮盡的追逐完美，追求自己的設計能夠在任何裝置與環境下都帶著最佳的使用者介面和使用者體驗，怎麼辦怎麼辦怎麼辦？！CSS3 Media Queries！無論在整體還是區域性，它都能滿足你的完美情結。嚇，這怎麼有點像白駝山壯骨粉的廣告～～～

【IE9 OK】 Font linking (@font-face)

對於動不動就幾M甚至10+M的中文字型檔案來說，這沒啥用，而且貌似它並不會讓字型從此安裝在系統中，這意味著，每次都要下載。不過設想中，它還是有其他的絕妙用處～～～等我以後實驗了再說～～～

HTML 5

【IE9 OK】 Video element

嗯，這是最火的東東。仔細想想，它也確實該火。顛覆Flash？不限於此，也許還會顛覆Premiere等視訊編輯軟體。現在的視訊都是一次成品，無論是Flash還是Video element都只是播放成品的載體，視訊編輯是另一個領域。而Video element不僅僅是載體，它將編輯、互動帶入了視訊。當視訊不再是一次成品，不再是從頭播放到尾的東西，當視訊退為需要再次加工的素材，當視訊可被使用者操作也就有了流程的設計，一切就變得非常有趣了。網頁設計的發展歷史恐怕會在視訊設計上重演，那就是純粹的視訊設計師將退居為網際網路視訊設計二線用於提供素材甚至淡出，而基於Web標準的視訊設計師將站上舞臺。也許以後會出現這樣的產品設計描述：當使用者點選視訊中這個人物腦袋時，視訊暫停，一個透明的視窗連結Facebook獲取該人物相關資料並呈現。不繼續YY了，平面設計和網頁設計最大的不同是什麼？平面設計的目標是欣賞眼睛看，而網頁設計的目標是互動動手操作，我想，同樣的差別和區分會隨著Video element的出現進入視訊設計領域中。

【IE9 OK】 Audio element

同上，音訊和視訊同根生。

WYSIWYG editable elements

我一直沒搞懂，這麼好的東西，全瀏覽器相容的東西，卻用得那麼少。我也沒用過，不知道有什麼障礙，正在嘗試使用。

【IE9 OK】 New, stylable HTML5 elements

在class命名替代和強大的CSS3 Selector光環下，還沒有感覺到非常必要的應用面。

【IE9 OK】 SVG & Canvas

正在學的兩個東東，說不了多少東西，而且也糾結於很多阻礙。之前我說的替代就是指SVG，IE9不支援漸變，但支援SVG做背景，就可以用SVG來代替Gradient。

圓角，投影，發光，透明，漸變，SVG，Canvas……你發現什麼沒？在網頁上，高彈性的向量化設計是大勢所趨，而死板的點陣圖設計即將走下舞臺成為歷史。這完全適應時代的發展，因為iPhone、iPad、Android已經拉動各大廠家，將社會推進到多裝置的廣義網際網路時代。在這個混亂的廣義網際網路時代，設計的寬容性就變得極其重要，點陣圖的死板顯然遠不及程式碼向量的靈活。從這點上來說，Flash也是比不上HTML5的，因為Flash中的向量設計是侷限的，甚至，是固定的圖片向量。

我現在圖片的使用量越來越少，FW開啟的機會也越來越少，越來越多的設計轉移到直接寫程式碼了。因為個人形象問題，很多次別人問我是不是搞藝術的，我說我是做網頁設計的，算沾藝術一點兒邊吧，然後他把腦袋伸到我螢幕前一晃期待看見一個華美的設計，結果全是程式碼，哈哈哈哈。說到這裡，我又想起了設計師的轉型問題。用程式碼去完成向量設計，圓角圓多少，投影偏移多少模糊多少，發光的範圍角度，漸變……這些東西都是純平面設計的東西，如果一個Web標準設計師不會平面設計怎麼玩？

CSS2時代，已經引發了一次設計師的轉型，如果說只是排版被轉移了，還不夠徹底設計師還可以依賴輸出設計稿獨立在團隊中，那麼正在進入的CSS3時代，設計稿用處還剩多少？而輸出設計稿的設計師，逃向何處？無處可逃。

如果說CSS2時代，用於頁面排版設計的DW被記事本廢除，那麼CSS3時代，FW、PS、CD等等繪圖軟體將被步入DW後塵，同樣被記事本所取代。設計一個向量圖示，不是AI，而是SVG。設計一個水晶按鈕，不是圖片而是純CSS3向量按鈕。習慣了在視覺化軟體的設定皮膚中配置各項引數的平面設計師，如何習慣在程式碼中去配置？難道你給我一個設計稿附帶文案：這個地方的漸變從哪裡到哪裡，那個地方的陰影左偏移1px右偏移2px模糊5px，哦，還有各種色彩的引數等等，以便Web標準設計師用CSS3還原？

那麼為什麼不直接用程式碼來設計呢？結果就是：平面設計師必學程式碼，Web標準設計師必學設計，無處可逃。合作？想想這兩者現在合作的障礙在哪裡，未來只會更加艱難。而我一直的觀點就是：CSS和設計密不可分。

寫煩了寫煩了，很多沒寫清楚還有很多沒寫，但我不想寫了咋辦呢。錘子，不寫了。沒有例項空口說白話不安逸沒信服力，幹活去了，等英來網正式版釋出後，我一個一個的給大家指著案例，慢慢囉嗦。嗯，《重構之美》又將新生，無窮無盡，生生不息啊～～～

---

PS: 昨天開會的時候，說到各瀏覽器頁面解析效能問題，我就去試IE9 Pre3，結果異常驚喜的發現了box-shadow的存在，只在一個地方出現了，其他我應用了shadow的地方依舊空白。雖然我還不明白IE9怎麼解析shadow的，顯示有點奇怪，但box-shadow並不在IE9目前的宣傳中。這個發現，說明IE9團隊在測試對box-shadow的支援，那麼text-shadow肯定不會落下，shadow在IE9的開發計劃中，這太好了！！！我對IE9充滿了希望，哈哈哈哈哈！

---

PS:PS:玩星際2的，臺服切磋：zhengminlive@hotmail.com

本文轉自爆牙齒部落格園部落格，原文連結：http://www.cnblogs.com/yuntian/archive/2010/08/03/1790904.html，如需轉載請自行聯絡原作者