Baru di Chrome 115

Adriana Jara

Berikut hal yang perlu Anda ketahui:

  • Gunakan ScrollTimeline dan ViewTimeline untuk membuat animasi berbasis scroll yang meningkatkan pengalaman pengguna.
  • Frame dengan fence berfungsi bersama Privacy Sandbox API lainnya untuk menyematkan konten yang relevan sekaligus mencegah berbagi konteks yang tidak perlu.
  • Dengan Topics API, browser dapat membagikan informasi tentang minat pengguna kepada pihak ketiga sekaligus menjaga privasi.
  • Dan masih banyak lagi.

Saya Adriana Jara. Mari selami dan lihat apa saja yang baru untuk developer di Chrome 115.

Animasi berbasis scroll

Animasi berbasis scroll adalah pola UX yang umum di web. Animasi berbasis scroll ditautkan ke posisi scroll dalam container scroll. Artinya, saat Anda melakukan scroll ke atas atau ke bawah, animasi yang ditautkan akan bergerak maju atau mundur sebagai respons langsung.

Contoh berikut menunjukkan beberapa kasus penggunaan. Misalnya, Anda dapat membuat indikator pembacaan yang bergerak saat men-scroll:

Indikator pembacaan di atas dokumen, yang dipicu oleh scroll.

Animasi berbasis scroll juga dapat membuat elemen yang memudar saat muncul di tampilan:

Gambar di halaman ini akan memudar saat muncul di tampilan.

Secara default, animasi yang terkait dengan suatu elemen berjalan di linimasa dokumen. Waktu asalnya dimulai dari 0 saat halaman dimuat, dan mulai berdetak maju seiring waktu jam berjalan. Ini adalah linimasa animasi default, dan sampai sekarang, merupakan satu-satunya linimasa animasi yang dapat Anda akses.

Spesifikasi Animasi Berbasis Scroll menentukan dua jenis linimasa baru yang dapat Anda gunakan:

  • Linimasa Progres Scroll: linimasa yang ditautkan ke posisi scroll container scroll di sepanjang sumbu tertentu.
  • Linimasa Progres Tampilan: linimasa yang ditautkan ke posisi relatif elemen tertentu dalam container scroll-nya.

Berikut adalah contoh kode yang menggunakan Linimasa Progres Scroll anonim untuk membuat indikator progres membaca yang tetap berada di bagian atas area pandang.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Baca animasi scroll-drive untuk semua detail dan contoh lainnya.

Kerangka Berpagar

Privacy Sandbox adalah inisiatif yang bertujuan untuk menciptakan teknologi yang melindungi privasi pengguna secara online dan memberikan alat kepada developer untuk membangun bisnis digital yang sukses.

Banyak dari proposalnya bertujuan untuk memenuhi kasus penggunaan lintas situs tanpa cookie pihak ketiga atau mekanisme pelacakan lain. Contoh:

  • Protected Audience API: memungkinkan penayangan iklan menurut minat dengan cara yang menjaga privasi.
  • Penyimpanan Bersama: memungkinkan akses ke data lintas situs yang tidak dipartisi dalam lingkungan yang aman.

Untuk menjaga privasi, beberapa API ini memerlukan cara baru untuk menyematkan konten. Solusinya disebut frame dengan fence.

Frame dengan pagar berfungsi bersama dengan proposal Privacy Sandbox lainnya untuk menampilkan dokumen dari berbagai partisi penyimpanan dalam satu halaman.

Frame dengan fence adalah elemen HTML untuk konten tersemat, mirip dengan iframe. Tidak seperti iframe, frame dengan fence membatasi komunikasi dengan konteks embeddingnya, untuk memungkinkan akses frame ke data lintas situs tanpa membagikannya dengan konteks sematan.

Demikian pula, data pihak pertama apa pun dalam konteks penyematan tidak dapat dibagikan ke fence dengan frame.

Fitur iframe fencedframe
Menyematkan konten Ya Ya
Konten yang disematkan dapat mengakses DOM konteks penyematan Ya Tidak
Menyematkan konteks dapat mengakses DOM konten yang disematkan Ya Tidak
Atribut yang dapat diobservasi, seperti name Ya Tidak
URL (http://example.com) Ya Ya (bergantung pada kasus penggunaan)
Sumber buram yang dikelola browser (urn:uuid) Tidak Ya
Akses ke data lintas situs Tidak Ya (bergantung pada kasus penggunaan)

Misalnya, news.example (konteks penyematan) menyematkan iklan dari shoes.example dalam frame dengan fence. news.example tidak boleh mengambil data yang tidak sah dari iklan shoes.example, dan shoes.example tidak dapat mempelajari data pihak pertama dari news.example.

Perbandingan sebelum dan setelah status partisi penyimpanan.

Baca artikel ini untuk mendapatkan dokumentasi tentang Bingkai dengan Fence, Protected Audience API, Penyimpanan Bersama, dan lainnya

Topics API

Sebelumnya, cookie pihak ketiga dan mekanisme lainnya telah digunakan untuk melacak perilaku penjelajahan pengguna di seluruh situs untuk menyimpulkan topik yang diminati. Mekanisme ini dihentikan secara bertahap sebagai bagian dari inisiatif Privacy Sandbox.

Topics API memungkinkan browser membagikan informasi tentang minat pengguna kepada pihak ketiga sekaligus menjaga privasi.

Topics API memungkinkan periklanan menurut minat (PMM) tanpa melacak situs yang dikunjungi pengguna. Browser mengamati dan merekam topik yang tampaknya menarik bagi pengguna, berdasarkan aktivitas penjelajahan mereka. Informasi ini dicatat di perangkat pengguna.

Misalnya, API mungkin menyarankan topik "Fiber & Textile Arts" untuk pengguna yang mengunjungi situs knitting.example.

Topik merupakan sinyal untuk membantu platform teknologi iklan memilih iklan yang relevan. Tidak seperti cookie pihak ketiga, informasi ini dibagikan tanpa mengungkapkan informasi lebih lanjut tentang pengguna itu sendiri atau aktivitas penjelajahan pengguna.

Baca ringkasan Privacy Sandbox untuk mengetahui semua detail tentang taksonomi topik dan menggunakan Topics API

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Ukuran maksimum WebAssembly.Module di thread utama ditingkatkan menjadi 8 megabyte
  • Properti display CSS kini menerima beberapa kata kunci sebagai nilai, selain kata kunci lama yang sudah dikomposisi sebelumnya.
  • Terdapat uji coba origin untuk Compute Pressure API, yang menawarkan informasi umum tentang status hardware perangkat saat ini.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 115.

Langganan

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 116 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!