網頁設計：跨瀏覽器相容性測試 Chrome、Safari、Firefox、Edge 完整指南

二、Chrome、Edge、Safari、Firefox 為什麼還會不一樣？

現代瀏覽器都遵循 HTML、CSS、ECMAScript 與各種 Web API 標準，
但底層的瀏覽器引擎、作業系統整合與功能推出時間仍可能不同。

四、網站跨瀏覽器相容性測試完整流程

如果是企業官網或電商網站，我不建議等到全部做完才一次測。
比較有效率的方式是從開發階段就分層檢查。

六、CSS 跨瀏覽器相容性怎麼處理？

不要一開始就寫瀏覽器專用 CSS

過去常看到這種做法：

-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;

現代前端不應該看到一個效果就手動把所有瀏覽器 Prefix 寫一輪。
大部分標準化功能直接使用標準語法即可；
專案真的需要 Prefix 時，可以交給 Autoprefixer 依 Browserslist
的瀏覽器目標自動產生。

需要新功能時，用 Progressive Enhancement

基本版先確保所有支援環境可以使用，
支援新 CSS 的瀏覽器再套上進階效果。

/* 所有瀏覽器都有基本版 */
.product-list {
  display: block;
}

/* 支援 Grid 才升級 */
@supports (display: grid) {
  .product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

如果功能不支援時需要明確 fallback，也可以反過來寫：

@supports not (display: grid) {
  .product-card {
    margin-bottom: 24px;
  }
}

Browserslist 建議依網站實際客群設定

前端建置環境如果有 Babel、PostCSS、Autoprefixer 等工具，
可以建立統一的 Browserslist。

# .browserslistrc 範例

> 0.5% in TW
last 2 versions
Firefox ESR
not dead

上面只是範例，不是每個網站都應該照抄。
如果你的 GA4 顯示某個舊版本瀏覽器仍有大量客戶，
支援政策就應該依真實流量調整。

八、最容易漏掉的問題：RWD、表單、字型、圖片與觸控

RWD 不要只測幾支熱門手機尺寸

很多網站測 RWD 時會固定選 iPhone、Pixel 幾個 DevTools Preset，
但真正要確認的是版面在「連續寬度」之間有沒有突然壞掉。

表單要測實際輸入，不只是看外觀

原生表單控制項由瀏覽器與作業系統共同呈現，
因此 Select、Date、File Upload、Autocomplete 等元件，
在不同裝置本來就可能長得不同。

比起硬把外觀做成完全一致，更重要的是保持正確的 HTML 結構

每個欄位有正確 Label、鍵盤能操作、錯誤訊息清楚，
對跨瀏覽器與無障礙都比較穩定。

不要忘記 Font 與內容高度

Windows、macOS、Android、iOS 即使使用同一組 CSS，
字型 fallback 與實際 glyph 渲染也可能不同。
因此按鈕、Tab、卡片標題不要依賴「文字一定剛好只有一行」。

.button {
  min-height: 44px;
  padding: 10px 18px;
  white-space: normal;
}

圖片與影片要準備合理 fallback

十、用 Playwright 做 Chrome、Edge、Firefox、WebKit 自動化測試

網站頁面多了之後，不可能每一次改 CSS 都人工把所有頁面點一遍。
這時可以把重要流程交給 Playwright。

例如把 Chromium、Firefox、WebKit、Google Chrome、 Microsoft Edge 都設定成測試 Project：

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",

  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"]
      }
    },

    {
      name: "firefox",
      use: {
        ...devices["Desktop Firefox"]
      }
    },

    {
      name: "webkit",
      use: {
        ...devices["Desktop Safari"]
      }
    },

    {
      name: "google-chrome",
      use: {
        channel: "chrome"
      }
    },

    {
      name: "microsoft-edge",
      use: {
        channel: "msedge"
      }
    }
  ]
});

表單測試範例

import { test, expect } from "@playwright/test";

test("聯絡表單可以正常操作", async ({ page }) => {

  await page.goto("https://example.com/contact");

  await page.getByLabel("姓名").fill("測試使用者");
  await page.getByLabel("電子郵件").fill("test@example.com");

  await page
    .getByRole("button", { name: "送出" })
    .click();

  await expect(
    page.getByText("感謝您的詢問")
  ).toBeVisible();

});

Safari 可以另外用 WebDriver

Apple 在 Safari 內提供原生 safaridriver。
對登入、表單、購物流程等需要長期回歸測試的網站，
可以把 Safari 正式版也加入自動化。