Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 123

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Sesuaikan skema warna Anda dengan fungsi light-dark() yang baru.
Diagnosis responsivitas di situs Anda dengan Long Animation Frames API.
Hindari penalti performa saat mulai pekerja layanan dengan Service Worker Static Routing API.
Dan masih banyak lagi.

Saya Adriana Jara. Mari selami dan lihat hal-hal 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 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 berwarna 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 menjadi penyebab INP buruk (Interaction to Next Paint)—Core Web Vital yang mengukur responsivitas situs.

API baru ini adalah versi Long Tasks API yang ditingkatkan, yang memberikan pemahaman lebih baik tentang update antarmuka pengguna yang lambat. Long Animation Frames API memungkinkan Anda mengukur tugas pemblokiran. Library ini mengukur tugas-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 layout thrashing.

Dengan mengumpulkan dan menganalisis informasi ini, Anda dapat mengidentifikasi dan memecahkan masalah bottleneck performa. Anda dapat mengambil frame panjang dengan kode berikut.

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

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

Static Routing API pekerja layanan.

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

Namun, mungkin terdapat biaya performa saat halaman dimuat untuk pertama kalinya dan pekerja layanan yang mengontrol tidak berjalan pada saat itu. Karena semua pengambilan harus terjadi melalui pekerja layanan, browser harus menunggu pekerja layanan dimulai dan dijalankan untuk mengetahui konten yang akan dimuat.

Dengan Service Worker Static Routing API, saat penginstalan, Anda dapat mendeklarasikan jalur agar selalu disalurkan dari jaringan. Ketika URL yang dikontrol kemudian dimuat, browser dapat mulai mengambil resource dari jalur tersebut sebelum pekerja layanan selesai dimulai. Ini akan menghapus pekerja layanan dari URL yang 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 navigasi pengguna 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 pada server, sehingga mengurangi biaya server.
notRestoredReasons API untuk bfcache akan diluncurkan dari Chrome 123. Dengan demikian, pemilik situs dapat mengumpulkan alasan di kolom terkait alasan bfcache tidak dapat digunakan. Pemilik situs dapat menggunakannya untuk meningkatkan penggunaan bfcache yang memungkinkan navigasi histori lebih cepat.
Nilai picture-in-picture untuk display-mode memungkinkan Anda menulis aturan CSS khusus 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 mencakup beberapa sorotan utama. Periksa link berikut untuk melihat perubahan tambahan di Chrome 123.

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

Halo Adriana Jara, dan segera setelah Chrome 124 dirilis, saya akan langsung memberitahukan fitur baru di Chrome.