Solutions réactives pour les tables de comparaison des fonctionnalités

Points clés

• La conception et les tables Web réactives ne sont pas parfaitement adaptées, mais en raison de leur structure stable, il y a encore place à l'amélioration des tables de comparaison fonctionnelle.
• Une table de comparaison de fonctions réactive réussie doit facilement distinguer le produit, identifier clairement la fonction et montrer si la fonction du produit existe.
• Deux options pour créer des tables de comparaison de fonctionnalités réactives incluent: l'utilisation de Flexbox (le taux de support moderne du navigateur dépasse 80%, le taux de support 93%, y compris les versions du navigateur qui nécessitent un préfixe) et l'utilisation de balises supplémentaires et de rôles ARIA (plus adaptés aux versions plus anciennes d'Android et iOS).
• si l'option est choisie, la lisibilité, l'accessibilité et la disponibilité doivent être prises en compte lors de la conception de tables de comparaison de fonctionnalités réactives pour s'assurer qu'ils sont conviviaux et accessibles à tous les utilisateurs, y compris les utilisateurs handicapés.

La conception et les tables Web réactifs ne sont pas les meilleurs partenaires. Beaucoup de gens ont étudié cela et ont conçu de nombreuses méthodes (dont certaines ont été récemment résumées dans un article sur SitePoint). Cependant, nous sommes encore loin d'une solution parfaite et la recherche se poursuit.

Bien que la situation générale soit encore complexe, certaines situations spécifiques peuvent attirer plus d'attention. Ce dont je parle ici, c'est le tableau de comparaison des fonctions. Nous pouvons le rencontrer dans de nombreux endroits - lors du choix d'une voiture et essayant de décider des options supplémentaires à choisir; En échange d'argent sur le portail.

Étant donné que ce type de table a une structure relativement stable et cohérente, il peut mieux contrôler son comportement lorsqu'il est affiché sur un petit écran.

Structure de la table de comparaison des fonctions

La table de comparaison classique rassemble au moins trois produits (illustrés dans les colonnes), tandis que les fonctions sont affichées dans la ligne ci-dessous. Dans une structure traditionnelle, la première cellule de chaque ligne contient le nom de la fonction, tandis que la cellule sous chaque produit contient une coche ou un autre symbole qui montre si la fonction appartient au produit. Nous pouvons trouver de grands exemples de cette structure classique: ici, ici et ici.

Sur la base de ces exemples, nous pouvons utiliser le code suivant pour résumer la structure du tableau de comparaison:

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

Il est facile d'identifier les éléments mentionnés ci-dessus: nom du produit, nom de fonctionnalité et marques qui montrent si la fonction existe ou non ou non. Notez que le code ✔ représente le caractère d'échec (✔).

Maintenant, nous sommes à l'origine du problème. Pour que le tableau maintienne une efficacité optimale à faible largeur d'écran, les conditions suivantes doivent être remplies:

• Les utilisateurs doivent être en mesure de distinguer facilement les produits;
Les fonctions doivent être facilement reconnues; et
Il est nécessaire d'être clair si les fonctions du produit existent.

La meilleure façon d'atteindre ce résultat est de déplacer la cellule contenant le nom de fonction vers le haut des trois autres cellules qui marquent la présence ou l'absence de la fonction.

Plan 1: Flexbox

Comment faisons-nous cela? Une réponse est Flexbox. Si vous ne savez pas ce qu'est Flexbox ou avez besoin d'une critique, vous pouvez consulter le récent article de Nick Salloum sur ce sujet. Le reste d'entre nous peut plonger dans la solution.

Tout d'abord, nous devons nous assurer que nos modifications ne se produisent que sur les petits écrans. Pour ce faire, nous utilisons des requêtes multimédias pour localiser notre code, en utilisant la largeur classique de 768 pixels comme point d'arrêt:

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

Il y a des choses importantes dans cet ensemble de règles qui peuvent réaliser des effets magiques:

• Nous modifions la valeur d'affichage de la ligne de table pour fléchir et dire que ses éléments enfants sont répartis uniformément en lignes.
• Ensuite, nous demandons aux cellules de les normaliser dans des conteneurs normaux (la préservation des valeurs par défaut entraînera une interférence avec les règles de la table, en particulier en termes de taille).
• L'étape suivante consiste à localiser la première cellule de chaque ligne à 100% de large et à modifier la couleur d'arrière-plan pour améliorer le contraste. Les règles de processus le maintiennent au sommet des trois autres cellules - c'est exactement ce dont nous avons besoin.
• Nous apportons les modifications en cachant le premier TH afin que rien ne soit affiché au-dessus du nom du produit.

Vous pouvez voir la démo ici.

Évidemment, l'efficacité de la solution dépend uniquement du degré de soutien. Selon Caniuse.com, Flexbox a plus de 80% de prise en charge pour la plupart des variantes modernes et plus de 93% si nous incluons des versions précédentes de navigateurs qui nécessitent des préfixes ou des règles d'utilisation. Le support IE commence par IE10 (seulement la syntaxe 2012), tandis que IE11 le prend en charge entièrement. Parce que nous nous concentrons principalement sur le support sur le petit écran, nous pouvons ignorer le manque de support pour les versions IE précédentes. Du côté mobile, le support commence par Android 4.4 et iOS 7.1. Les versions précédentes nécessitaient des préfixes des fournisseurs et ne prenaient pas en charge la fonctionnalité d'enveloppe.

Vous devez également fournir des options de secours telles que la div de défilement utilisée dans Bootstrap. De cette façon, les visiteurs en dehors du support ont encore une autre alternative d'affichage.

Schéma 2: Marquages ​​supplémentaires Aria Role

Si la plupart des navigateurs que vous souhaitez prendre en charge ne prennent pas en charge Flexbox, il existe des alternatives. En fait, c'est la solution que j'ai utilisée dans un vrai projet en 2013. Nous avons besoin de balises supplémentaires: nous devons ajouter une ligne supplémentaire, copier le nom de la fonction. Bien que les opérations manuelles puissent sembler fastidieuses, elles peuvent être effectuées automatiquement si vous lisez des informations à partir d'une source de données. Enfin, le code de notre exemple initial devrait ressembler à ceci:

@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 est également très simple:

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

Pour améliorer l'accessibilité, nous pouvons aller plus loin et utiliser Aria-Hidden = "true" pour masquer des marqueurs supplémentaires au lecteur d'écran. De cette façon, les applications de lecteur d'écran qui respectent les spécifications coiffées ARIA ne lisent pas le contenu en double deux fois.

Il s'agit d'une démonstration de la deuxième solution.

Conclusion

Nous avons trouvé deux façons de rendre la table de comparaison vraiment réactive. Les deux ont leurs avantages et leurs inconvénients. En fin de compte, le choix devrait dépendre de votre public. Pour la plupart des cas, la première option (avec un plan de repli) devrait être suffisante. Si vous avez vraiment besoin de répondre aux anciennes versions d'Android et d'iOS, vous pouvez déployer une deuxième option. Quoi qu'il en soit, votre table de comparaison de fonctionnalités sera beaucoup mieux à partir de maintenant, quelle que soit la taille de l'écran.

(La partie FAQ du document d'origine est omise ici parce que le contenu de cette partie ne correspond pas à l'objectif pseudo-original et est trop long. Si nécessaire, la pseudo-originalité de la partie FAQ peut être gérée séparément.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!