ポップオーバーはウェブ上のいたるところにあります。これはメニュー、切り替えヒント、ダイアログに表示され、アカウント設定、開示ウィジェット、商品カードのプレビューなどの機能で使用されます。こうしたコンポーネントがこれほど普及しているにもかかわらず、ブラウザで構築することは依然として面倒な作業です。この問題を解決するために、ポップオーバーを作成するための新しい宣言型 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% 削減できました。
Popover API を使用する際の考慮事項
Tokopedia は React を使用しており、React を使用しないページのポップオーバー コンポーネントをマウント解除し、ポップオーバー コンテンツのコード分割を行うことでコード分割を実現しました。このようにして、最初のリクエストの規模を小さくしました。
ポップオーバーを他の要素に対して配置するには、CSS のアンカー配置(Chrome に近日提供予定)と組み合わせてください。これはメニューやツールチップなどで役立ちます。
リソース
- Popover API のご紹介
- ポップオーバーとダイアログの違い
- バグの報告または新機能のリクエストを行いますか?ご意見をお聞かせください。
スクロールドリブン アニメーション、ポップオーバー、コンテナクエリ、has()
セレクタなどの新しい CSS と UI の機能を使用して、e コマース企業がどのようにメリットを得るかについて説明しているこのシリーズの他の記事もご覧ください。