功能比較表的響應解決方案

關鍵要點

• 響應式網頁設計和表格並非完美契合，但由於其結構穩定，功能比較表格仍有改進空間。
• 成功的響應式功能比較表格應輕鬆區分產品、清晰標識功能，並顯示產品功能是否存在。
• 創建響應式功能比較表格的兩種方案包括：使用Flexbox（現代瀏覽器支持率超過80%，包括需要前綴的瀏覽器版本在內支持率達93%）和使用額外的標記和ARIA 角色（更適合舊版Android 和iOS）。
• 無論選擇哪種方案，在設計響應式功能比較表格時，都必須考慮可讀性、可訪問性和可用性，確保其對所有用戶（包括殘疾用戶）友好且易於訪問。

響應式網頁設計與表格並非最佳拍檔。許多人對此進行了研究，並設計了許多方法（其中一些方法最近在 SitePoint 上的一篇文章中進行了總結）。然而，我們距離完美的解決方案還有很長的路要走，搜索仍在繼續。

雖然通用情況仍然很複雜，但某些特定情況可以得到更多關注。我在這裡談論的是功能比較表。我們在許多地方都能遇到它——在選擇汽車並試圖決定選擇哪些額外選項時；在比較套餐和功能的網站託管網站上；在任何允許您決定需要哪些功能以換取金錢的基於會員制的門戶網站上。

由於這種表格具有相對穩定和一致的結構，因此在小屏幕上顯示時，可以更好地控制其行為。

功能比較表的結構

經典的比較表將至少三個產品（顯示在列中）放在一起，而功能則顯示在下面的行中。在傳統結構中，每行的第一個單元格包含功能的名稱，而每個產品下的單元格則包含複選標記或其他一些符號，顯示該功能是否屬於該產品。我們可以找到這種經典結構的絕佳示例：這裡、這里和這裡。

根據這些示例，我們可以使用以下代碼總結比較表的結構：

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

很容易識別前面提到的元素：產品名稱、功能名稱以及顯示功能是否存在或不存在的標記。請注意，✔ 代碼表示複選標記 (✔) 字符。

現在我們來到了問題的根源。為了使表格在低屏幕寬度下保持最佳效率，必須滿足以下幾個條件：

• 用戶必須能夠輕鬆區分產品；
• 功能必須易於識別；並且
• 必須清楚產品的功能是否存在。

實現此結果的最佳方法是將包含功能名稱的單元格移到標記功能存在或不存在的其他三個單元格的頂部。

方案一：Flexbox

我們如何做到這一點？一個答案是 Flexbox。如果您不知道 Flexbox 是什麼，或者需要復習一下，您可以查看 Nick Salloum 最近關於此主題的文章。我們其他人可以深入研究解決方案。

首先，我們需要確保我們的更改僅在小屏幕上發生。為此，我們使用媒體查詢來定位我們的代碼，使用 768 像素的經典寬度作為斷點：

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

這組規則中有一些重要的事情可以實現神奇的效果：

• 我們將表格行的 display 值更改為 flex，並告訴其子元素以行方式均勻分佈。
• 接下來，我們指示單元格採用 display:block 來將它們規範化為普通容器（保留默認值會帶來表格規則的干擾，尤其是在大小方面）。
• 下一步是定位每行中的第一個單元格，使其寬度為 100%，並更改背景顏色，以增強對比度。流程規則使其保持在其他三個單元格的頂部——這正是我們需要的。
• 我們通過隱藏第一個 th 來完成更改，這樣產品名稱上方就不會顯示任何內容。

此處可以查看演示。

顯然，解決方案的有效性僅取決於其支持程度。根據 caniuse.com 的數據，對於大多數現代變體，Flexbox 的支持率超過 80%，如果我們包括需要前綴或使用規則的先前版本的瀏覽器版本，則支持率超過 93%。 IE 的支持從 IE10 開始（只有 2012 年的語法），而 IE11 則完全支持。因為我們主要關注小屏幕上的支持，所以我們可以忽略對先前 IE 版本的支持缺乏。在移動方面，支持從 Android 4.4 和 iOS 7.1 開始。以前的版本需要供應商前綴並且不支持 wrap 功能。

您還應該提供後備方案，例如 Bootstrap 中使用的滾動 div。這樣，超出支持範圍的訪問者仍然會有另一種顯示替代方案。

方案二：額外的標記 ARIA 角色

如果您要支持的大部分瀏覽器都不支持 Flexbox，則存在替代方案。事實上，這是我在 2013 年的一個真實項目中使用的解決方案。我們需要一些額外的標記：我們必須添加一行額外的行，複製功能名稱。雖然手工操作可能顯得乏味，但如果從數據源讀取信息，則可以自動完成。最後，我們初始示例中的代碼應如下所示：

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

CSS 也非常簡單：

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 1</td>
    </tr>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 2</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 3</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 4</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

為了提高可訪問性，我們可以更進一步，使用 aria-hidden="true" 從屏幕閱讀器中隱藏額外的標記。這樣，那些尊重 aria-hidden 規範的屏幕閱讀器應用程序就不會兩次讀取重複的內容。

這是第二個解決方案的演示。

結論

我們在這裡找到了兩種方法來使比較表真正具有響應性。兩者都有其優缺點。最終，選擇的方案應取決於您的受眾群體。對於大多數情況，第一個選項（帶有後備方案）應該足夠了。如果您確實需要迎合舊版 Android 和 iOS，您可以部署第二個選項。無論哪種方式，從現在開始，您的功能比較表看起來都會好得多，無論屏幕尺寸如何。

(此處省略了原文檔中的FAQ部分，因為該部分內容與偽原創目標不符，且篇幅過長。如果需要，可以單獨處理FAQ部分的偽原創。)

以上是功能比較表的響應解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！