ポップオーバー API のご紹介

Una Kravets

ポップオーバーはウェブ上のいたるところにあります。これらはメニュー、切り替えヒント、ダイアログに表示され、アカウント設定、開示ウィジェット、商品カードのプレビューとして表示されます。これらのコンポーネントがこれほど普及しているにもかかわらず、ブラウザでコンポーネントを構築する作業は依然として驚くほど面倒です。フォーカス、オープン状態とクローズ状態、コンポーネントへのアクセス可能なフック、エクスペリエンスの開始と終了のためのキーボード バインディングを管理するスクリプトを追加する必要があります。これらはすべて、ポップオーバーの有用かつ独自のコア機能の構築を開始する前に行う必要があります。

この問題を解決するために、Chromium 114 の popover API 以降、ポップオーバーを作成するための新しい宣言型 HTML API セットがブラウザに実装されます。

ポップオーバー属性

対応ブラウザ

  • 114
  • 114
  • 17

ソース

複雑さをすべて自分で管理する代わりに、popover 属性と後続の機能セットを使用してブラウザに処理を任せることができます。HTML ポップオーバーのサポート:

  • 最上位レイヤへのプロモーション。ポップオーバーはページの他の部分の上に別のレイヤに表示されるため、Z-Index を細かく調整する必要はありません。
  • ライトを閉じる機能。ポップオーバー領域の外側をクリックすると、ポップオーバーが閉じてフォーカスが戻ります。
  • デフォルトのフォーカス管理。ポップオーバーを開くと、次のタブ停止がポップオーバー内にあります。
  • ユーザー補助機能のキーボード バインディング。esc キーを押すと、ポップオーバーが閉じてフォーカスが戻ります。
  • ユーザー補助コンポーネント バインディング。ポップオーバー要素を意味的にポップオーバー トリガーに接続する。

JavaScript を使用せずに、これらすべての機能でポップオーバーを作成できるようになりました。基本的なポップオーバーには次の 3 つのことが必要です。

  • ポップオーバーを含む要素の popover 属性。
  • ポップオーバーを含む要素の id。
  • ポップオーバーを開く要素のポップオーバーの id の値を含む popovertarget。
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

これで、基本的なポップオーバーがすべて機能するようになりました。

このポップオーバーは、追加情報を伝えるため、または開示ウィジェットとして使用できます。

デフォルトとオーバーライド

前のコード スニペットのようにデフォルトで、popovertarget でポップオーバーを設定すると、ポップオーバーを開くボタンまたは要素によって、ポップオーバーの開閉が切り替わります。ただし、popovertargetaction を使用して明示的なポップオーバーを作成することもできます。これは、デフォルトの toggle アクションをオーバーライドします。popovertargetaction オプションには、次のものがあります。

popovertargetaction="show": ポップオーバーを表示します。 popovertargetaction="hide": ポップオーバーを非表示にします。

popovertargetaction="hide" を使用すると、次のスニペットのように、ポップオーバー内に「閉じる」ボタンを作成できます。

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

自動ポップオーバーと手動ポップオーバー

popover 属性を単独で使用すると、実際には popover="auto" のショートカットになります。デフォルトの popover を開くと、他の自動ポップオーバー（祖先ポップオーバーを除く）が強制的に閉じられます。ライトを閉じるか閉じるボタンで閉じることができます。

一方、popover=manual を設定すると、別のタイプのポップオーバー（手動ポップオーバー）が作成されます。他の要素タイプを強制的に閉じることも、light-open で閉じることもできません。タイマーまたは明示的なクローズ アクションで閉じる必要があります。popover=manual に適したポップオーバーの種類は、表示される要素と非表示になる要素ですが、ページの他の部分（トースト通知など）には影響を与えない要素です。

上のデモを見ると、ポップオーバー領域の外側をクリックしてもポップオーバーが消灯しないことがわかります。また、他のポップオーバーが開いている場合、閉じません。

違いを確認するには:

popover=auto を使用したポップオーバー:

  • 開いたら、他のポップオーバーを強制終了します。
  • ライトを閉じることができます。

popover=manual を使用したポップオーバー:

  • 他の種類の要素は強制的に閉じないでください。
  • 消灯しないでください。切り替えボタンまたは閉じる操作で閉じることができます。

ポップオーバーのスタイル設定

ここまで、HTML の基本的なポップオーバーについて学習してきました。ただし、popover には便利なスタイル設定機能もあります。その一つが ::backdrop のスタイル設定です。

auto ポップオーバーでは、これはポップオーバーが存在する最上位レイヤの直下のレイヤで、ページの他の部分より上に表示されます。次の例では、::backdrop の色が半透明になっています。

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

popover と dialog の違い

popover 属性自体はセマンティクスを提供していないことに注意してください。また、popover="auto" を使用してモーダル ダイアログのようなエクスペリエンスを構築できるようになりましたが、両者にはいくつかの重要な違いがあります。

dialog.showModal（モーダル ダイアログ）で開く dialog 要素は、モーダルを閉じるために明示的なユーザー操作を必要とするエクスペリエンスです。popover はライト非表示をサポートしています。モーダル dialog ではサポートされません。 モーダル ダイアログを使用すると、ページの残りの部分が不活性になります。popover ではサポートされていません。

上記のデモは、ポップオーバー動作を使用するセマンティック ダイアログです。つまり、ページの残りの部分は不活性であり、ダイアログのポップオーバーはライト - 閉じる動作になります。次のコードを使用して、ポップオーバー動作のあるこのダイアログを作成できます。

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

近日提供予定

インタラクティブな開始と終了

個別のプロパティをアニメーション化する機能（display: none との間のアニメーション、最上位レイヤとの間のアニメーションなど）は、ブラウザではまだ利用できません。ただし、このリリースの直後に Chromium の新しいバージョンが提供される予定です。

個別のプロパティをアニメーション化する機能があり、:popover-open と @starting-style を使用すると、変更前と変更後のスタイルを設定して、ポップオーバーを開いたり閉じたりするときにスムーズな移行を実現できます。前の例を見てみましょう。アニメーション化によって動きがかなりスムーズになり、より滑らかなユーザー エクスペリエンスを実現できます。

アンカーの位置

ポップオーバーは、ビューポートに基づいてアラート、モーダル、通知を配置する場合に適しています。ポップオーバーは、メニューやツールチップなど、他の要素に対して相対的に配置する必要がある要素にも便利です。ここで役立つのが CSS のアンカーです。

次の放射状メニューのデモでは、ポップオーバー API と CSS アンカーの配置を使用して、ポップオーバー #menu-items が常にその切り替えトリガーである #menu-toggle ボタンに固定されるようにしています。

アンカーの設定は、ポップオーバーの設定と似ています。

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

id（この例では #menu-toggle）を指定してアンカーを設定し、anchor="menu-toggle" を使用して 2 つの要素を接続します。anchor() を使用してポップオーバーのスタイルを設定できるようになりました。アンカー切り替えのベースラインに固定される中央のポップオーバー メニューのスタイルは次のように設定できます。

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

これで、切り替えボタンに固定されたポップオーバー メニューが完成しました。JavaScript は必要ありません。

おわりに

ポップオーバー API は、ウェブ アプリケーションの構築を管理しやすくし、デフォルトでアクセスしやすくする一連の新機能の第一歩です。ポップオーバーをぜひご活用ください。

追加情報