辛辣的部分

想像一下使用內置選項卡功能的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中文網其他相關文章！