Fitur dasar pengukuran yang dapat Anda gunakan sekarang

Pelajari beberapa fitur yang merupakan bagian dari Dasar Pengukuran.

Mariko Kosaka

Web selalu berkembang dan browser terus diperbarui guna memberi developer alat baru untuk berinovasi di platform ini. Hal-hal yang sebelumnya memerlukan library bantuan menjadi bagian dari platform web dan didukung di semua browser, bersama dengan cara yang lebih pendek atau lebih mudah untuk mengkodekan elemen desain.

Meskipun evolusi dan adaptasi yang konstan ini membantu, hal itu juga bisa menimbulkan kebingungan. Mungkin sulit untuk menavigasi semua pembaruan ini. Sebagai developer, kami memiliki pertanyaan seperti, "Kapan semua mesin browser akan mendukung fitur baru ini?" "Kapan saya dapat mulai menggunakan fitur-fitur tersebut dalam kode produksi saya?" "Berapa lama kami harus mendukung browser lama?"

Jawaban yang benar adalah "tergantung". Apa yang dibutuhkan 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 sepakati, adalah bahwa lanskap web saat ini dapat menyulitkan untuk membuat keputusan tersebut.

Tim Chrome berkolaborasi dengan mesin browser lain dan komunitas web untuk memberikan kejelasan lebih lanjut. Hal ini mencakup tugas kami pada project seperti Interop 2023 yang membantu meningkatkan interoperabilitas sejumlah fitur utama. Namun, bagaimana dengan fitur yang hadir dalam beberapa tahun terakhir? Apakah fitur eksperimental yang kami pelajari sekitar dua tahun lalu siap digunakan?

Dalam postingan ini, saya ingin menyoroti beberapa fitur yang sekarang tersedia untuk semua mesin browser utama pada dua versi utama terakhir. Ini adalah titik terpotong di mana kami merasa sebagian besar developer akan merasa bahwa suatu fitur aman digunakan, dan merupakan set fitur yang kami sebut sebagai Dasar Pengukuran. Untuk mengetahui 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.

Dukungan Browser

• 37
• 79
• 98
• 15,4

Sumber

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 penyimpanan konteks yang bertumpuk sudah disertakan. Untuk informasi selengkapnya, baca Membangun komponen dialog.

Masing-masing properti transformasi CSS

Menggunakan transformasi CSS adalah cara berperforma tinggi untuk menambahkan gerakan ke situs Anda.
Anda mungkin familier dengan penulisan 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;
}

Dukungan Browser

• 104
• 104
• 72
• 14,1

Sumber

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 bilah URL dan bilah alat navigasi terlihat, tetapi terkadang bilah alat tersebut dicabut sepenuhnya.
Ukuran area pandang yang sebenarnya akan berbeda-beda 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 seluler. Anda dapat mempelajari lebih lanjut di artikel Unit area pandang besar, kecil, dan dinamis.

Dukungan Browser

• 108
• 108
• 101
• 15,4

Salinan mendalam di JavaScript

Sebelumnya, untuk membuat salinan mendalam dari sebuah objek tanpa referensi ke objek asli, peretasan populer adalah JSON.stringify yang dikombinasikan dengan JSON.parse. Ini adalah peretasan umum sehingga V8 (mesin javascript Chrome) secara agresif meningkatkan kinerja 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);

Dukungan Browser

• 98
• 98
• 94
• 15,4

Sumber

Lihat Penyalinan mendalam di JavaScript menggunakan StructuredClone untuk mengetahui detail selengkapnya.

Class semu :focus-visible

Sebagai developer web, kita semua sudah tidak asing dengan "lingkaran fokus" itu yang muncul ketika Anda menavigasi laman dengan {i>keyboard<i} atau mengeklik elemen {i>input<i}. Ini adalah fitur yang diperlukan untuk aksesibilitas tetapi terkadang menghalangi desain visual untuk pengguna yang berbeda. Class semu CSS :focus-visible memeriksa apakah browser yakin bahwa fokus harus terlihat. Anda kini dapat menetapkan gaya hanya untuk saat fokus seharusnya terlihat.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

Dukungan Browser

• 86
• 86
• 85
• 15,4

Sumber

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 tersebut ke lokasi lain saat data diteruskan. Artikel Permintaan streaming dengan pengambilan API memandu Anda dalam contoh kasus penggunaan ini.

Dukungan Browser

• 67
• 79
• 102
• 14,1

Sumber

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 informasi yang lebih jelas pada set fitur Dasar Pengukuran ini. Lihat web.dev/baseline untuk mengetahui detail selengkapnya.

Jika Anda ingin terus mendapatkan info terbaru, tim kami memublikasikan artikel saat fitur dapat dioperasikan, dan memublikasikan update bulanan tentang apa yang terjadi di platform web, mulai dari fitur eksperimental hingga fitur yang baru dapat dioperasikan.

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.