スパイシーなセクション

内蔵タブ機能を備えたHTMLを想像してください！それはデイブであり、オープンゥイの「タブベンジャーズ」が探求しているエキサイティングなアイデアです。彼らの研究は、驚くべきひねりを明らかにしています：普遍的な<tabs></tabs>要素は最良の解決策ではありません。

さまざまなプラットフォーム（オペレーティングシステム、ゲーム、ライブラリ、Webコンポーネント）にわたる既存のタブ実装に関する広範な調査が、重要な設計のバリエーションを強調しました。チームは、設計アフォーダンスに焦点を当てること - UIがどのように提示するか - が重要であると結論付けました。クラシックフォルダーのようなタブデザインは1つのアプローチですが、アコーディオンと<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-Affordances：
    [画面と（最大幅：40em）]崩壊|
    [スクリーンと（最小幅：60em）] Tab-Bar;
  表示：ブロック;
}

このアプローチを示す例は、レスポンシブデザインを示すビデオを含め、すぐに利用できます。現在、カスタムWebコンポーネントですが、このコンセプトがネイティブのHTMLおよびCSSサポートにつながる議論を刺激し、開発者のためのタブの実装を簡素化し、アクセシビリティを改善することを期待しています。

詳細については、Webコンポーネントの力に関する洞察については、Shoptalk 486（15:17）、Hidde de Vriesの研究、およびデイブのプレゼンテーション「SuperPowersを備えたHTML」を調べてください。

以上がスパイシーなセクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。