Baru di Chrome 115

Adriana Jara

Berikut hal yang perlu Anda ketahui:

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

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

Animasi yang didorong scroll

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

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

Indikator pembacaan di atas dokumen, yang didorong oleh scroll.

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

Gambar di halaman ini akan memudar saat muncul.

Secara default, animasi yang terkait dengan suatu elemen berjalan di linimasa dokumen. Waktu asalnya dimulai pada 0 saat halaman dimuat, dan mulai bergerak maju seiring dengan berjalannya waktu. 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 dalam penampung 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 disematkan ke 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 mengetahui semua detail dan contoh lainnya.

Bingkai dengan Pagar

Privacy Sandbox adalah inisiatif yang bertujuan 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 lainnya. Contoh:

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

Untuk menjaga privasi, beberapa API ini memerlukan cara baru untuk menyematkan konten. Solusi ini disebut frame berpagar.

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

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

Demikian pula, data pihak pertama apa pun dalam konteks penyematan tidak dapat dibagikan ke bingkai yang dibatasi.

Fitur iframe fencedframe
Menyematkan konten Ya Ya
Konten tersemat dapat mengakses DOM konteks penyematan Ya Tidak
Konteks penyematan dapat mengakses DOM konten tersemat Ya Tidak
Atribut yang dapat diamati, 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 bingkai berpagar. news.example tidak dapat mengeksfiltrasi data dari iklan shoes.example, dan shoes.example tidak dapat mempelajari data pihak pertama dari news.example.

Perbandingan status sebelum dan sesudah partisi penyimpanan.

Baca artikel ini untuk dokumentasi tentang Bingkai Berpagar, 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 minat. Mekanisme ini dihentikan secara bertahap sebagai bagian dari inisiatif Privacy Sandbox.

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

Topics API memungkinkan iklan berbasis minat (IBA) tanpa melacak situs yang dikunjungi pengguna. Browser mengamati dan mencatat 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 adalah 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 penggunaan Topics API

Dan banyak lagi!

Tentu saja masih banyak lagi.

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

Bacaan lebih lanjut

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

Langganan

Untuk terus mendapatkan 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 saja yang baru di Chrome!