Poppin ' Dalam-tutorial css-php.cn

Poppin ' Dalam

Joseph Gordon-Levitt

Lepaskan： 2025-03-08 11:45:11

asal

896 orang telah melayarinya

Poppin' In

hei ada! Lama tidak jumpa! Hanya mahu masuk dan bertanya khabar. ?

bercakap tentang "muncul", saya telah bereksperimen dengan API Popover baru. Kami mula -mula menyebutnya pada tahun 2018, tetapi sokongan penuh dalam pelayar moden hanya baru -baru ini (April 2024).

Pada mulanya, elemen HTML yang berdedikasi telah dirancang. Chromium bekerja pada ini sehingga September 2021, tetapi akhirnya digantikan oleh atribut

. Ini masuk akal, kerana mana -mana elemen kini boleh berfungsi sebagai popover - hanya tambah atribut. <popover></popover> popover

`` `html

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

Salin selepas log masuk

... memaparkan biasanya. Walau bagaimanapun, menambah atribut popover menyembunyikannya! Ini pada mulanya membingungkan saya, tetapi DevTools mengesahkan tingkah laku yang dijangkakan.

Pelbagai popovers mungkin, dibezakan oleh ID:

<div popover="id1"></div>
<div popover="id2"></div>

Salin selepas log masuk

"Pencetus" diperlukan untuk mengaktifkan popover. Atribut lain mengubah sebarang butang (atau elemen seperti butang) ke dalam pencetus ini:

<button>Say Hello!</button>
<div popover="">?</div>

Salin selepas log masuk

Klik butang bertukar penglihatan Popover. CSS mengendalikan logik penglihatan, yang membolehkan kami memberi tumpuan kepada acara klik. Sebagai contoh, sempadan hitam tebal adalah gaya lalai apabila popover dibuka.

Devtools mendedahkan butiran menarik lain: Lebar dan ketinggian popover berkelakuan seperti unsur -unsur inline, walaupun dengan display: block. Ia bersaiz kepada kandungan dan berpusat, semuanya tanpa CSS adat!

Mengeluarkan sempadan lalai tidak semudah border: 0;. Gaya pseudo-kelas :popover-open elemen hanya apabila dibuka, mengatasi gaya terdahulu.

Sebagai alternatif, pilih atribut [popover]:

/* All popovers */
[popover] { border: 0; }

/* Specific popover */
#wave[popover] { border: 0; }

/* Equivalent to :popover-open */
#wave:popover-open { border: 0; }

Salin selepas log masuk

Ini membolehkan menambah animasi ke negeri terbuka (diilhamkan oleh demo Jhey).

Tambahan pula, popovers boleh termasuk ::backdrop pseudo-element, sama dengan <dialog></dialog>, untuk kesan visual. Contoh almanak Mojtaba sangat baik.

Kemungkinan besar! Petua menjadi lebih mudah dengan CSS mengendalikan penglihatan. Michelle Barker menunjukkan ini lebih daripada "toggletip" (klik dikawal) daripada petua hover, dan jawatannya menunjukkan betapa baiknya ia diintegrasikan dengan kedudukan CSS Anchor (sebagai sokongan tumbuh).

satu lagi sumber yang hebat, yang menonjolkan bahawa popover tidak terhad kepada popovers; Ia boleh ditarik balik untuk unsur-unsur UI yang lain dengan penglihatan yang bertukar, seperti menu slaid.

3 Berikut adalah senarai sumber untuk pembelajaran selanjutnya: