辛辣的章节

如果 HTML 有“选项卡”会怎么样？ 我说那将很酷。Dave 一直在花时间和精力，以及来自 OpenUI 的一组“Tabvengers”，在这个项目上工作。大量的研究 导致了一些情节的转折

我们的研究表明，对于构成选项卡控件的内容有很多变化。标记模式也有很多变化。在操作系统、视频游戏、jQuery、React 组件和网络组件中都有变化。但我们认为我们已经提炼了一些这片海洋，并且就可能构成一个好的 <tabs> 元素达成了一致意见……它不是 <tabs> ！！！

这有点类似于 设计可供性。当然，看起来像真正的纸质牛皮纸文件夹的 UI 是一种设计可供性。但在功能上类似于一次一个的手风琴。手风琴与 <details>/<summary> 元素 相当相似——所以也许 HTML 可以做的最有用的事情是让我们能够使用不同的设计可供性，甚至可以根据需要在它们之间切换（例如，在不同的宽度下）。

那么问题是，什么 HTML 可以支持所有这些不同的设计？ 这实际上有一个非常令人满意的答案：常规的基于标题的语义 HTML，就像这样

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

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

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

这意味着……

1. 基本 HTML 是健全的，可以作为一种设计选择呈现得很好
2. 标题可以在特定设计中成为“选项卡”
3. 标题可以在特定设计中成为“摘要”

这是 Tabvengers 所谓的 <spicy-sections> 的基础。只需将该语义 HTML 包裹在网络组件中，然后使用 CSS 来控制哪种类型的设计在何时生效。

<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 做了一个例子

我也做了一个，以感受一下

如果您身处无法轻松弹出并调整浏览器窗口大小以感受一下的地方，这里有一段视频

这目前是一个完全手工制作的网络组件，但也许它可以激发规范编写和浏览器实现层面的所有正确对话，以便我们有一天在“真实”的 HTML 和 CSS 中获得类似的东西。我会对此感到高兴，因为这意味着更少的开发人员（包括我自己）需要从头开始编写“选项卡”，并且可能会在过程中搞砸可访问性。越多越好。

如果您想了解更多关于所有这些内容的信息，请查看 ShopTalk 486 at 15:17。另外，这里还有 来自 Hidde de Vries 的一些探索。如果您对网络组件及其如何对像这样的事情非常有用感兴趣，不仅限于此，更重要的是 Dave 最近的演讲 HTML with Superpowers。