辛辣的部分

想象一下使用内置选项卡功能的HTML！这就是戴夫（Dave）和OpenUI的“ Tabvengers”的激动人心的想法。他们的研究揭示了一个令人惊讶的转折：通用<tabs></tabs>元素不是最好的解决方案。

对跨各种平台（操作系统，游戏，库和Web组件）的现有选项卡实现的广泛研究突出了显着的设计变化。该团队得出结论，关注UI的设计负担能力（UI）如何表现 - 是关键。虽然经典文件夹式标签设计是一种方法，但它在功能上与手风琴和<details>/<summary></summary></details>元素。最有效的解决方案可能是支持多个设计负担并允许它们之间切换（例如，基于屏幕尺寸）。

优雅的解决方案？利用现有语义HTML：

<h2>标题</h2>
<p>内容</p>

<h2>标题</h2>
<p>内容</p>

<h2>标题</h2>
<p>内容</p>

这种方法提供了几个优势：

1. 固体基础：基本的HTML结构是有效的，并且正确渲染。
2. 设计灵活性：根据所选设计，可以将标题作为选项卡或摘要元素进行样式。
3. 适应性：可以使用CSS实施不同的设计。

Tabvengers提议<spicy-sections></spicy-sections> - 包装此语义HTML的Web组件。然后，CSS基于屏幕宽度等因素动态控制设计：

<spicy-sections>
  <h2>标题</h2>
  <p>内容</p>

  <h2>标题</h2>
  <p>内容</p>

  <h2>标题</h2>
  <p>内容</p>
</spicy-sections>

辛辣段{
  -Const-MQ-frordances：
    [屏幕和（最大宽度：40em）]崩溃|
    [屏幕和（最小宽度：60EM）] tab-bar;
  显示：块;
}

说明这种方法的示例很容易获得，包括展示响应式设计的视频。虽然目前是自定义的Web组件，但希望该概念会激发导致本机HTML和CSS支持的讨论，从而简化开发人员的选项卡实现并改善可访问性。

有关更多详细信息，请探索ShopTalk 486（15:17），Hidde de Vries的研究以及Dave的演讲“与超级大国的HTML”，以洞悉Web组件的力量。

以上是辛辣的部分的详细内容。更多信息请关注PHP中文网其他相关文章！