Baru di Chrome 99

Pete LePage

Berikut hal yang perlu Anda ketahui:

  • Hitung mundur ke versi 100 Chrome dan Firefox hanya berjarak beberapa minggu lagi.
  • Lapisan kaskade CSS memberi Anda kontrol lebih besar atas CSS, dan membantu mencegah konflik spesifik gaya.
  • Metode showPicker() memungkinkan Anda secara terprogram menampilkan pemilih browser untuk elemen <input> seperti date, color, dan datalist.
  • Dan masih banyak lagi.

Saya Pete LePage. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 99.

Chrome 100 dan Firefox 100

Chrome 100 dirilis pada akhir Maret (2022), dan Firefox 100 dirilis tidak lama setelahnya pada awal Mei. Keduanya merupakan tonggak pencapaian nomor versi utama dan akan di-roll over menjadi tiga digit. Namun, jika kode Anda mengharapkan dua digit, nomor versi baru dapat menyebabkan masalah bagi Anda.

Setiap kode yang memeriksa nomor versi, atau mengurai string agen pengguna harus diperiksa untuk memastikan tidak akan ada masalah.

Halaman laporan Chrome menandai opsi #force-major-version-to-100 baru

Di Chrome, tanda #force-major-version-to-100 akan mengubah nomor versi saat ini menjadi 100.

Selain itu, di menu Setelan Firefox Nightly, Anda dapat mengaktifkan opsi "Firefox 100 User-Agent String". Sebaiknya uji situs Anda agar dapat memastikan semuanya berfungsi seperti yang diharapkan.

Lihat Chrome dan Firefox segera mencapai versi utama 100 untuk detail selengkapnya.

Lapisan Cascade CSS

Dukungan untuk Lapisan Cascade CSS dan aturan @layer CSS akan hadir di Chrome 99. Cookie ini memberikan kontrol yang lebih eksplisit atas file CSS Anda untuk mencegah konflik kekhususan gaya. Hal ini sangat berguna untuk codebase besar, sistem desain, dan saat mengelola gaya pihak ketiga dalam aplikasi.

Keduanya memperkenalkan lapisan baru ke cascade CSS. Dengan gaya berlapis, prioritas lapisan selalu mengalahkan kekhususan pemilih.

Ilustrasi dari demo project tentang pengelompokan UI

Jika Anda mencoba menata gaya link, di dalam .card, dalam .post, Anda akan menemukan bahwa pemilih yang lebih spesifik akan diterapkan. Dengan menggunakan aturan @layer, Anda dapat lebih jelas tentang kekhususan gaya masing-masing, dan memastikan bahwa gaya link di kartu Anda menggantikan gaya link di postingan Anda.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Hal ini karena prioritas cascade. Gaya berlapis membuat bidang jenjang baru.

Lapisan kaskade yang menggunakan aturan @layer CSS didukung di Chrome 99, Firefox 97, dan Safari 15.4 Beta. Lihat artikel Lapisan cascade akan hadir di browser Anda untuk mengetahui informasi selengkapnya.

showPicker() untuk elemen input

Selama ini, kita harus menggunakan library widget kustom atau hack untuk menampilkan pemilih tanggal. Ada metode showPicker() baru di InputElements HTML. Ini adalah cara kanonis untuk menampilkan alat pilih browser, tidak hanya untuk date, tetapi juga elemen time, color, dan elemen <input> lainnya dengan alat pilih.

Screenshot alat pilih browser
Pemilih tanggal browser di desktop Chrome, perangkat seluler Chrome, desktop Safari, perangkat seluler Safari, dan desktop Firefox (Juli 2021).

Untuk menggunakannya, panggil showPicker() pada elemen <input>. Dalam contoh ini, saya menggabungkannya dalam blok try…catch. Tindakan ini memungkinkan saya menyediakan penggantian, jika browser tidak mendukung API, atau tidak dapat menampilkan pemilih. Dengan demikian, pengguna tetap mendapatkan pengalaman yang baik.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Lihat Menampilkan pemilih browser untuk tanggal, waktu, warna, dan file untuk mengetahui detail lengkap, dan semua jenis <input> yang dapat Anda gunakan untuk showPicker().

Dan banyak lagi!

Tentu saja masih banyak lagi.

Canvas2D API telah diupdate, dengan menambahkan fungsi baru, termasuk:

  • Dua peristiwa baru untuk ContextLost dan ContextRestored
  • Opsi willReadFrequently
  • Dukungan pengubah teks CSS lainnya
  • Dan masih banyak lagi.

Ada uji coba origin baru untuk memungkinkan PWA memberikan warna alternatif dalam manifes aplikasi web untuk mode gelap.

Selain itu, API pengenalan tulisan tangan kini telah hadir.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 99.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 100 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.