Beberapa tangan dengan elemen dialog HTML

Ini adalah pandangan pertama saya di html<dialog></dialog> elemen. Saya telah tahu mengenainya untuk sementara waktu tetapi tidak menggunakannya sehingga sekarang. Ia menawarkan beberapa ciri yang mengagumkan. Walaupun saya tidak dapat mengatakan sama ada anda harus menggunakannya dalam pengeluaran, ia menjadi semakin berdaya maju.

Beyond Semantik: API dan CSS khusus

The<dialog></dialog> Elemen menonjol kerana penyemak imbasnya memberi kesan kepada kegunaannya. Tidak seperti elemen HTML5 yang terdahulu, fungsinya tidak mudah direplikasi dengan alternatif asas. Anda tidak boleh merawatnya sebagai dipertingkatkan secara semantik<div> . Keupayaannya jauh melebihi itu.<h3 id="Sokongan-penyemak-imbas-Landskap-semasa"> Sokongan penyemak imbas: Landskap semasa</h3> <p> Pada masa penulisan:</p> <ul> <li> Chrome menyokongnya (versi 37). Sokongan Edge sudah dekat.</li> <li> Firefox mempunyai gaya pengguna (UA) (versi 69), tetapi fungsi penuh memerlukan bendera <code>dom.dialog_element.enabled . Walaupun begitu, sokongan CSS kelihatan tidak lengkap.

Safari tidak mempunyai sokongan.

Polyfills disediakan. Walaupun sokongan yang lebih luas adalah lebih baik, sokongan sedia ada ditambah dengan polyfilling membuat<dialog></dialog> Pilihan yang menarik untuk banyak pemaju.

Dibuka atau ditutup: keadaan asas

<dialog>
  Saya ditutup.
</dialog>
<dialog open="">
  Saya terbuka.
</dialog>

Gaya ejen pengguna: asas

Chrome dan Firefox mempamerkan gaya lalai yang sama dari lembaran gaya UA: berpusat dengan margin auto, sempadan hitam tebal, dan saiz berasaskan kandungan. Gaya ini mudah ditindih dengan CSS tersuai untuk menyesuaikan reka bentuk laman web anda.

API JavaScript: Kawalan Programmatik

Memandangkan rujukan elemen dialog :

 dialog.show ();
dialog.hide ();

Untuk tingkah laku modal, gunakan:

 dialog.showmodal ();

showModal() menguruskan latar belakang dan berinteraksi dengan "stack dialog yang belum selesai," yang membolehkan modal bersarang.

Penutupan berasaskan HTML: Borang Penyerahan

Menutup dialog boleh dicapai dengan mengemukakan borang di dalamnya:

Tutup

Latar belakang: isyarat visual

Secara programatik membuka a<dialog></dialog> secara automatik menyediakan latar belakang. Penampilan boleh disesuaikan dengan menggunakan pseudo-elemen ::backdrop . Sebagai contoh, untuk menggantikan latar belakang hitam separuh telus lalai dengan jalur merah:

Bonus sejuk: backdrop-filter membolehkan kesan seperti latar belakang kabur.

Pengurusan Fokus: Pertimbangan Kebolehcapaian

The<dialog></dialog> Elemen secara automatik mengalihkan tumpuan kepada dirinya sendiri apabila dibuka (diuji dengan suara pada macOS). Walaupun ia tidak semestinya perangkap fokus (sesuai untuk modal), teknik CSS dapat mencapai ini.

Rob Dodson dengan tepat menggambarkan modal sebagai "pertempuran bos pada akhir akses web." Orang asli<dialog></dialog> Elemen dengan ketara memudahkan cabaran ini, termasuk penutupan kunci <kbd>Escape</kbd> automatik. Mengklik di luar untuk menutup belum disokong, tetapi kemas kini masa depan mungkin menangani ini berdasarkan maklum balas pengguna. Artikel IRE memberikan pandangan yang tidak ternilai untuk membina dialog tersuai yang boleh diakses.