4種方法幫你的網站建立更豐富的Web體驗

　　現在的網站已經從一個簡單的文字頁面開始進化了很多，我們可以製作出豐富的視覺效果來增加使用者在桌面瀏覽器和移動瀏覽器的體驗。

　　今天這篇文字就給大家分享4個實用的方法，來幫助你建立更好的Web體驗。

　　對於那些還在用IE6的朋友，我只想說一句：go to hell。

　　想檢視各個瀏覽器對一些新特性的相容性情況可以去caniuse.com，上面列的很詳細。

　　下面就來看看這四個增強你的站點使用者體驗的方法是什麼。

　1. CSS

　　CSS是Cascading Style Sheets（層疊樣式表單）的簡稱。更多的人把它稱作樣式表。它是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。

　　CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。

　　相對於傳統HTML的表現而言，CSS能夠對網頁中的物件的位置排版進行畫素級的精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步互動設計，是目前基於文字展示最優秀的表現設計語言。

　2. SVG

　　SVG是可縮放向量圖形是基於可擴充套件標記語言（標準通用標記語言的子集），用於描述二維向量圖形的一種圖形格式。它由全球資訊網聯盟制定，是一個開放標準。

　　向量影像用點和線來描述物體，所以檔案會比較小，同時也能提供高清晰的畫面，適合於直接列印或輸出。而點陣圖影像的儲存單位是影像上每一點的畫素值，因此一般的影像檔案都很大，會佔用大量的網路頻寬。SVG是一種向量圖形格式，GIF、JPEG是光柵檔案格式。有了兩者的概念後，SVG較GIF、JPEG的優勢顯而易見。更多的好東西可以去snapsvg看看。

　　SVG是一個XML檔案，用於XML程式設計的兩種模型DOM和SAX也適用於它。因為SVG是被設計用於網際網路，所以通過Javascript和DOM訪問它就是最重要的應用模式。通過Javascript和DOM可以動態地修改HTML，同樣也可以在瀏覽器中動態地建立、修改和刪除圖片。

　3. 2D Canvas

　　HTML5 <canvas> 標籤用於繪製影像（通過指令碼，通常是 JavaScript）。

　　不過，<canvas> 元素本身並沒有繪製能力（它僅僅是圖形的容器） – 您必須使用指令碼來完成實際的繪圖任務。

　　getContext() 方法可返回一個物件，該物件提供了用於在畫布上繪圖的方法和屬性。

　　getContext(“2d”) 物件屬性和方法，可用於在畫布上繪製文字、線條、矩形、圓形等等。

　4. WebGL

　　WebGL是一種3D繪圖示準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript繫結，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯示卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能建立複雜的導航和資料視覺化。

　　顯然，WebGL技術標準免去了開發網頁專用渲染外掛的麻煩，可被用於建立具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等等。一些效果可以去threejs看看。

　　WebGL完美地解決了現有的Web互動式三維動畫的兩個問題：第一，它通過HTML指令碼本身實現Web互動式三維動畫的製作，無需任何瀏覽器外掛支援;第二，它利用底層的圖形硬體加速功能進行的圖形渲染，是通過統一的、標準的、跨平臺的OpenGL介面實現的。

　　注：文章圖片內容參考自webdesignerdepot部落格。