Sections épicées

Imaginez HTML avec une fonctionnalité d'onglet intégrée! C'est l'idée passionnante que Dave et les "TabVengers" d'OpenUi explorent. Leurs recherches révèlent une tournure surprenante: un universel<tabs></tabs> L'élément n'est pas la meilleure solution.

Des recherches approfondies sur les implémentations d'onglet existantes sur diverses plateformes (systèmes d'exploitation, jeux, bibliothèques et composants Web) ont mis en évidence des variations de conception significatives. L'équipe a conclu que se concentrer sur les possibilités de conception - comment l'interface utilisateur se présente - est la clé. Bien que la conception de l'onglet classique en forme de dossier soit une approche, elle est fonctionnellement similaire aux accordéons et <details>/<summary></summary></details> Éléments. La solution la plus efficace pourrait être de prendre en charge plusieurs possibilités de conception et de permettre la commutation entre elles (par exemple, en fonction de la taille de l'écran).

La solution élégante? Tirant parti de HTML sémantique existant:

<h2 id="Tête"> Tête</h2>
<p>Contenu</p>

<h2 id="Tête">Tête</h2>
<p>Contenu</p>

<h2 id="Tête">Tête</h2>
<p>Contenu</p>

Cette approche offre plusieurs avantages:

1. Fondation solide: la structure HTML de base est valide et rend correctement.
2. Flexibilité de conception: les en-têtes peuvent être appelés comme des onglets ou des éléments sommaires en fonction de la conception choisie.
3. Adaptabilité: Différentes possibilités de conception peuvent être implémentées à l'aide de CSS.

Les TabVengers proposent<spicy-sections></spicy-sections> - Un composant Web enroulant ce HTML sémantique. CSS contrôle ensuite dynamiquement la conception en fonction de facteurs tels que la largeur d'écran:

<spicy-sections>
  <h2 id="Tête">Tête</h2>
  <p>Contenu</p>

  <h2 id="Tête">Tête</h2>
  <p>Contenu</p>

  <h2 id="Tête">Tête</h2>
  <p>Contenu</p>
</spicy-sections>

Sections épicées {
  --Const-MQ-Affordances:
    [Écran et (max-largeur: 40EM)] effondrement |
    [Écran et (Min-Width: 60EM)] Tab-Bar;
  Affichage: bloc;
}

Des exemples illustrant cette approche sont facilement disponibles, y compris une vidéo démontrant la conception réactive. Bien qu'actuellement un composant Web personnalisé, l'espoir est que ce concept inspirera les discussions menant à la prise en charge du HTML et du CSS natives, simplifiant la mise en œuvre de l'onglet pour les développeurs et améliorant l'accessibilité.

Pour plus de détails, explorez Shoptalk 486 (15:17), les recherches de Hidde de Vries et la présentation de Dave "HTML avec des superpuissances" pour un aperçu de la puissance des composants Web.

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!