Baru di Chrome 123

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita lihat apa saja yang baru untuk developer di Chrome 123.

Fungsi CSS light-dark().

Fungsi light-dark() di CSS memungkinkan Anda membuat warna yang beradaptasi dengan preferensi pengguna untuk mode terang atau gelap. Gunakan fungsi light-dark() untuk menentukan dua nilai warna yang berbeda dalam satu properti CSS.

Browser akan otomatis memilih warna yang sesuai berdasarkan nilai color-scheme elemen yang dihitung. Misalnya, dengan CSS berikut:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • Jika pengguna memilih tema terang, elemen akan memiliki latar belakang hijau limau.
  • Jika pengguna memilih tema gelap, elemen akan memiliki latar belakang hijau.

Long Animation Frames API.

Long Animation Frames API tersedia untuk membantu Anda menemukan penyebab kemacetan thread utama yang sering kali menjadi penyebab INP buruk (Interaction to Next Paint)—Core Web Vital yang mengukur responsivitas situs.

API baru ini adalah versi yang ditingkatkan dari Long Tasks API, yang memberikan pemahaman yang lebih baik tentang update antarmuka pengguna yang lambat. Long Animation Frames API memungkinkan Anda mengukur pekerjaan pemblokiran. Alat ini mengukur tugas bersama dengan update rendering berikut dan menambahkan informasi seperti skrip yang berjalan lama, waktu rendering, dan waktu yang dihabiskan dalam tata letak dan gaya paksa, yang dikenal sebagai thrashing tata letak.

Mengumpulkan dan menganalisis informasi ini memungkinkan Anda mengidentifikasi dan memecahkan masalah bottleneck performa. Anda dapat merekam frame panjang dengan kode berikut.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API Pemilihan Rute Statis pekerja layanan.

Dengan menggunakan pekerja layanan, Anda dapat membuat situs berfungsi secara offline dan membuat strategi penyimpanan dalam cache yang dapat meningkatkan performa.

Namun, mungkin ada biaya performa saat halaman dimuat untuk pertama kalinya dalam beberapa waktu dan pekerja layanan pengontrol tidak berjalan pada saat itu. Karena semua pengambilan harus dilakukan melalui pekerja layanan, browser harus menunggu pekerja layanan dimulai dan berjalan untuk mengetahui konten yang akan dimuat.

Dengan Service Worker Static Routing API, pada waktu penginstalan, Anda dapat mendeklarasikan jalur agar selalu ditayangkan dari jaringan. Saat URL terkontrol dimuat nanti, browser dapat mulai mengambil resource dari jalur tersebut sebelum pekerja layanan selesai dimulai. Tindakan ini akan menghapus pekerja layanan dari URL yang Anda ketahui tidak memerlukan pekerja layanan.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Anda dapat menawarkan halaman yang disesuaikan berdasarkan tempat pengguna membuka halaman dengan antarmuka NavigationActivation.

  • Chrome kini memiliki dukungan untuk Zstandard (zstd). Content-Encoding ini membantu memuat halaman lebih cepat dan menggunakan lebih sedikit bandwidth, serta menghabiskan lebih sedikit waktu, CPU, dan daya pada kompresi di server, sehingga mengurangi biaya server.

  • notRestoredReasons API untuk bfcache diluncurkan dari Chrome 123. Dengan begitu, pemilik situs dapat mengumpulkan alasan di kolom tentang mengapa bfcache tidak dapat digunakan. Pemilik situs dapat menggunakannya untuk meningkatkan penggunaan bfcache yang memungkinkan navigasi histori yang lebih cepat.

  • Nilai picture-in-picture untuk display-mode memungkinkan Anda menulis aturan CSS tertentu yang hanya berlaku saat aplikasi web ditampilkan dalam mode picture-in-picture. Contoh:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Periksa link berikut untuk mengetahui perubahan tambahan di Chrome 123.

Langganan

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

Yo soy Adriana Jara, dan segera setelah Chrome 124 dirilis, saya akan segera hadir untuk memberi tahu Anda yang baru di Chrome.