1.3.3 基於瀏覽器的挑戰
在網際網路的早期，瀏覽器各自為政、相容性不佳，是網頁開發者最頭痛的問題之一。這不只讓使用者看到的畫面時好時壞，也讓網站的開發和維護變得更複雜。這篇文章會回頭看看當年瀏覽器不一致與相容性的狀況，以及開發者是怎麼一步步克服的。
瀏覽器不一致性問題
1990年代到2000年代初期，市面上同時有好幾種瀏覽器，像是Netscape Navigator、Internet Explorer、Opera、Safari和Firefox。它們的渲染引擎不同，對標準的支援程度也不一樣，結果同一個網頁換個瀏覽器打開，畫面就可能跑掉。常見的不一致問題有這幾種：
-
HTML和CSS支援差異：每家瀏覽器對HTML和CSS標準的支援程度不同，某個CSS屬性在這個瀏覽器有效，換到另一個就可能完全沒作用。開發者只好針對不同瀏覽器個別調整樣式。
-
JavaScript執行差異：JavaScript是網頁互動的核心技術，但各瀏覽器解讀和執行它的方式並不一致。像早期的Internet Explorer對JavaScript支援較差，很多功能在上面就是跑不起來。
-
DOM（文件物件模型）操作差異：DOM描述的是網頁的結構，而不同瀏覽器支援與實作DOM操作的方式各有不同，要寫出在每個瀏覽器都能正常運作的DOM操作並不容易。
-
盒模型差異：各瀏覽器對CSS盒模型的解讀不同，差異特別容易出現在邊框、內距和外距的計算上。同一個元素換個瀏覽器看，尺寸和位置就可能不一樣。
相容性問題
除了顯示不一致，相容性也是開發者躲不掉的難題，主要有以下幾類：
-
向後相容性：瀏覽器一直在改版，但舊版本不見得支援新的標準和技術。設計網頁時，開發者得把還在用舊版瀏覽器的人一起考慮進去。
-
跨平台相容性：同樣是瀏覽器，裝在不同作業系統上，行為也可能不同。例如Windows上的Internet Explorer和Mac上的Safari，打開同一個網頁，呈現出來的效果可能就有落差。
-
裝置相容性：行動裝置普及之後，開發者還得確認網頁在各種尺寸、解析度的裝置上都能正常顯示和操作。
克服瀏覽器不一致性和相容性問題的方法
面對這些挑戰，開發者發展出不少方法和工具，讓網頁在不同瀏覽器和裝置上盡量維持一致、彼此相容。常見的做法有：
-
使用標準化的HTML和CSS：照著W3C（全球資訊網協會）制定的HTML和CSS標準來寫，是讓網頁在各瀏覽器表現一致最基本的做法。非標準的HTML標籤和CSS屬性，能不用就盡量別用。
-
CSS重置和標準化：套用CSS重置（reset）或標準化（normalize）樣式表，可以抹平各瀏覽器預設樣式的差異，讓網頁的基礎樣式有一致的起點。常用的工具像是Normalize.css。
-
跨瀏覽器測試：開發過程中用多種瀏覽器實際打開來測，確認畫面在各瀏覽器都一致。瀏覽器內建的開發者工具（如Chrome DevTools、Firefox Developer Tools）就很適合拿來除錯和測試。
-
JavaScript函式庫和框架：jQuery、React、Vue.js這類函式庫和框架，可以讓跨瀏覽器的JavaScript開發輕鬆不少。它們通常已經處理掉瀏覽器之間的差異，對外提供一致的API。
-
漸進增強和優雅降級：漸進增強（Progressive Enhancement）和優雅降級（Graceful Degradation）是兩種常見的開發策略。漸進增強是先讓基本功能在所有瀏覽器都能正常運作，再替支援新技術的瀏覽器加上額外的功能和效果。優雅降級的方向剛好相反，先把完整功能做出來，再確保不支援某些技術的瀏覽器至少還能看到基本的功能和內容。
-
使用Polyfill：Polyfill是用來補上瀏覽器缺少功能的技術。有了Polyfill，開發者就能在舊版瀏覽器裡用上新的標準和技術，例如在不支援ES6的瀏覽器中實作ES6的功能。
-
響應式設計：響應式設計（Responsive Design）的目的是讓網頁在不同裝置和解析度上都能正常顯示。開發者透過CSS媒體查詢（Media Queries）和彈性版面（Flexbox、Grid），就能做出依螢幕尺寸自動調整的網頁。
-
版本控制和持續整合：搭配版本控制系統（如Git）和持續整合工具（如Jenkins、Travis CI），開發團隊可以管理程式碼的變更，並自動執行跨瀏覽器測試，每次更新程式碼後都能確認網頁的相容性。
瀏覽器相容性問題至今沒有完全消失，只是從桌機延伸到各種手機與平板。企業規劃官網時，不妨把跨瀏覽器測試與響應式設計列入驗收項目；在參考網頁設計公司推薦或評估高雄網頁設計公司時，也可以請對方說明他們如何處理相容性。