探討CSS3 跨瀏覽器設計

CSS3為目前CSS最新版本，由於新版的完全與較舊的版本相容，所以加入新的CSS3標籤時無須改變之前任何的設計排版，目前仍舊處於開發階段。

在CSS3中有部分的標籤因為瀏覽器支援不一樣，因此對於不同瀏覽器會加上不一樣的前贅詞，在寫樣式設定時，可以同時將兩個都寫上去，當瀏覽器版本低於支援時瀏覽器會自動抓取加了前贅詞的屬性。



因此在使用CSS3樣式時，會需要知道使用哪些標籤時需要加上前贅詞，以下參考css3please.com及實際測試下做了整理。

Borders -border-radius ： 將DIV加上四周圓角。



Borders -box-shadow ： 將DIV元素加上陰影



Borders -border-image ： 指定圖片為DIV元素的邊框背景。
不支援瀏覽器 ： Internet Explorer9


Backgrounds -background-size ： 指定背景圖片大小。



Backgrounds -background-origin ： 放置圖片於DIV元素中，與內容為相對位置(Relative)關係，使兩個不會重疊。



Text Effects -text-shadow ： 將文字加上陰影。



Text Effects -word-wrap ： 能將一段很長的文字在有限的DIV元素空間裡斷行。



fonts -@font-face ： 指定一種字型或是連結到字形檔案的網路路徑，改善以往字型需要本機電腦裡有網頁才能正常顯示。



2D transform -rotate() ： 當給予正值時，DIV元素會以順時針轉向。



2D transform -scale() ： 設定X軸與Y軸後，DIV元素會依照設定值放大縮小。



2D transform -skew() ： DIV元素會根據給予的度數作偏移的變化。



2D transform -matrix() ： 集合了所有2D變化的功能。



3D transform - rotateX()，rotateY() ： DIV會依照給予X軸或Y軸的值已中心做旋轉。
不支援瀏覽器: Opera



Animations - @keyframes ： 利用百分比當作DIV元素時間軸，並可設定不同的變化，例如位置或是顏色，達到形變的作用。



Multiple Columns- column-count ， column-gap ： 依照給予的數值將DIV元素裡的文字切割成表格。



結論

在目前多樣化的瀏覽器環境下，網站開發的確是一大挑戰。透過這篇文章我們可以獲得的訊息是Internet Explorer網站相容性是開發者必須面對的一個挑戰。Internet Explorer所使用的為Trident引擎，在發展的過程中並未完全遵照W3C所制定的DOM規範，因此相對於其他瀏覽器，Internet Explorer會讓網站顯示的不一樣機率更加提升。有人提出拒絕使用Internet Explorer，我認為並不是一個最好的方法，畢竟他擁有較高的市占率。網站能相容於不同的Internet Explorer版本是現階段我認為網站都必須擁有的功能，因為在過去一段時間筆者看過demo網站時還是用IE7甚至IE6的版本。順道一提的是目前中國大陸廠商所開發的瀏覽器大都以Trident為主。

以下為幾點建議：

在網站註明IE適用瀏覽器版本

以IE來說，不同版本會有顯示不一的情況下，在設計上可以做的就是提醒使用者使用較新的版本瀏覽，或是開發者自己在網站做相容版本的處理。

避免使用太新的技術 也許你會問HTML5或CSS3算不算是太新的技術？只能說如果市占率最高的瀏覽器還暫時不支援，那開發者必須在動手之前清楚那些技術需要避免使用，若是有特定要求的功能，建議可以使用JavaScript套件去實現，例如IE9以前的版本不支援標籤，可以使用Html5.js套件。

確保自己的程式沒問題

有的時候網站顯示出現問題，不光是瀏覽器的問題，有的時候很可能是開發者自己的問題。例如DOM標籤中需要有關閉標籤，例如：，若少了關閉標籤在不同版本的IE會選擇呈現，而有些版本則會整個銷。網路上提供很多工具讓開發者可以用來檢視寫好的網站HTML或是CSS是否有問題

* HTML Validator
* CSS Validator

如果你要問是否有一個網站在不同的瀏覽器中能顯示一模一樣，答案是否定的，開發者唯一能做的是將Code寫好，使用者唯一能做的是盡量將瀏覽器版本升級到最新版本。

參考資料
W3C
HTML5
HTML5 Test
Start Counter
CSS Hacks
iWeb FAQ - Browser compatibility issues
Browser Compatibility Tutorial
Web Designer Wall
Meyerweb
Web Direction
Smashing Magazine
Wikipedia

(本文轉載自RUN!PC)