Tabs in HTML?

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Du weißt, was Tabs sind, Brian.

Ich meine… Du benutzt sie jeden Tag, auf jedem Betriebssystem. Jeder weiß, dass sie in jedem Werkzeugkasten existieren. Alles, was noch übrig ist, ist "einfach die Kuhpfade zu pflastern!" Aber wenn man es genau nimmt, ist es viel komplizierter als das.

Brian Kardell teilt einiges über den Fortschritt bei der Einführung von "Tabs" in HTML. Wir denken irgendwie, wir wissen, was sie sind, aber man muss wirklich spezifisch sein, wenn man mit Spezifikationen umgeht und sie definiert. Das ist knifflig. Selbst wenn man sich auf eine solide Definition geeinigt hat, ist ein HTML-Ausdruck davon nicht gerade klar. Es gibt alle möglichen Ausdrucksformen von Tabs, die alle auf ihre Weise Sinn ergeben. Stell dir vor, du markierst Tabs, bei denen du alle Tabs als eine Reihe von Links oder Buttons oben anordnest und dann darunter eine Reihe von Panels. Das nennen sie "Table of Contents"-Markup, und das macht irgendwie logisch Sinn ("das Markup sieht bereits wie Tabs aus"). Aber es hat auch einige Probleme, und es sieht so aus, als ob Abschnitte mit Überschriften praktischer sind ("Wenn du die Überschrift hast, kannst du das Inhaltsverzeichnis erstellen, aber nicht umgekehrt"). Spicy Sections sind ein völlig anderes Muster. Und das ist nur ein Problem, dem sie sich gegenübersehen.

Ich beneide die Arbeit nicht, aber ich freue mich auf den Fortschritt, nicht zuletzt, weil die Erstellung von Tabs eine knifflige Angelegenheit ist. Nicht schwer zu machen, aber sehr schwer, es richtig zu machen. Ich habe in der Vergangenheit darüber gesprochen, wie ich Tabs viele Male in jQuery erstellt habe, wo nur ein Klick-Handler auf einer Reihe von Links einige passende Divs darunter ausblendet oder anzeigt. Das "funktioniert", wenn man Barrierefreiheit komplett ignoriert (z.B. wie man zwischen Tabs navigiert, Fokusverwaltung, ARIA-Erwartungen usw.).

Hier ist die ShopTalk-Diskussion und hier ist eine andere Perspektive in einem Gespräch, das ich mit Stephen auf CodePen Radio hatte, wo wir auf unsere <Tabs /> React-Komponente auf CodePen eingehen.

Direkter Link →