このページは Cloud Translation API によって翻訳されました。

ポップオーバーの事例紹介

Swetha Gopalakrishnan

Saurabh Rajpal

ポップオーバーはウェブ上のいたるところにあります。これはメニュー、切り替えヒント、ダイアログに表示され、アカウント設定、開示ウィジェット、商品カードのプレビューなどの機能で使用されます。こうしたコンポーネントがこれほど普及しているにもかかわらず、ブラウザで構築することは依然として面倒な作業です。この問題を解決するために、ポップオーバーを作成するための新しい宣言型 HTML API がブラウザに提供されます。その最初のものが Popover API です。

ポップオーバーは、Baseline Newly Available の一部です。

対応ブラウザ

ソース

ポップオーバーは、一般的にダイアログと混同されます。ただし、それらの動作にはいくつかの重要な違いがあります。dialog.showModal（モーダルダイアログ）で開く dialog 要素は、モーダルを閉じるために明示的なユーザー操作を必要とするエクスペリエンスです。popover はライト非表示をサポートしています。モーダル dialog ではサポートされません。モーダルダイアログでは、ページの残りの部分は不活性化されます。popover ではサポートされていません。相違点の詳細については、こちらをご覧ください。

この記事は、e コマース企業が新しい CSS と UI 機能を使用してウェブサイトをどのように改善したかについて説明するシリーズの一部です。この記事では、Tokopedia が Popover API を実装して活用した方法について説明します。

Tokopedia

ポップオーバー属性を使用することで、React のコード行を最大 70% 削減しました。JavaScript でイベントを処理したり、React.createPortal を使用してモーダル DOM を document.body の最後に移動したりする代わりに、HTML でネイティブにモーダルを制御できます。また、@starting-style を使用して、ポップオーバーの開始と終了をアニメーション化することもできます（Tokopedia、シニアソフトウェアエンジニア、Andy Wihalim 氏）。

Tokopedia の商品詳細ページ（PDP）には、商品ごとに複数の商品画像が含まれています。商品のサムネイルをクリックすると、モーダルが開いて拡大画像が表示されます。これは、e コマースサイトで使用される一般的なパターンです。

コード

Tokopedia は、フロントエンド開発に React を使用しています。このモーダルにポップオーバー API を実装する前は、DOM モーダルとボタンを使用していました。ボタンによって React の状態が変更され、モーダルが開きます。ポップオーバー API では、要素内に popovertarget 属性を指定し、ポップオーバー要素の ID と同じ値でポップオーバーを開きます。

この基本的な実装では、ポップオーバーは機能しますが、アニメーションなしで表示と非表示が切り替わります。ポップオーバーのスムーズな開始と終了のアニメーションを作成するには、:popover-open と @starting-style を使用して、個別のプロパティのアニメーションを許可します。次のコードサンプルでは、transform: 'scale()' プロパティを使用してポップオーバーのスケールインとスケールアウトを行っています。

このコードサンプルは、ポップオーバー API の開始アニメーションと終了アニメーションを実装する方法を示しています。

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

ポップオーバー API をサポートしていないブラウザに対応するため、Tokopedia は oddbird による popover-polyfill を実装しました。これは、gzip 圧縮でわずか 3.2 KB です。同社は、ポリフィルが適切に機能し、パフォーマンスの低下を引き起こさなかったことに満足しました。全体として、popover API により React のコード行を最大 70% 削減できました。

Tokopedia は React を使用しており、React を使用しないページのポップオーバーコンポーネントをマウント解除し、ポップオーバーコンテンツのコード分割を行うことでコード分割を実現しました。このようにして、最初のリクエストの規模を小さくしました。

ポップオーバーを他の要素に対して配置するには、CSS のアンカー配置（Chrome に近日提供予定）と組み合わせてください。これはメニューやツールチップなどで役立ちます。

リソース

Popover API のご紹介
ポップオーバーとダイアログの違い
バグの報告または新機能のリクエストを行いますか？ご意見をお聞かせください。

スクロールドリブンアニメーション、ポップオーバー、コンテナクエリ、has() セレクタなどの新しい CSS と UI の機能を使用して、e コマース企業がどのようにメリットを得るかについて説明しているこのシリーズの他の記事もご覧ください。

ポップオーバーの事例紹介

Tokopedia

コード

Popover API を使用する際の考慮事項

リソース