Spicy Sections

Was wäre, wenn HTML „Tabs“ hätte? Das wäre cool, sage ich. Dave hat einen Teil seiner Zeit und Energie zusammen mit einer Gruppe von „Tabvengers“ von OpenUI darauf verwendet. Viel Recherche führt zu einer kleinen Wendung

Unsere Recherche zeigte, dass es viele Variationen dessen gibt, was ein Tab-Steuerelement ausmacht. Es gibt auch viele Variationen bei den Markup-Mustern. Es gibt Variationen, die in Betriebssystemen, Videospielen, jQuery, React-Komponenten und Webkomponenten geschrieben sind. Aber wir glauben, dass wir einen Teil dieses Ozeans eingedämmt und einen vernünftigen Konsens darüber erzielt haben, was ein gutes <tabs> Element ausmachen könnte… und es ist nicht <tabs>!!!

Es läuft irgendwie auf Design-Affordanzen hinaus. Sicher, die Art von UI, die wie buchstäbliche Papier-Mappen aussieht, ist eine Art Design-Affordanz. Aber sie ist funktional ähnlich wie ein Akkordeon, das nur eine Sache auf einmal zulässt. Und Akkordeons sind ziemlich ähnlich zu <details>/<summary> Elementen — also vielleicht das Hilfreichste, was HTML tun könnte, ist uns zu erlauben, *unterschiedliche* Design-Affordanzen zu verwenden und vielleicht sogar je nach Bedarf zwischen ihnen zu wechseln (z. B. bei unterschiedlichen Breiten).

Dann stellt sich die Frage: Welches HTML würde all diese verschiedenen Designs unterstützen? Darauf gibt es tatsächlich eine ziemlich befriedigende Antwort: ganz normales, auf Headern basierendes, semantisches HTML, also so etwas wie

<h2>Header</h2>
<p>Content</p>

<h2>Header</h2>
<p>Content</p>

<h2>Header</h2>
<p>Content</p>

Was bedeutet…

1. Das Basis-HTML ist solide und kann als eine Designwahl problemlos gerendert werden
2. Die Header können in dieser speziellen Designwahl zu einem „Tab“ werden
3. Die Header können in dieser speziellen Designwahl zu einer „Zusammenfassung“ werden

Dies ist die Grundlage dessen, was die Tabvengers <spicy-sections> nennen. Wickeln Sie einfach dieses semantische HTML in die Webkomponente ein und verwenden Sie dann CSS, um zu steuern, welcher Designtyp wann aktiv wird.

<spicy-sections>
  <h2>Header</h2>
  <p>Content</p>

  <h2>Header</h2>
  <p>Content</p>

  <h2>Header</h2>
  <p>Content</p>
</spicy-sections>

spicy-sections {
  --const-mq-affordances:
    [screen and (max-width: 40em) ] collapse |
    [screen and (min-width: 60em) ] tab-bar;
  display: block;
}

Brian Kardell hat ein Beispiel erstellt

Ich habe auch eines erstellt, um ein Gefühl dafür zu bekommen

Hier ist ein Video für den Fall, dass Sie sich an einem Ort befinden, an dem Sie nicht einfach ein Browserfenster öffnen und die Größe ändern können, um selbst ein Gefühl dafür zu bekommen

Dies ist vorerst eine komplett handgefertigte Webkomponente, aber vielleicht kann sie die richtigen Gespräche auf Ebene der Spezifikationserstellung und Browser-Implementierung anstoßen, so dass wir eines Tages etwas Ähnliches in „echtem“ HTML und CSS bekommen. Ich wäre darüber glücklich, denn das bedeutet, dass weniger Entwickler (einschließlich mir) „Tabs“ von Grund auf neu codieren müssen und dabei wahrscheinlich die Barrierefreiheit vermasseln. Je mehr davon, desto besser.

Wenn Sie mehr über all das erfahren möchten, schauen Sie sich ShopTalk 486 bei 15:17 an. Außerdem gibt es hier einige Erkundungen von Hidde de Vries. Und wenn Sie mehr über Webkomponenten und deren unglaublich nützliche Anwendung erfahren möchten, nicht nur für Dinge wie diese, sondern für viel mehr, sehen Sie sich Dave's aktuellen Vortrag HTML with Superpowers an.