Spicy Sections

Imagine HTML with built-in tab functionality! That's the exciting idea Dave and the "Tabvengers" from OpenUI are exploring. Their research reveals a surprising twist: a universal <tabs></tabs> element isn't the best solution.

Extensive research into existing tab implementations across various platforms (operating systems, games, libraries, and web components) highlighted significant design variations. The team concluded that focusing on design affordances – how the UI presents itself – is key. While the classic folder-like tab design is one approach, it's functionally similar to accordions and <details>/<summary></summary></details> elements. The most effective solution might be to support multiple design affordances and allow switching between them (e.g., based on screen size).

The elegant solution? Leveraging existing semantic HTML:

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

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

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

This approach offers several advantages:

1. Solid Foundation: The basic HTML structure is valid and renders correctly.
2. Design Flexibility: Headers can be styled as tabs or summary elements depending on the chosen design.
3. Adaptability: Different design affordances can be implemented using CSS.

The Tabvengers are proposing <spicy-sections></spicy-sections> – a web component wrapping this semantic HTML. CSS then dynamically controls the design based on factors like screen width:

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

Examples illustrating this approach are readily available, including a video demonstrating the responsive design. While currently a custom web component, the hope is that this concept will inspire discussions leading to native HTML and CSS support, simplifying tab implementation for developers and improving accessibility.

For more details, explore ShopTalk 486 (15:17), Hidde de Vries' research, and Dave's presentation "HTML with Superpowers" for insights into the power of web components.

The above is the detailed content of Spicy Sections. For more information, please follow other related articles on the PHP Chinese website!