Popover APIによるポップオーバー機能の実装

 (developer.mozilla.org)
2 ポイント 投稿者 GN⁺ 2024-05-11 | 1件のコメント | WhatsAppで共有

Popover APIの主な内容の要約

Popover APIの紹介

  • Popover APIは、開発者に対してページコンテンツの上にポップオーバーコンテンツを表示するための、標準的で一貫性があり柔軟なメカニズムを提供する
  • ポップオーバーコンテンツは、HTML属性を使って宣言的に制御することも、JavaScriptを通じて制御することもできる

Popoverの特徴と使用方法

  • ポップオーバーはModalとNon-modalの2つの方式に分かれ、Popover APIで作成されたポップオーバーは常にNon-modalである
    • Modalは、ポップオーバーが表示されている間、ページの残りの部分が非対話的にレンダリングされることを意味する
    • Non-modalは、ポップオーバーが表示されている間もページの残りの部分と対話できることを意味する
  • ポップオーバーの一般的な使用例としては、アクションメニュー、カスタム「トースト」通知、フォーム要素の候補、コンテンツセレクター、教育用UIなどがある
  • ポップオーバーはHTML属性を通じて宣言的に作成することも、JavaScript APIを通じて作成することもできる

Popover API関連のHTML属性

  • popover: 要素をポップオーバー要素に変換するグローバル属性
  • popovertarget: <button> または <input> 要素をポップオーバー制御ボタンに変換
  • popovertargetaction: 制御 <button> または <input> によって制御されるポップオーバー要素で実行する操作を指定

Popover API関連のCSS機能

  • ::backdrop: ポップオーバー要素のすぐ後ろに配置される全画面要素で、必要に応じてポップオーバー背後のページコンテンツに効果を追加できる
  • :popover-open: ポップオーバー要素が表示状態のときにのみ一致する擬似クラスで、ポップオーバー要素が表示される際のスタイル指定に使用できる

Popover API関連のインターフェースと拡張

  • ToggleEvent: ポップオーバー要素の状態が表示と非表示の間で切り替わるときにユーザーへ通知するイベントを表す
  • HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction などのインスタンス属性が追加された
  • HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover() などのインスタンスメソッドが追加された
  • beforetoggle, toggle イベントが追加された

GN⁺の意見

  • Popover APIは、Web開発者にポップオーバーUIを簡単に実装できる標準化された方法を提供するという点で意義がある。従来は、そのためにライブラリを使うか自前で実装する必要があった
  • ただし、Popover APIがまだ実験的機能であり、ブラウザサポートの範囲が限定的である点は考慮する必要がある。本番環境で使用するには、ポリフィルや既存ライブラリとの併用を検討する必要がある
  • 類似機能を提供するライブラリとしては、BootstrapのPopoverコンポーネント、Tippy.jsなどがある
  • Popover APIを使用する際は、アクセシビリティの観点も考慮する必要がある。キーボードでポップオーバーを制御できること、スクリーンリーダーユーザー向けの代替テキストも提供されるべきである

関連記事

1件のコメント

 
GN⁺ 2024-05-11
Hacker Newsの意見

要約すると次のとおり。

  • CSS Anchor Positioning が導入されれば、Popover API と組み合わせてカスタムツールチップやコンテキストメニューを宣言的な方式で実装できるようになり、PopperJS のようなライブラリは不要になるだろう。
  • モーダルダイアログが欲しいなら、<dialog> 要素も使用できる。
  • 現在のポップオーバーはブラウザウィンドウの境界を越えられないなど、ホスト OS のウィンドウシステムとうまく連携しておらず、実装には限界がある。これをきちんと実装するには、Win32 ではポップオーバーごとに個別の HWND が、macOS では NSView が必要になるだろう。
  • ブラウザにはポップアップブロッカーがあるのに、このような API を作るのは皮肉でもある。90年代後半〜2000年代前半のポップアップ／ポップアンダー広告戦争を思い出す。
  • Popover API を使えば、拡張機能でターゲット指定してブロックしやすくなるだろう。マーケティングの CTA や押しつけがましいサポートチャットなど、主にユーザーが嫌う用途に使われそうだ。
  • Popover をモーダルにしたいなら <dialog> 要素を使えと言われるが、背景をぼかすようなケースでは、ポップオーバーをモーダルにするのが適切なユースケースだ。<popover modal=true> のほうがより良い方法ではないだろうか。
  • Stimulus + Popper でカスタム実装したサンプルコードも共有されている。
  • Popover が何なのかを示す画像がページにない、という指摘。
  • Popover API の登場に感嘆する反応。