Responsive Lösungen für Feature -Vergleichstabellen

Schlüsselpunkte

• reaktionsschnelles Webdesign und Tabellen sind nicht perfekt übereinstimmend, aber aufgrund ihrer stabilen Struktur gibt es immer noch Raum für Verbesserungen der funktionalen Vergleichstabellen.
• Eine erfolgreiche Reaktionsfunktionsvergleichstabelle sollte das Produkt leicht unterscheiden, die Funktion klar identifizieren und zeigen, ob die Produktfunktion vorliegt.
• Zwei Optionen zum Erstellen von Responsive -Feature -Vergleichstabellen gehören: Verwenden von Flexbox (Modern Browser -Unterstützungsrate übersteigt 80%, 93% Support -Rate einschließlich Browserversionen, die Präfix erfordern) und die Verwendung zusätzlicher Tags und ARIA -Rollen (besser für ältere Versionen von Android geeignet sind und iOS).
• Ob die Option ausgewählt wird, ist Lesbarkeit, Zugänglichkeit und Verfügbarkeit zu berücksichtigen, wenn reaktionsschnelle Funktionstabellen entwerfen, um sicherzustellen, dass sie für alle Benutzer, einschließlich Benutzern mit Behinderungen, freundlich und zugänglich sind.

reaktionsschnelles Webdesign und Tabellen sind nicht die besten Partner. Viele Menschen haben dies untersucht und viele Methoden entwickelt (von denen einige kürzlich in einem Artikel über SitePoint zusammengefasst wurden). Wir sind jedoch noch weit von einer perfekten Lösung entfernt und die Suche geht weiter.

Während die allgemeine Situation noch komplex ist, können einige spezifische Situationen mehr Aufmerksamkeit erregen. Was ich hier spreche, ist die Funktionsvergleichstabelle. Wir können es an vielen Orten begegnen-wenn Sie ein Auto auswählen und versuchen, die zusätzlichen Optionen zu wählen. im Austausch für Geld auf dem Portal.

Da diese Art von Tabelle eine relativ stabile und konsistente Struktur aufweist, kann sie ihr Verhalten besser steuern, wenn sie auf einem kleinen Bildschirm angezeigt wird.

Struktur der Funktionsvergleichstabelle

Die klassische Vergleichstabelle legt mindestens drei Produkte (in Spalten gezeigt) zusammen, während die Funktionen in der folgenden Zeile angezeigt werden. In einer traditionellen Struktur enthält die erste Zelle jeder Zeile den Namen der Funktion, während die Zelle unter jedem Produkt ein Scheck einen oder ein anderes Symbol enthält, das zeigt, ob die Funktion zum Produkt gehört. Wir können großartige Beispiele für diese klassische Struktur finden: hier, hier und hier.

Basierend auf diesen Beispielen können wir den folgenden Code verwenden, um die Struktur der Vergleichstabelle zusammenzufassen:

<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>

Es ist einfach, die oben genannten Elemente zu identifizieren: Produktname, Feature-Name und Markierungen, die zeigen, ob die Funktion existiert oder nicht existiert. Beachten Sie, dass der ✔ Code das ✔ ✔ ✔ ✔ ✔ ✔ ✔) darstellt.

Jetzt sind wir die Wurzel des Problems. Damit die Tabelle die optimale Effizienz bei niedrigen Bildschirmbreiten aufrechterhält, müssen die folgenden Bedingungen erfüllt sein:

• Benutzer müssen in der Lage sein, Produkte leicht zu unterscheiden
Funktionen müssen leicht erkannt werden;
• Es muss klar sein, ob die Funktionen des Produkts existieren.
Der beste Weg, um dieses Ergebnis zu erzielen, besteht darin, die Zelle, die den Merkmalsnamen enthält, auf die anderen drei Zellen zu bewegen, die die Vorhandensein oder Abwesenheit der Funktion markieren.

Plan 1: FlexBox

Wie machen wir das? Eine Antwort ist Flexbox. Wenn Sie nicht wissen, was Flexbox ist oder eine Überprüfung benötigt, können Sie den aktuellen Artikel von Nick Saloum zu diesem Thema ansehen. Der Rest von uns kann in die Lösung eintauchen.

