トースト通知の作成

ウェブ機能: ポップオーバー アンカーの配置 sibling-count() と sibling-index() transition-behavior

トースト通知は、一時的なステータス メッセージです。メニューとは異なり、ユーザーがページの他の部分を操作しても閉じないようにする必要があります。popover="manual" 状態は、「ライトディスミス」動作がなく、複数の通知を共存させることができるため、理想的です。

実装ガイドライン

  • 必須: popover="manual" を使用して、スクリプトによって明示的に閉じられるかタイムアウトするまで通知が表示されたままになるようにします。
  • 推奨事項: コンテナを使用して、複数のトーストのスタックを管理します。最上位レイヤのポップオーバーは親の z-index を無視するため、個別に、または共通のレイアウト グループ内に配置する必要があります。
  • 推奨: sibling-index() を使用してトースト通知間にマージンを追加し、スタックの下位にあるアイテムが表示されるようにします。
  • 推奨: popovertargetaction="hide" を使用して、トースト内に明示的な [閉じる] ボタンを配置します。
  • 推奨: 自動非表示タイマーに JavaScript を使用する（例: 3,000 ミリ秒後に hidePopover() を呼び出す）。
  • 推奨事項: transition-behavior: allow-discrete を使用して、最上位レイヤの開始と終了をアニメーション化します。

代替戦略

Popover のフォールバックとブラウザ サポート

Popover API は主にプログレッシブ エンハンスメントですが、その定義動作である最上位レイヤのプロモーション、ライトディスミス、popovertarget 呼び出しには、CSS のみの同等の機能がありません。古いブラウザでは、ポリフィルが必要です。ポリフィルを配布したくない場合は、手動でフォールバックする必要があります。

ポリフィル: 古いブラウザで popover 属性をサポートするには、条件付きで @oddbird/popover-polyfill を読み込みます。必須: HTMLElement.prototype の popover プロパティをチェックして機能を検出し、ネイティブ サポートがない場合にのみポリフィルを読み込みます。無条件に読み込まないでください。

バンドラまたはインポート マップを使用する場合:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

バンドラを使用しない場合は、<script type="module"> 内の CDN からインポートします。

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

スタイリングに関する注意事項: ポリフィルは実際の :popover-open 疑似クラスを定義できないため、代わりに .\:popover-open クラスを適用します。必須: :is() または :where() を使用して 2 つを結合します。そうしないと、:popover-open がないブラウザではルール全体が破棄されます。

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

または、ポリフィルを使用しないレガシー フォールバックの場合は、position: fixed を使用して getBoundingClientRect() で座標を手動で計算するか、ユースケースで許容される場合は inset: auto でデフォルトの配置を使用します。

sibling-index()

  • ガイダンス: sibling-index() がサポートされていない場合は、+ 演算子を使用して手動でマージンを追加します。（例: popover + popover { margin-top: 1rem }）

anchor-positioning

  • ガイダンス: CSS Anchor Positioning Polyfill を使用します。ポリフィル以外のフォールバックの場合は、@supports not (anchor-name: --foo) を使用して、ツールチップをビューポートの下部の固定位置にデフォルトで配置します。

transition-behavior

  • ガイダンス: transition-behavior がサポートされていない場合は、JavaScript を使用して、トースト要素の表示と非表示の切り替え時にクラスを介してアニメーションを追加します。