Fitur dasar pengukuran yang dapat Anda gunakan sekarang

Pelajari beberapa fitur yang merupakan bagian dari Dasar Pengukuran.

Web terus berkembang dan browser terus diupdate untuk memberi developer alat baru guna berinovasi di platform ini. 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 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 native, 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 berperforma tinggi untuk menambahkan gerakan ke situs Anda.
Anda mungkin sudah terbiasa menulis transformasi CSS dengan tiga properti dalam satu baris.
Dengan setiap properti transformasi, 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 mendetail atas transformasi CSS dengan properti transformasi individual.

Unit area pandang baru

Di perangkat seluler, ukuran area pandang dipengaruhi oleh keberadaan atau tidak adanya toolbar dinamis.
Terkadang Anda melihat kolom URL dan toolbar navigasi, tetapi terkadang toolbar tersebut dicabut sepenuhnya.
Ukuran area pandang yang sebenarnya akan berbeda-beda tergantung 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 peretasan 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 Penyalinan mendalam di 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. Pseudo-class 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 pada Mempelajari CSS untuk mengetahui informasi selengkapnya.

Antarmuka TransformStream

Antarmuka TransformStream pada Streams API memungkinkan untuk menyalurkan streaming 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 lebih banyak kejelasan tentang kumpulan fitur Dasar Pengukuran ini. Lihat web.dev/baseline untuk mengetahui detail yang sedang berlangsung.

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 upaya yang kami lakukan membantu Anda, atau jika Anda memerlukan berbagai jenis dukungan. Jadi, hubungi kami di Grup Komunitas WebDX.