Oh halo! Itu adalah momen yang panas, bukan? Saya pikir saya akan mampir dan menyapa. 👋
Berbicara tentang “popover”, saya sudah cukup sering menggunakan Popover API. Faktanya, kami pertama kali menyadarinya pada tahun 2018 ketika Chris menghubungkan beberapa informasi tentangnya <dialog> Namun kami baru bisa mendapatkan dukungan penuh untuk Popover API di browser modern sejak April tahun ini.
Suatu hari kami akan mendapatkan merek baru <popover> Sebuah elemen dalam HTML untuk tujuan ini. Chromium sedang dikembangkan baru-baru ini pada bulan September 2021 tetapi mencapai titik di mana Chromium ditinggalkan dan digantikan oleh Chromium popover atribut sebagai gantinya. Ini sepertinya yang paling logis <>setiap Elemennya bisa berupa popup — kita hanya perlu melampirkannya ke tema untuk mengaktifkannya.
-Advertisement-.
<div popover>
<!-- Stuff -->
</div>Ini menarik karena katakanlah kita mempunyai widget sederhana yang kita gunakan sebagai popup:
<div>👋</div>Jika ini semua tag kami dan kami tidak melakukan apa pun terhadap CSS, emoji melambai akan ditampilkan seperti yang Anda harapkan.
Tambahkan itu popover Namun, penghargaan atas kombinasi ini hilang!
Ini mungkin hal pertama yang membuatku bingung. Seringkali ada sesuatu yang hilang dan saya berasumsi saya melakukan kesalahan. Namun membuka DevTools menunjukkan bahwa inilah yang seharusnya terjadi.
display: none Secara default.Mungkin ada beberapa pop-up di halaman dan kami dapat membedakannya menggunakan ID.
<div popover id="tooltip">
<!-- Stuff -->
</div>
<div popover id="notification">
<!-- Stuff -->
</div>Belum cukup, kita juga memerlukan semacam “trigger” untuk memunculkan popup tersebut, nah, <>muncul! Kami mendapatkan atribut lain yang mengubah tombol apa pun (atau <input>-tombol rasa) di pemutar ini.
<button popovertarget="wave">Say Hello!</button>
<div popover id="wave">👋</div>Sekarang kita punya popover “Ditargetkan” ke <button>Saat Anda mengklik tombol, item jendela pop-up dialihkan ke mode terlihat.
Di sinilah segalanya menjadi sangat menarik karena sekarang CSS dapat menangani logika untuk mengubah visibilitas, kita dapat lebih fokus pada apa yang terjadi ketika klik terjadi.
Misalnya saat ini emoji dibingkai dengan bingkai hitam yang sangat tebal saat dihidupkan. Ini adalah gaya default.
Ada beberapa hal penting lainnya yang terjadi di DevTools selain batasan yang berlaku. Misalnya, perhatikan bahwa perhitungan lebar dan tinggi berperilaku lebih seperti elemen inline daripada elemen blok, meskipun kita bekerja dengan elemen lurus <div> – Hal ini benar meskipun elemennya jelas dihitung sebagai berikut display: blockSebaliknya, kita memiliki elemen yang ukurannya sesuai dengan isinya dan ditempatkan di tengah halaman. Kami bahkan belum menambahkan satu baris CSS pun!
Berbicara tentang CSS, mari kita kembali menghapus batas default. Anda mungkin berpikir hal ini mungkin dilakukan dengan menyatakan tidak ada batasan pada item tersebut.
/* Nope 👎 */
#wave {
border: 0;
}Sebenarnya ada :popover-open Kelas semu yang memilih elemen secara spesifik saat berada dalam status “terbuka”. Saya ingin itu disebut sebuah nama :popover-popped Tapi saya ngelantur. Yang penting adalah itu :popover-open Ini hanya cocok dengan elemen popup ketika terbuka, yang berarti bahwa gaya ini diterapkan setelah, dan dengan demikian ditimpa, gaya yang dideklarasikan dalam pemilih elemen.
Cara lain untuk melakukan ini? Memilih [popover] Menjelaskan:
/* Select all popovers on the page */
[popover] {
border: 0;
}
/* Select a specific popover: */
#wave[popover] {
border: 0;
}
/* Same as: */
#wave:popover-open {
border: 0;
}Dengan mengingat hal ini, kita dapat, misalnya, melampirkan animasi ke dalamnya #wave Dalam keadaan terbuka. Saya benar-benar mengambil ide ini dari salah satu demo Jhey.
Tunggu, tunggu, masih ada lagi! Puff pastry bisa lebih disukai <dialog> dengan ::backdrop Jika kita membutuhkannya. ::backdrop Elemen palsu dapat membuat menu popup Anda lebih menarik dengan menempatkannya pada latar belakang khusus atau menyembunyikan elemen di belakangnya.
Saya suka contoh yang diberikan Mujtaba untuk kita di kalender, jadi mari kita pertahankan.
Bisakah Anda bayangkan semua kemungkinannya?! Misalnya, seberapa mudahkah membuat tooltip sekarang karena CSS telah menghilangkan logika visibilitas? Jauh lebih mudah.
Michelle Parker menunjukkan bahwa ini mungkin bukan 'tip' tradisional yang mengontrol tampilan item saat Anda menggerakkan kursor ke atasnya, melainkan 'tip' yang dikontrol klik. Ini sangat masuk akal. Namun alasan sebenarnya saya menyebutkan postingan Michelle adalah karena ini menunjukkan seberapa baik API popup dapat bekerja dengan pemosisian CSS karena memperoleh dukungan browser yang lebih luas. Ini akan membantu menghilangkan angka ajaib untuk menentukan posisi mana yang mengisi demo saya.
Ini permata lain dari Jhey: Popup tidak harus berupa popup. Mengapa tidak menggunakan kembali Popover API untuk elemen UI lain yang mengandalkan visibilitas variabel, seperti menu geser?
Ya Tuhan, lihat ini: sudah larut malam. Ada banyak hal lain tentang Popover API yang masih saya coba pahami, namun sedikit saja yang saya mainkan sepertinya akan sangat bermanfaat. Saya akan menyertakan daftar hal-hal yang telah saya tambahkan ke bookmark saya untuk referensi Anda. Untuk saat ini, terima kasih sudah mengizinkanku <>Pop Kembalilah sebentar untuk menyapa.
- Tentang aksesibilitas popup: apa yang dilakukan dan tidak dilakukan browser (Hidde de Vries)
- Jika Anda menggunakan popup, gunakan juga elemen dialog untuk dialog formulir Anda 📺(Hidde de Vries)
- Buka UI dan API Popover (Brecht De Ruyte)
- Catatan singkat tentang acara pop-up dengan dialog (Adrian Roselli)
- Rancang kontrol formulir tingkat lanjut menggunakan Selectmenu dan Anchoring API (Brecht De Ruyte)
- Menggunakan API Popover untuk Widget HTML (Chris Cowher)
- Bandingkan Popover API dan Item
Poppin' In awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