Zunächst müssen wir sicherstellen, dass unsere Änderungen nur auf kleinen Bildschirmen stattfinden. Dazu verwenden wir Medienabfragen, um unseren Code zu lokalisieren, indem wir die klassische Breite von 768 Pixel als Haltepunkt verwenden:

<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>

Es gibt einige wichtige Dinge in diesen Regeln, die magische Effekte erzielen können:

• Wir ändern den Anzeigwert der Tabellenzeile, um seine Kinderelemente in Zeilen gleichmäßig verteilt zu haben.
• Als nächstes weist wir die Zellen an, sie in normalen Behältern zu normalisieren (die Aufrechterhaltung der Standardwerte verursacht Störungen mit Tabellenregeln, insbesondere in Bezug auf die Größe).
• Der nächste Schritt besteht darin, die erste Zelle in jeder Zeile zu lokalisieren, um 100% breit zu sein und die Hintergrundfarbe zu ändern, um den Kontrast zu verbessern. Die Prozessregeln halten es ganz oben in den anderen drei Zellen - genau das brauchen wir.
• Wir nehmen die Änderungen vor, indem wir den ersten Th versteckt haben, damit nichts über dem Produktnamen angezeigt wird.

Sie können die Demo hier anzeigen.

Offensichtlich hängt die Wirksamkeit der Lösung nur vom Grad der Unterstützung ab. Laut Caniuse.com bietet Flexbox für die meisten modernen Varianten über 80% und über 93%, wenn wir frühere Versionen von Browsern aufnehmen, die Präfixe oder Verwendungsregeln benötigen. IE -Unterstützung beginnt mit IE10 (nur der Syntax 2012), während IE11 es vollständig unterstützt. Da wir uns hauptsächlich auf die Unterstützung auf dem kleinen Bildschirm konzentrieren, können wir die mangelnde Unterstützung für frühere IE -Versionen ignorieren. Auf der mobilen Seite beginnt die Unterstützung mit Android 4.4 und iOS 7.1. Frühere Versionen erforderten Anbieterpräfixe und unterstützten keine Wrap -Funktionalität.

Sie sollten auch Fallback -Optionen wie das in Bootstrap verwendete Scrolling -Div angeben. Auf diese Weise haben Besucher außerhalb der Unterstützung noch eine andere Display -Alternative.

Schema 2: Zusätzliche Markierungen Aria Rolle

Wenn die meisten Browser, die Sie unterstützen möchten, keine Flexbox unterstützen, gibt es Alternativen. Tatsächlich ist dies die Lösung, die ich 2013 in einem echten Projekt verwendet habe. Wir brauchen einige zusätzliche Tags: Wir müssen eine zusätzliche Zeile hinzufügen, den Funktionsnamen kopieren. Während manuelle Vorgänge mühsam erscheinen können, können sie automatisch erfolgen, wenn Sie Informationen von einer Datenquelle lesen. Schließlich sollte der Code in unserem ersten Beispiel so aussehen:

@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 ist auch sehr einfach:

<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>

Um die Zugänglichkeit zu verbessern, können wir einen Schritt weiter gehen und Aria-Hidden = "True" verwenden, um zusätzliche Markierungen im Bildschirmleser zu verbergen. Auf diese Weise lesen Bildschirmleseranwendungen, die die Aria-versteckten Spezifikationen respektieren, nicht zweimal doppelte Inhalte.

Dies ist eine Demonstration der zweiten Lösung.

Schlussfolgerung

Wir haben zwei Möglichkeiten gefunden, die Vergleichstabelle wirklich reaktionsschnell zu machen. Beide haben ihre Vor- und Nachteile. Letztendlich sollte die Wahl von Ihrem Publikum abhängen. In den meisten Fällen sollte die erste Option (mit einem Fallback -Plan) ausreichen. Wenn Sie wirklich ältere Versionen von Android und iOS eingehen müssen, können Sie eine zweite Option bereitstellen. In beiden Fällen sieht Ihre Funktionsvergleichstabelle von nun an unabhängig von der Bildschirmgröße viel besser aus.

(Der FAQ-Teil im Originaldokument wird hier weggelassen, da der Inhalt dieses Teils nicht mit dem pseudooriginalen Ziel übereinstimmt und zu lang ist. Bei Bedarf kann die Pseudooriginalität des FAQ-Teils behandelt werden getrennt.)

Das obige ist der detaillierte Inhalt vonResponsive Lösungen für Feature -Vergleichstabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!