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

Una Kravets

ポップオーバーはウェブのいたるところに存在します。これらの情報は、メニュー、切り替えツールチップ、ダイアログに表示されます。アカウント設定、開示情報ウィジェット、商品カードのプレビューなどです。これらのコンポーネントは広く普及していますが、ブラウザで作成するのは驚くほど面倒です。フォーカス、開閉状態、コンポーネントへのアクセス可能なフック、エクスペリエンスの開始と終了のキーボード バインディングを管理するスクリプトを追加する必要があります。これは、ポップオーバーの便利で独自のコア機能を構築する前に行う必要があります。

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

ポップオーバー属性

複雑な処理をすべて自分で管理するのではなく、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 を設定すると、別の種類のポップオーバー（手動ポップオーバー）が作成されます。これらは、他の要素タイプを強制的に閉じることはなく、軽量の閉じる操作で閉じることもありません。タイマーまたは明示的な閉じるアクションで閉じる必要があります。popover=manual に適したポップオーバーの種類は、表示と非表示を切り替えることができますが、ページの他の部分（トースト通知など）には影響しません。

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

違いを確認する方法は次のとおりです。

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

• 開いたときに、他のポップオーバーを強制的に閉じる。
• ライトで閉じることができる。

popover=manual を含むポップオーバー:

• 他の要素タイプは強制的に閉じないでください。
• ライトで閉じないでください。切り替えボタンまたは閉じるアクションを使用して閉じます。

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

ここまで、HTML の基本的なポップオーバーについて学習しました。ただし、popover には便利なスタイル設定機能もあります。そのうちの 1 つは、::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 は、ウェブ アプリケーションの構築をより簡単に管理し、デフォルトでよりアクセスしやすくなる一連の新機能の最初のステップです。ポップオーバーをぜひご活用ください。

追加情報

• ダイアログとポップオーバーは似ているように見えます。違いは何ですか？
• セマンティクスとポップオーバー属性
• ポップオーバーに関する MDN ドキュメント
• OpenUI ポップオーバーの説明