selectmenuの導(dǎo)入：革新的なフォームコントロール

この記事では、実験的なselectmenuフォームコントロールに分かれ、従來のスタイリング機(jī)能を強(qiáng)調(diào)しています<select></select>要素。その開発の背後にある理由と、Webフォームの設(shè)計(jì)に革命をもたらす可能性を探ります。

Web開発者は、主要なプラットフォームの欠陥として、スタイリングフォームコントロールの制限を頻繁に引用しています。 2020年のCSS調(diào)査では、トップ10の最も必要な改善の中でフォームスタイリングをランク付けしました。<select></select>スタイルを効果的にスタイリングするための最も問題のある要素として具體的に識(shí)別されます。一方、aのボタン部分<select></select>スタイルが比較的簡単で、ドロップダウン內(nèi)のオプションをカスタマイズすることは非常に挑戦的なままです。

その結(jié)果、多くの設(shè)計(jì)システムとコンポーネントライブラリは、HTML、CSS、およびJavaScriptを使用して、ゼロからカスタム選択要素を作成します。ただし、適切なアクセシビリティ、キーボードナビゲーション、および正確なポップアップポジショニングを?qū)g現(xiàn)することは複雑で時(shí)間がかかり、多くの場(chǎng)合、アクセスできない選択メニューになります。

selectmenuコントロールは、組み込みの非常にスタイル性のある代替品を提供することにより、この永続的な問題を解決することを目的としています。

オープンUIイニシアチブ

オープンUIイニシアチブは、開発者、デザイナー、ブラウザーの実裝者が関與する共同の取り組みであり、 selectmenuの開発を推進(jìn)しています。その目標(biāo)は、開発者がselectmenu 、ドロップダウン、チェックボックス、ラジオボタンなどの組み込みのUIコントロールを完全にスタイルし、拡張できるようにすることです。これには、実裝の仕様を作成し、アクセシビリティ要件に対処することが含まれます。

まだ初期段階にある間、プロジェクトは急速に進(jìn)行しており、結(jié)果は有望です。オープンUIコミュニティに參加して、その開発に貢獻(xiàn)できます。

selectmenuコントロール

Chromium（主にMicrosoft Edge Teamによって、Google Chromeとのコラボレーション）で実裝されたselectmenu 、おなじみのオプション選択エクスペリエンスを提供する新しい組み込みコントロールです。選択した値を表示するボタン、ボタンをクリックすることでトリガーされるポップアップ、ポップアップ內(nèi)のオプションのリストが備わっています。

なぜ新しい名前ですか？

「selectmenu」という名前はプレースホルダーです。主に既存のものを大幅に変更するため<select></select>要素は、広範(fàn)囲にわたる互換性の問題を引き起こします。したがって、 selectmenuは獨(dú)立したコントロールとして設(shè)計(jì)されています。

はじめる

まだ制作可能ではありませんが、次のようにselectmenuを試してみることができます。

1. Chromiumベースのブラウザ（ChromeまたはEdge）のカナリアバージョンを使用します。
2. 「Experimental Webプラットフォームの機(jī)能」フラグをabout:flagsとRestartで有効にします。
3. 交換する<select></select>selectmenuを使用したWebページの要素。

基本的な機(jī)能はデフォルトで提供されますが、 selectmenuの真の力は、そのスタイリングと拡張性オプションにあります。

フィードバックが奨勵(lì)されました！

オープンUIチームはフィードバックを歓迎します。早期テストは、コントロールの改善に役立ちます。オープンUI GitHubリポジトリを介してバグまたは制限を報(bào)告します。

selectmenu解剖學(xué)を理解する

selectmenuスタイリングには、その內(nèi)部構(gòu)造を理解する必要があります。

• <selectmenu></selectmenu> ：ボタンとリストボックスを含むルート要素。
• <button></button> ：リストボックスの可視性をトリガーします。
• <label></label> ：（オプション）選択した値を表示します。必ずしも內(nèi)部ではありません<button></button>。
• <listbox></listbox> ：ラップ<option></option>そして<optgroup></optgroup>要素。
• <optgroup></optgroup> ：グループ<option></option>オプションのラベル付きの要素。
• <option></option> ：選択可能な値を表します。

デフォルトの動(dòng)作

selectmenuの動(dòng)作を模倣します<select></select>。最小限のマークアップで十分です：

<selectmenu>
  <option value="Option 1">オプション1</option>
  <option value="Option 2">オプション2</option>
  <option value="Option 3">オプション3</option>
</selectmenu>

デフォルト<button></button>、<label></label> 、 そして<listbox></listbox>要素は自動(dòng)的に生成されます。

::part()とのスタイリング

::part() pseudo-elementは、個(gè)々のコンポーネントのスタイリングを許可します。

 .My-Select-Menu :: part（button）{
  色：白;
  バックグラウンドカラー：＃f00;
  パディング：5px;
  ボーダーラジウス：5px;
}

.My-Select-Menu :: part（listbox）{
  パディング：10px;
  マージントップ：5px;
  境界線：1px固體赤;
  ボーダーラジウス：5px;
}

これにより、ボタンとリストボックスがスタイリングされます。 ::part()で動(dòng)作します<button></button>、<label></label> 、 そして<listbox></listbox>。

カスタムマークアップ

コントロールを大きくするには、名前付きスロットを使用してデフォルトマークアップを交換します。

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">開ける</button>
    <span class="label">オプションを選択します</span>
  </div>
  <option value="Option 1">オプション1</option>
  <option value="Option 2">オプション2</option>
  <option value="Option 3">オプション3</option>
</selectmenu>

slot="button"屬性は、デフォルトボタンを置き換えます。 behavior="button"ボタンの動(dòng)作とアクセシビリティを割り當(dāng)てます。同様の手法が適用されます<listbox></listbox>。

拡張マークアップ

機(jī)能を拡張するために新しい要素を追加します：

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3>花</h3>
      <option value="Rose">薔薇</option>
      <h3>木</h3>
      <option value="Willow">柳</option>
    </div>
  </div>
</selectmenu>

これにより、カスタムグループ化とスタイリングが追加されます。

ShadowDomの交換（Advanced）

完全に制御するには、 attachShadow()を使用してShadow Domを交換します。これは最大のカスタマイズを提供しますが、より高度な手法が必要です。

結(jié)論

selectmenu 、スタイリングと伝統(tǒng)の拡張において大幅な改善を提供します<select></select>要素。組み込みのブラウザの実裝により、アクセシビリティと適切なポジショニングが保証されます。まだ実験的ですが、 selectmenu Webフォームの設(shè)計(jì)を強(qiáng)化するための計(jì)り知れない可能性を保持しています。 Open UIイニシアチブに參加して、その將來を形作るのを支援します。

以上がSelectMenu HTMLタグの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。