支援舊版瀏覽器

每個網站的目標受眾都不同。在確定方法之前，請了解使用舊版瀏覽器訪問您網站的訪客數量。如果您正在新增或替換現有網站，這很簡單，因為您可能已擁有可用於告知訪客使用的技術的分析資訊。如果您沒有分析資訊，或者您正在啟動一個全新的網站，那麼像 Statcounter 這樣的網站可以提供相關統計資訊，這些資訊可以按位置進行過濾。

您還應該考慮裝置型別以及人們使用您網站的方式。例如，您可以預期在移動裝置上比平均水平更高的網站使用量。始終優先考慮可訪問性以及使用輔助技術的人員；對於某些網站，這可能更加關鍵。開發人員經常非常擔心 1% 的使用者的體驗，而忽視了擁有可訪問性需求的更大數量的使用者。

網站不可能在所有瀏覽器中都呈現相同。一些使用者將使用手機檢視網站，而另一些使用者則使用大型桌上型電腦螢幕。同樣，一些使用者將使用舊版瀏覽器，而另一些使用者將使用最新版瀏覽器。一些使用者可能透過螢幕閱讀器收聽內容，而另一些使用者可能需要放大頁面才能閱讀。支援所有人意味著提供一個防禦性設計的版本，這樣它在現代瀏覽器上看起來很棒，但在所有使用者訪問內容時，無論他們如何訪問，都可以在基本級別上使用。

基本級別的支援來自對內容的良好結構，以便頁面的正常流程有意義。對於使用有限資料計劃的使用者，他們的瀏覽器可能不會載入影像、字型，甚至您的 CSS。但是，即使這些元素未完全載入，也應該以一種可訪問且可讀的方式呈現內容。結構良好的 HTML 文件始終是您的起點。問問自己：*如果您刪除樣式表，您的內容是否仍然有意義？*

花費時間嘗試讓每個人對您的網站擁有相同的體驗從商業意義上來說是不合理的。這是因為使用者環境可能差異很大，而且您無法控制。您需要在純 HTML 頁面和功能齊全的網站之間取得平衡。測試您網站的純 CSS-less 檢視非常有用，以確保您網站的回退體驗是可訪問的。這個回退可能永遠不會被使用非常舊或有限瀏覽器的使用者檢視，但可能會被您的主要目標受眾檢視 - 使用現代瀏覽器的使用者 - 當他們的瀏覽器或網際網路連線暫時出現故障時。CSS 簡化了建立這些回退。因此，最好專注於您可以控制的內容，也就是說，花時間讓您的網站 可訪問，從而服務更多使用者。

CSS 規範包含的資訊解釋了當將兩個類似的特性（例如佈局方法）應用於同一項時瀏覽器會做什麼。例如，它們定義瞭如果一個專案被浮動並且也是一個網格專案並且是 CSS 網格容器的一部分，會發生什麼。還有一個定義，說明當一個元素同時設定了 margin-top 和 margin-block-start 屬性時會發生什麼。

當瀏覽器無法識別新功能時，它會將宣告丟棄為無效 而不丟擲錯誤。由於瀏覽器會丟棄不支援的 CSS 屬性和值，因此舊值和新值可以在同一個規則集中共存。只要確保在宣告新值之前宣告舊值，以便在支援時，新值覆蓋舊值（回退）。

例如，大多數瀏覽器支援 display 屬性的雙值語法。如果瀏覽器不支援，它將使用舊的單值語法。

.container {
  display: inline-flex;
  display: inline flex;
}

同樣，這種 錯誤處理 確保即使不再支援舊的 供應商字首 功能，舊的 CSS 程式碼庫也能繼續工作。雖然供應商字首不再常用，但如果必須包含供應商字首屬性或值，請確保在宣告標準值之前宣告字首值，以便在支援時，新值覆蓋回退值。

包含並非在所有瀏覽器中都支援的新選擇器需要更小心地處理。如果逗號分隔列表中的選擇器 無效，則整個樣式塊將被忽略。

如果使用供應商字首 偽元素 或新的 偽類 瀏覽器可能尚未支援，請將字首值包含在 寬容的選擇器列表 中，使用 :is() 或 :where()，這樣整個選擇器塊就不會被 無效化並忽略。

:is(:-prefix-mistake, :unsupported-pseudo),
.valid {
  font-family: sans-serif;
}
:-prefix-mistake,
:unsupported-pseudo,
.valid {
  color: red;
}

在上面的示例中，.valid 內容將是 sans-serif，但不是 red。

功能查詢允許您測試瀏覽器是否支援特定 CSS 功能。這意味著您可以為不支援某些功能的瀏覽器編寫一些 CSS，然後檢查瀏覽器是否支援該功能，如果支援，則新增您新奇的功能。

我們可以新增一個功能查詢來測試對 subgrid 的支援，並根據該支援提供樣式

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: palegoldenrod;
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border-radius: 5px;
  background-color: rgb(207 232 220);
}

@supports (grid-template-rows: subgrid) {
  .wrapper {
    grid-template-rows: subgrid;
    gap: 10px;
    background-color: lightblue;
    text-align: center;
  }
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
  <div class="item">Item Four</div>
  <div class="item">Item Five</div>
  <div class="item">Item Six</div>
</div>

所有現代瀏覽器都支援功能查詢。首先編寫您完全支援的功能的 CSS，這些功能位於任何功能查詢之外。一旦您的網站對所有使用者都可用且可訪問，請在功能查詢塊內新增新功能。支援查詢的功能的瀏覽器可以渲染功能查詢塊內的更新 CSS。使用先編寫良好支援的 CSS，然後根據支援來增強功能的方法。

一種方法是使用線上測試工具，例如 Sauce Labs，如 跨瀏覽器測試 模組中所述。

您現在掌握了為舊版瀏覽器提供回退 CSS 並自信地測試新功能的知識。您現在應該對使用任何可能出現的新的技術充滿信心。

現在您已經完成了關於 CSS 佈局的文章，是時候透過我們模組的評估來測試您的理解了：基本佈局理解。

• @supports at-規則
• CSS at-規則
• 使用功能查詢
• CSS 條件規則 模組

• 上一個
• 概述：CSS 佈局
• 下一個