Membuat Notifikasi Toast

Fitur web: Popover Pemosisian anchor sibling-count() dan sibling-index() transition-behavior

Notifikasi toast adalah pesan status sementara. Tidak seperti menu, panel samping tidak boleh ditutup saat pengguna berinteraksi dengan bagian lain halaman. Status popover="manual" ideal karena tidak memiliki perilaku "tutup ringan" dan memungkinkan beberapa notifikasi ditampilkan bersamaan.

Panduan Penerapan

  • WAJIB: Gunakan popover="manual" agar notifikasi tetap terlihat hingga ditutup secara eksplisit atau waktu habis oleh skrip.
  • LAKUKAN penggunaan penampung untuk mengelola penumpukan beberapa toast. Karena popover di Lapisan Atas mengabaikan z-index induk, Anda harus memosisikannya satu per satu atau dalam grup tata letak umum.
  • LAKUKAN penggunaan sibling-index() untuk menambahkan margin di antara notifikasi toast sehingga item yang lebih rendah dalam tumpukan terlihat.
  • LAKUKAN: Sediakan tombol "Tutup" yang eksplisit dalam toast menggunakan popovertargetaction="hide".
  • LAKUKAN penggunaan JavaScript untuk timer penutupan otomatis (misalnya, memanggil hidePopover() setelah 3.000 md).
  • LAKUKAN penggunaan transition-behavior: allow-discrete untuk menganimasikan masuk dan keluar dari Lapisan Atas.

Strategi Penggantian

Penggantian & dukungan browser untuk Popover

Popover API sebagian besar merupakan progressive enhancement, tetapi perilaku penentuannya — promosi lapisan atas, penutupan ringan, dan pemanggilan popovertarget — tidak memiliki padanan khusus CSS. Browser lama memerlukan polyfill, atau penggantian manual jika Anda tidak ingin mengirimkannya.

Polyfill: Untuk mendukung atribut popover di browser lama, muat @oddbird/popover-polyfill secara bersyarat. WAJIB: Deteksi fitur dengan memeriksa properti popover di HTMLElement.prototype, dan muat polyfill hanya jika dukungan native tidak ada — JANGAN memuatnya tanpa syarat.

Dengan bundler atau peta impor:

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

Tanpa bundler, impor dari CDN di dalam <script type="module">:

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

Peringatan gaya: Polyfill tidak dapat menentukan pseudo-class :popover-open yang sebenarnya, sehingga menerapkan class .\:popover-open. WAJIB: Gabungkan keduanya dengan :is() atau :where(). Jika tidak, browser yang tidak memiliki :popover-open akan menghapus seluruh aturan:

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

Atau, untuk penggantian lama tanpa polyfill, gunakan position: fixed dan hitung koordinat secara manual melalui getBoundingClientRect() atau andalkan pemosisian default dengan inset: auto jika hal itu dapat diterima untuk kasus penggunaan.

sibling-index()

  • Panduan: Jika sibling-index() tidak didukung, gunakan operator + untuk menambahkan margin secara manual. Yaitu, popover + popover { margin-top: 1rem }

anchor-positioning

  • Panduan: Gunakan Polyfill CSS Anchor Positioning. Untuk penggantian non-polyfill, tetapkan tooltip ke posisi tetap di bagian bawah area pandang menggunakan @supports not (anchor-name: --foo).

transition-behavior

  • Panduan: Jika transition-behavior tidak didukung, gunakan JavaScript untuk menambahkan animasi melalui class saat elemen toast bertransisi masuk dan keluar.