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

Una Kravets

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

この問題を解決するため、ポップオーバーの作成に使用する宣言型の HTML API の新しいセットがブラウザに導入されます。これは、Chromium 114 の popover API から始まります。

popover 属性

複雑な処理をすべて自分で管理するのではなく、popover 属性とその後の機能セットを使用してブラウザに処理を任せることができます。HTML ポップオーバーは、次の機能をサポートしています。

• 最上位レイヤへの昇格。ポップオーバーはページの他の部分の上に別のレイヤで表示されるため、Z インデックスを調整する必要はありません。
• ライトを消す機能。ポップオーバー領域の外側をクリックすると、ポップオーバーが閉じてフォーカスが戻ります。
• デフォルトのフォーカス管理。ポップオーバーを開くと、次のタブストップがポップオーバー内に表示されます。
• ユーザー補助対応のキーボード バインド。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 を使用して明示的なポップオーバーを作成することもできます。これにより、デフォルトの切り替えアクションがオーバーライドされます。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 ポップオーバーの説明