Cross Browser Compatibility & Progressive Enhancement

隨著網路的發展,網頁所包含的不單止有文字圖案,不同種類的多媒體應用漸漸被應用於一些尖端前衛的網站上,固有的瀏覽器未必能應付這樣的需求。由Internet Explorer vs Netscape 的年代開始,瀏覽器的戰爭自此沒有停過。林林種種的瀏覽器出現,Firefox, Chrome, Safari, Opera等等,對用家來說是多了選擇,對Web Developer來說分分鐘是惡夢的開始。

假如各門路的瀏覽器能夠把任何一個網頁都一致地呈現,這是最理想的情況。但事實上各家各有自己對網頁的編譯方法,甚至運行上的不同做法,都使 Web Developer 再神勝不過。意思說,作為 Web Developer ,有責任的話,他需要讓其製作的網頁能在絕大部份的瀏覽器 / 視窗平台中順利運行,這就是所謂 Cross Browser Compatibility 。要做到這點,並不是把一切基本網頁編寫的 HTML,JavaScript 學會就是了。還得要從各個瀏覽器的特性方面著手。由標準HTML (W3C Standard HTML)學起,到逐步了解不同瀏覽器對 HTML 的演譯方法,接著學寫標準的JavaScript,並且查找某些JavaScript在不同瀏覽器中編寫文法的例外,到較後學習如何利用CSS對版面作改動,與及留意不同瀏覽器所支援的 CSS 版本,為網頁作出適當的 CSS 調整。

從前 Cross Browser Support 主要依賴人手在各個瀏覽器上作測試,而現在坊間有說多途徑去減化這些測試動作。這個網站羅列了數個測試方法:

7 Fresh and Simple Ways to Test Cross-Browser Compatibility | FreelanceFolder

詳細的不說了,重點就是作為 Web Developer ,對自己所製作的網站傑作,都應該執行 Cross Browser Compatibility 測試,好使自己的作品不會在某些執行環境中出洋相。

當然,在云云瀏覽器存在的世代,正如我說不同瀏覽器對網頁的呈現會有不同的演譯方法,然而強行要將一個網頁完全順利一式一樣的在各個瀏覽器呈現,並不是沒可能,只是不夠實制。比方說,對不同瀏覽器對網頁中的元作執位方面會有偏差,這個還不算太難應對。但對一些網站運用了許多視覺優化,如圓角表單、文字陰影、背景漸變等等,從前人們會用 Table、Div或背景圖來規劃一些組件來製作相關效果。但隨著 CSS 的廣泛應用,CSS版本進展到CSS3,利用它能夠將許多效果實現。這些進化了的效果在較舊的瀏覽器上當然未能完整呈現,但呈現出的結果因背後有 Backward Compatibility 的概念而也不算太強差人意。這個網站有提出一個例子解釋:

When Should You Use Progressive Enhancement

嗯,本文另一個字眼出現了:「Progressive Enhancement」。其大意是一個網頁的表現結果在各個瀏覽器都大致一樣,唯獨對新技術有所支援的瀏覽器中,會展示較好的呈現結果。以上網站顯示了一個表單資料的顯示情況。用較新的瀏覽器觀看網站,會得到較漂亮的版面,然而在較舊的瀏覽器中,亦不失其功能上的表現。當然,對於一些不明白上文所述的一切,又要要求 Web Developer 把網頁做到在任何網站一式一樣的老闆來說,那只有苦了該 Web Developer 去花心機時間做盡一切方法將其老闆的想法實現。

Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Answer * Time limit is exhausted. Please reload CAPTCHA.