Baru di Chrome 99

Pete LePage

Berikut hal yang perlu Anda ketahui:

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

Saya Pete LePage. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 99.

Chrome 100 dan Firefox 100

Chrome 100 akan dikirimkan pada akhir Maret (2022), dan Firefox 100 akan diluncurkan tidak lama setelahnya pada awal bulan Mei. Keduanya merupakan pencapaian nomor versi utama dan terintegrasi 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 ada masalah.

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

Di menu Settings Nightly pada Firefox, Anda dapat mengaktifkan opsi "Firefox 100 User-Agent String". Ada baiknya untuk menguji situs Anda agar dapat memastikan semuanya berfungsi seperti yang diharapkan.

Periksa Chrome dan Firefox yang akan segera mencapai versi utama 100 untuk mengetahui detail lengkapnya.

Lapisan Bertingkat CSS

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

Mereka memperkenalkan lapisan baru ke jenjang CSS. Dengan gaya berlapis, prioritas lapisan selalu mengalahkan kekhususan pemilih.

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 eksplisit 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 terjadi karena adanya prioritas bertingkat. Gaya berlapis menciptakan bidang {i>cascade<i} baru.

Lapisan bertingkat menggunakan aturan @layer CSS didukung di Chrome 99, Firefox 97, dan Safari 15.4 Beta. Lihat Lapisan kasual akan hadir di browser Anda untuk informasi selengkapnya.

showPicker() untuk elemen input

Sejak lama, kita harus menggunakan library atau peretasan widget kustom untuk menampilkan pemilih tanggal. Ada metode showPicker() baru pada HTML InputElements. Metode ini merupakan cara kanonis untuk menampilkan alat pilih browser, tidak hanya untuk date, tetapi juga elemen time, color, dan elemen <input> lainnya dengan alat pilih.

Untuk menggunakannya, panggil showPicker() pada elemen <input>. Dalam contoh ini, saya menggabungkannya ke dalam blok try…catch. Hal tersebut memungkinkan saya memberikan penggantian, jika browser tidak mendukung API tersebut, atau tidak dapat menampilkan pemilih. Dengan demikian, memastikan 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 detail selengkapnya, dan semua jenis <input> yang dapat Anda gunakan showPicker().

Dan banyak lagi!

Tentu saja masih banyak lagi.

Canvas2D API telah diupdate, menambahkan fungsi baru, termasuk:

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

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

Dan API pengenalan tulis tangan kini telah tersedia.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan pada Chrome 99.

• Yang baru di Chrome DevTools (99)
• Penghentian dan penghapusan Chrome 99
• Update ChromeStatus.com untuk Chrome 99
• Daftar perubahan repositori sumber Chromium
• Kalender rilis Chrome

Langganan

Untuk terus mengikuti info terbaru, berlangganan 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 ada di sini untuk memberi tahu Anda apa yang baru di Chrome!