跨瀏覽器網站設計者的挑戰(下)
探討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 http://validator.w3.org/
* CSS Validator http://jigsaw.w3.org/css-validator/

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






跨瀏覽器網站設計者的挑戰(上)
跨瀏覽器網站設計者的挑戰(中)
跨瀏覽器網站設計者的挑戰(下)

參考資料
* W3C http://www.w3.org
* HTML5 http://www.html5rocks.com
* HTML5 Test http://html5test.com
* Start Counter http://gs.statcounter.com
* CSS Hacks http://www.webdevout.net/css-hacks
* iWeb FAQ - Browser compatibility issues http://iwebfaq.org/site/iWeb_Compatibility.html
* Browser Compatibility Tutorial http://www.netmechanic.com/products/Browser-Tutorial.shtml
* Web Designer Wall http://webdesignerwall.com/
* Meyerweb http://meyerweb.com/
* Web Direction http://www.webdirections.org/
* Smashing Magazine http://www.smashingmagazine.com
* Wikipedia http://wikipedia.org



作者王琨堯，現任職於凌群電腦 證券產品研發處，主要負責證券軟體軟體開發流程解決方案-ASP.NET、C#、JavaScript、Oracle Stored Procedure、Unit Test。主要專長為Microsoft.Net、MVC、Visual Studio TFS、Website UI介面設計(jQuery、CSS、AJAX)、UI圖形動畫設計(Photoshop、Flash)、MS SQL Server/Oracle/MySQL，並參與各類大型專案開發。

※ 本文由王琨堯著作，由凌群電腦授權刊登於RUN!PC網站。


   

回首頁...