ポップオーバー 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 には優れたスタイル設定機能もあります。その一つが ::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 ポップオーバーの説明