Fitur dasar pengukuran yang dapat Anda gunakan sekarang

Pelajari hanya beberapa fitur yang merupakan bagian dari Dasar Pengukuran.

Web selalu berkembang dan browser terus diupdate untuk memberikan alat-alat baru kepada developer untuk 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 mudah untuk mengkodekan elemen desain.

Meskipun evolusi dan adaptasi yang konstan ini bermanfaat, hal itu juga bisa menimbulkan kebingungan. Anda mungkin kesulitan untuk menjelajahi semua pembaruan ini. Sebagai developer, kami memiliki pertanyaan seperti, "Kapan semua mesin browser akan mendukung fitur baru ini?" "Kapan saya bisa benar-benar mulai menggunakan fitur-fitur tersebut dalam kode produksi?" "Untuk berapa lama kami harus mendukung browser lama?"

Jawaban yang benar adalah "tergantung". Apa yang diperlukan dan apa yang dapat digunakan sangat bergantung pada basis pengguna, tech stack, struktur tim Anda, dan perangkat yang didukung. Namun, satu hal yang kita semua setuju adalah bahwa lanskap web saat ini dapat menyulitkan untuk membuat keputusan tersebut.

Tim Chrome berkolaborasi dengan mesin browser lainnya dan komunitas web untuk meningkatkan kejelasan. Hal ini mencakup pekerjaan pada project seperti Interop 2023 yang membantu meningkatkan interoperabilitas serangkaian fitur utama. Namun, bagaimana dengan fitur yang tersedia dalam beberapa tahun terakhir? Apakah fitur eksperimental yang kita pelajari sekitar dua tahun lalu siap digunakan?

Dalam postingan ini, saya ingin menyoroti beberapa fitur yang kini tersedia di semua mesin browser utama selama dua versi utama terakhir. Ini adalah titik potong di mana kami merasa bahwa mayoritas developer akan merasa bahwa fitur ini aman digunakan, dan merupakan set fitur yang kami sebut Baseline. Untuk informasi selengkapnya, lihat pengumuman Dasar Pengukuran 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, terdapat berbagai fitur seperti pengelolaan fokus, pelacakan tab, dan penumpukan konteks. Untuk mengetahui informasi selengkapnya, baca Membuat komponen dialog.

Setiap properti transformasi CSS

Menggunakan transformasi CSS adalah cara yang efektif 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 mendetail atas transformasi CSS dengan properti transformasi individual.

Unit area pandang baru

Pada perangkat seluler, ukuran area pandang dipengaruhi oleh ada atau tidaknya toolbar dinamis.
Terkadang Anda melihat kolom URL dan toolbar navigasi, tetapi terkadang toolbar tersebut terbuka sepenuhnya.
Ukuran area pandang yang sebenarnya akan berbeda, bergantung pada apakah toolbar terlihat atau tidak.
Unit area pandang baru seperti svh dan lvh memberikan kontrol yang lebih baik kepada developer web saat mendesain untuk perangkat seluler. Anda dapat mempelajari lebih lanjut di artikel Unit area pandang besar, kecil, dan dinamis.

Salinan mendalam di JavaScript

Sebelumnya, untuk membuat salinan objek yang mendalam tanpa referensi ke objek aslinya, peretasan populer adalah JSON.stringify yang dikombinasikan dengan JSON.parse. Ini adalah peretasan umum sehingga V8 (mesin JavaScript Chrome) meningkatkan kinerja trik ini secara agresif. 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 dalam di JavaScript menggunakan structuredClone untuk detail selengkapnya.

Class pseudo :focus-visible

Sebagai pengembang web, kita semua sudah mengenal "lingkaran fokus" yang muncul ketika Anda menavigasi laman dengan keyboard atau mengeklik elemen masukan. Ini adalah fitur yang diperlukan untuk aksesibilitas, tetapi terkadang menghalangi desain visual untuk pengguna yang berbeda. Class pseudo CSS :focus-visible memeriksa apakah browser yakin bahwa fokus harus terlihat. Anda kini dapat menentukan gaya hanya jika 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 Streams API memungkinkan untuk menyalurkan streaming satu sama lain.

Misalnya, Anda dapat melakukan streaming data dari satu tempat, lalu mengompresi aliran data ke lokasi lain saat data diteruskan. Artikel Permintaan streaming dengan API pengambilan memandu Anda memahami contoh kasus penggunaan ini.

Penutup

Ada banyak fitur lainnya yang baru-baru ini memiliki interoperabilitas dan stabil untuk digunakan di platform web. Ke depannya, kami akan bekerja sama dengan Grup Komunitas WebDX agar set fitur Dasar Pengukuran ini lebih jelas. Lihat web.dev/baseline untuk mengetahui detail berkelanjutan.

Jika Anda ingin mengetahui informasi terbaru, tim kami memublikasikan artikel saat fitur dapat dioperasikan bersama, dan memublikasikan info terbaru setiap bulan tentang hal yang terjadi di platform web, mulai dari fitur eksperimental hingga fitur yang baru dapat dioperasikan.

Kami selalu ingin tahu apakah cara kami membantu Anda, atau jika Anda memerlukan berbagai jenis dukungan, jadi hubungi kami di Grup Komunitas WebDX.