Würzige Abschnitte

Stellen Sie sich HTML mit integrierter Registerkartenfunktionalität vor! Das ist die aufregende Idee, die Dave und die "Tabvengers" von Openui erforschen. Ihre Forschung zeigt eine überraschende Wendung: eine universelle<tabs></tabs> Element ist nicht die beste Lösung.

Umfangreiche Forschungen zu bestehenden TAB -Implementierungen auf verschiedenen Plattformen (Betriebssysteme, Spiele, Bibliotheken und Webkomponenten) haben signifikante Designvariationen hervorgehoben. Das Team kam zu dem Schluss, dass es der Schlüssel ist, sich auf Design -Leistungen zu konzentrieren - wie sich die Benutzeroberfläche präsentiert -. Während das klassische ordnerähnliche Registerkarte ein Ansatz ist, ähnelt es funktional ähnlich wie Akkordeons und <details>/<summary></summary></details> Elemente. Die effektivste Lösung könnte darin bestehen, mehrere Design -Leistungen zu unterstützen und zwischen ihnen zu wechseln (z. B. basierend auf der Bildschirmgröße).

Die elegante Lösung? Nutzung bestehender semantischer HTML:

<h2> Kopfball</h2>
<p>Inhalt</p>

<h2>Kopfball</h2>
<p>Inhalt</p>

<h2>Kopfball</h2>
<p>Inhalt</p>

Dieser Ansatz bietet mehrere Vorteile:

1. Solid Foundation: Die grundlegende HTML -Struktur ist gültig und rendert korrekt.
2. Designflexibilität: Header können je nach gewählter Design als Registerkarten oder zusammenfassende Elemente gestaltet werden.
3. Anpassungsfähigkeit: Unter Verwendung von CSS können unterschiedliche Design -Leistungen implementiert werden.

Die Tabvengers schlagen vor<spicy-sections></spicy-sections> - Eine Webkomponente, die diese semantische HTML einwickelt. CSS steuert dann das Design dynamisch basierend auf Faktoren wie Bildschirmbreite:

<spicy-sections>
  <h2>Kopfball</h2>
  <p>Inhalt</p>

  <h2>Kopfball</h2>
  <p>Inhalt</p>

  <h2>Kopfball</h2>
  <p>Inhalt</p>
</spicy-sections>

würzige Abschnitte {
  -Konst-MQ-Tafeln:
    [Bildschirm und (max. Width: 40EM)] Zusammenbruch |
    [Bildschirm und (Minwidth: 60EM)] Tab-Bar;
  Anzeige: Block;
}

Beispiele, die diesen Ansatz veranschaulichen, sind leicht verfügbar, einschließlich eines Videos, das das reaktionsschnelle Design demonstriert. Während es derzeit eine benutzerdefinierte Webkomponente ist, ist die Hoffnung, dass dieses Konzept zu Diskussionen inspiriert wird, die zu einer nativen Unterstützung für HTML- und CSS -Unterstützung für native HTML und CSS führen, die TAB -Implementierung für Entwickler vereinfachen und die Zugänglichkeit verbessern.

Weitere Informationen finden Sie in ShopTalk 486 (15:17), der Forschung von Hidde de Vries und Daves Präsentation "HTML with Supermächte" für Einblicke in die Leistung von Webkomponenten.

Das obige ist der detaillierte Inhalt vonWürzige Abschnitte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!