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

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

Swetha Gopalakrishnan

Saurabh Rajpal

ポップオーバーはウェブ上のいたるところにあります。メニュー、切り替えチップ、ダイアログ: アカウント設定、開示ウィジェット、商品カードのプレビューを表示しますこれらのコンポーネントはかなり普及しているとはいえ、ブラウザ上で行う操作は依然として驚くほど面倒です。この問題を解決するには、新しい一連のポップオーバーを作成するための宣言型 HTML API がブラウザに導入されます。 Popover API です。

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

ポップオーバーはダイアログと混同されることがよくあります。ただし、特定できます。dialog.showModal で開かれた dialog 要素（モーダルダイアログ）では、ユーザーが明示的にやり取りするモーダルを閉じます。popover は、軽い消去をサポートしています。モーダル dialog ではサポートされていません。モーダルダイアログでは、ページの残りの部分は無効になります。popover ではサポートされていません。詳しくは、相違点についての説明をご覧ください。

この記事は、e コマース企業が新しい CSS と UI 機能を使ってウェブサイトを強化しました。この記事では、 Tokopedia が Popover API を実装し、その恩恵を受けています。

Tokopedia

ポップオーバー属性を使用することで、React のコード行を最大 70% 削減しました。モーダル HTML でネイティブに制御でき、 JavaScript と React.createPortal を使用してモーダル DOM を末尾に移動する document.body。また、@starting-style を使用して、 —Andy Wihalim、シニアソフトウェア Tokopedia、エンジニア。

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

コード

Tokopedia は、フロントエンド開発に React を使用しています。実装する前に、 DOM モーダルとボタンを使用しました。ボタン React の状態を変更してモーダルが開くようになりました。Popover 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,
  },
});

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

Tokopedia では React を使用しており、同社のチームはポップオーバーを使用しないページではポップオーバーコンポーネントを作成し、ポップオーバーコンテンツを選択します。このようにして、最初のリクエストのサイズが削減されました。

ポップオーバーと CSS アンカーの配置を組み合わせることを検討する（Chrome では近日提供予定）他の要素との相対位置付けも可能ですこれは、メニューやツールチップなどで役立ちます。

リソース

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

このシリーズの他の記事で e コマースの各社はスクロールドリブンなどの新しい CSS と UI 機能を使用することで、アニメーション、ポップオーバー、コンテナクエリ、has() セレクタです。

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

Tokopedia

コード

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

リソース