[展示] 讓Adobe來告訴你CSS3跟HTML5有多酷

一直以來都以發展Flash技術聞名的Adobe,自從被Apple重重的一拳打在臉上後也開始認真的發展CSS3與HTML5技術相關軟體與應用,而在今年的八月初,Adobe推出了Beta網站—the expressive web,這個網站是基於HTML5環境,運用CSS3的搭配,製作出一些新穎的網頁效果,換句話說,the expressive web是Adobe為了展示HTML5與CSS3的效果所製作的展示網站,你可以隨著左下方的箭頭一格一格觀看,相信每點一格都會讓你發現一些驚奇。

為什麼這個網站是Beta?原因很簡單,因為並不是所有的瀏覽器都可以看到完整的畫面,而且也不是所有的瀏覽器都可以支援HTML5新增的全部功能(更何況HTML5還沒有正式訂定完成),只能說普遍上都可以運作而已,至於哪些瀏覽器不能支援?想當然爾,如果你的瀏覽器不是最新版本,那支援機率當然就會比較低,而每個展示畫面下方都會列出哪項新功能在哪些瀏覽器有支援,而這些有支援的瀏覽器又佔整體使用者多少百分比,原則上都在40~50%之間,相信有數據的搭配呈現會讓整體更有說服力。

透過the expressive web網站的建立,Adobe展示小組也公佈了本次過程中所學到的經驗,以下將用我個人的理解加上自己的解說將Adobe小組的經驗做一個簡短的呈現:

  • 儘早決定是否支援舊版瀏覽器—支援舊版瀏覽器可以提高網站完整性卻會消耗過多的維護時程。
  • 只使用HTML5與CSS3在你的網站—避免使用其他版本以減少頁面上語言與瀏覽器的衝突。
  • 隨著HTML5的制定網站應隨之維護的更佳完善—徹底執行HTML5規範來制作網站。
  • 瀏覽器支援的性能不在僅限於Javascript—隨著CSS3的誕生,部分的動態效果也可以轉由CSS3來執行。
  • 不要動太多東西—這個道理很簡單,太多動態會消耗電腦效能,一般頁面上常見會同時使用動態的部分就有主選單、次選單、主視覺banner等,需要考慮過多的動態效果會讓電腦效能吃緊,效能吃緊會大大影響頁面呈現的效果。
  • 要準備備案—一定要替那些看不到最新的HTML5或CSS3效果的使用者思考,否則你的網站將會殘破不堪。
  • 要記得設計也要符合智慧型手機的使用者—目前智慧型手機的使用者已經大幅增加,日後肯定只會越來越多,絕對不可以忽視頁面在智慧型手機上畫面的呈現有多重要!
  • 使用ModernizrModernizr一個Open Source 的Javascript 資源庫,可以幫助你建構HTML5與CSS3。
  • 好的工具Adobe Edge Preview是Adobe最近推出的新軟體,可以幫助你預覽與建立HTML5與CSS3網站,最重要的是還是可以使用Flash製作動畫嵌入HTML5的Video Tag中。

最後,在the expressive web上也有資源庫頁面,可以讓你查看the expressive web上使用的HTML5與CSS3有哪些之外,也整理了一些HTML5與CSS3的資源網站供大家查看,相信大家看完這個網站,對於HTML5與CSS3會有更明確的視覺感受!

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

    返回頂端