Pelajari beberapa fitur yang merupakan bagian dari Dasar Pengukuran.
Dipublikasikan: 10 Mei 2023
Web terus berkembang dan browser terus diupdate untuk memberi developer alat baru guna berinovasi di platform. Hal-hal yang sebelumnya memerlukan library helper menjadi bagian dari platform web dan didukung di semua browser, beserta cara yang lebih singkat atau lebih mudah untuk membuat kode elemen desain.
Meskipun evolusi dan adaptasi yang konstan ini bermanfaat, hal ini juga dapat menimbulkan kebingungan. Mungkin sulit untuk menavigasi semua update ini. Sebagai developer, kita memiliki pertanyaan seperti, "Kapan semua mesin browser akan mendukung fitur baru ini?" "Kapan saya dapat mulai menggunakan fitur tersebut dalam kode produksi saya?" "Berapa lama kita harus mendukung browser lama?"
Jawaban yang benar adalah "tergantung". Apa yang diperlukan dan apa yang dapat digunakan benar-benar bergantung pada basis pengguna, stack teknologi, struktur tim, dan perangkat yang didukung. Namun, satu hal yang kita semua setujui adalah bahwa lanskap web saat ini dapat menyulitkan pengambilan keputusan tersebut.
Tim Chrome berkolaborasi dengan mesin browser lain dan komunitas web untuk memberikan lebih banyak kejelasan. Hal ini mencakup pekerjaan kami pada project seperti Interop 2023 yang membantu meningkatkan interoperabilitas serangkaian fitur utama. Namun, bagaimana dengan fitur yang diluncurkan dalam beberapa tahun terakhir? Apakah fitur eksperimental yang kita pelajari dua tahun lalu sudah siap digunakan?
Dalam postingan ini, saya ingin menyoroti beberapa fitur yang kini tersedia untuk semua mesin browser utama selama dua versi utama terakhir. Ini adalah titik henti sementara saat kami merasa bahwa sebagian besar developer akan merasa bahwa fitur tersebut aman digunakan, dan merupakan kumpulan fitur yang kami sebut Dasar Pengukuran. Untuk mengetahui informasi selengkapnya, lihat pengumuman Baseline di sini.
Elemen dialog
Elemen <dialog>
adalah elemen HTML baru untuk membuat perintah dialog seperti pop-up dan modal.
Untuk menggunakannya, tentukan elemen modal, lalu buka dialog dengan memanggil metode showModal()
pada elemen dialog.
<dialog id="d">
<form method="dialog">
<p>Hi, I'm a dialog.</p>
<button>ok</button>
</form>
</dialog>
<button onclick="d.showModal()">
Open Dialog
</button>
Sebagai elemen HTML bawaan, fitur seperti pengelolaan fokus, pelacakan tab, dan mempertahankan konteks penumpukan sudah terintegrasi. Untuk mengetahui informasi selengkapnya, baca Mem-build komponen dialog.
Setiap properti transform CSS
Menggunakan transformasi CSS adalah cara yang berperforma tinggi untuk menambahkan gerakan ke situs Anda. Anda mungkin sudah terbiasa menulis transformasi CSS dengan tiga properti dalam satu baris. Dengan properti transformasi individual, Anda kini dapat menentukan properti transformasi satu per satu. Hal ini berguna saat Anda menulis animasi keyframe yang kompleks.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Untuk penjelasan mendalam tentang perubahan ini, baca Kontrol yang lebih terperinci atas transformasi CSS dengan setiap properti transformasi.
Unit area pandang baru
Di perangkat seluler, ukuran area pandang dipengaruhi oleh keberadaan atau tidak adanya toolbar dinamis.
Terkadang Anda dapat melihat kolom URL dan toolbar navigasi, tetapi terkadang toolbar tersebut sepenuhnya disembunyikan.
Ukuran area pandang yang sebenarnya akan berbeda, bergantung pada apakah toolbar terlihat atau tidak.
Unit area pandang baru seperti svh
dan lvh
memberi developer web kontrol yang lebih baik saat mendesain untuk perangkat seluler. Anda dapat mempelajari lebih lanjut di artikel Unit area pandang besar, kecil, dan dinamis.
Deep copy di JavaScript
Sebelumnya, untuk membuat salinan mendalam objek tanpa referensi ke objek asli, hack populer adalah JSON.stringify
yang digabungkan dengan JSON.parse
. Ini adalah hack yang sangat umum sehingga V8 (mesin JavaScript Chrome) secara agresif meningkatkan performa trik ini. Namun, Anda tidak memerlukan hack ini lagi dengan structuredClone
.
const original = {id: 0, prop: {name: "Tom"}}
/* Old hack */
const deepCopy = JSON.parse(JSON.stringify(original));
/* New way */
const deepCopy = structuredClone(original);
Lihat Pembuatan salinan dalam JavaScript menggunakan structuredClone untuk mengetahui detail selengkapnya.
Pseudo-class :focus-visible
Sebagai developer web, kita semua sudah terbiasa dengan "cincin fokus" yang muncul saat Anda membuka halaman dengan keyboard atau mengklik elemen input. Ini adalah fitur yang diperlukan untuk aksesibilitas, tetapi terkadang mengganggu desain visual untuk pengguna yang berbeda. Pseudoclass CSS :focus-visible
memeriksa apakah browser yakin bahwa fokus harus terlihat. Anda kini dapat menentukan gaya hanya saat fokus harus terlihat.
/* focus with tab key */
:focus-visible {
outline: 5px solid pink;
}
/* mouse click */
:focus:not(:focus-visible) {
outline: none;
}
Lihat bagian Fokus di Pelajari CSS untuk mengetahui informasi selengkapnya.
Antarmuka TransformStream
Antarmuka TransformStream
Streams API memungkinkan pemipaan aliran ke satu sama lain.
Misalnya, Anda dapat melakukan streaming data dari satu tempat, lalu mengompresi aliran data ke lokasi lain saat data diteruskan. Artikel Streaming permintaan dengan fetch API memandu Anda melalui contoh kasus penggunaan ini.
Rangkuman
Ada banyak fitur lainnya yang baru-baru ini menjadi interoperabilitas dan stabil untuk digunakan di platform web. Ke depannya, kami akan bekerja sama dengan Grup Komunitas WebDX untuk memberikan kejelasan yang lebih baik tentang kumpulan fitur Dasar Pengukuran ini. Lihat halaman Dasar pengukuran untuk pengembangan baru.
Jika Anda ingin terus mendapatkan informasi terbaru, tim kami memublikasikan artikel saat fitur menjadi interoperabilitas, dan memublikasikan pembaruan bulanan tentang apa yang terjadi di platform web, mulai dari fitur eksperimental hingga yang baru interoperabilitas.
Kami selalu ingin tahu apakah apa yang kami lakukan membantu Anda, atau apakah Anda memerlukan jenis dukungan lain. Jadi, hubungi kami di Grup Komunitas WebDX.