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

Una Kravets

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

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

popover 属性

複雑な処理をすべて自分で管理するのではなく、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" を使用してモーダル ダイアログのようなエクスペリエンスを構築できるようになりましたが、この 2 つにはいくつかの重要な違いがあります。

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 ポップオーバーの説明