Baru di Chrome 69

Pete LePage

Sudah sepuluh tahun sejak Chrome pertama kali dirilis. Banyak hal telah berubah sejak saat itu, tetapi tujuan kami untuk membangun fondasi yang kokoh bagi aplikasi web modern tidak berubah.

Di Chrome 69, kami telah menambahkan dukungan untuk:

  • CSS Scroll Snap memungkinkan Anda membuat pengalaman scroll yang lancar dan mulus.
  • Potongan layar memungkinkan Anda menggunakan area layar secara penuh, termasuk ruang di balik potongan layar, yang terkadang disebut notch.
  • Web Locks API memungkinkan Anda memperoleh kunci secara asinkron, menahannya saat pekerjaan dilakukan, lalu melepaskannya.

Dan masih banyak lagi!

Saya Pete LePage. Mari kita lihat apa saja yang baru untuk developer di Chrome 69.

Ingin melihat daftar lengkap perubahan? Lihat daftar perubahan repositori sumber Chromium.

CSS Scroll Snap

CSS Scroll Snap memungkinkan Anda membuat pengalaman scroll yang lancar dan mulus, dengan mendeklarasikan posisi paskan scroll yang memberi tahu browser tempat berhenti setelah setiap operasi scroll. Cara ini sangat berguna untuk carousel gambar, atau bagian yang dipaginasi tempat Anda ingin pengguna men-scroll ke titik tertentu.

Untuk carousel gambar, saya akan menambahkan scroll-snap-type: x mandatory; ke penampung scroll, dan scroll-snap-align: center; ke setiap gambar. Kemudian, saat pengguna men-scroll carousel, setiap gambar akan di-scroll dengan lancar ke posisi yang sempurna.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS Scroll Snapping berfungsi dengan baik, bahkan saat target pengepasan memiliki ukuran yang berbeda atau saat target tersebut lebih besar daripada penggulir. Lihat postingan Well-Controlled Scrolling with CSS Scroll Snap untuk mengetahui detail dan contoh selengkapnya yang dapat Anda coba.

Potongan layar (alias notch)

ponsel dengan potongan layar
Browser menambahkan beberapa margin ekstra pada perangkat seluler dengan potongan layar untuk mencegah konten tertutup oleh potongan.

Ada semakin banyak perangkat seluler yang dirilis dengan potongan layar, yang terkadang disebut notch. Untuk mengatasi hal tersebut, browser menambahkan sedikit margin ekstra ke halaman Anda sehingga konten tidak tertutup oleh notch.

Namun, bagaimana jika Anda ingin menggunakan ruang tersebut?

Dengan variabel lingkungan CSS dan tag meta viewport-fit, kini Anda dapat melakukannya. Misalnya, untuk memberi tahu browser agar meluas ke area potongan layar, tetapkan properti viewport-fit, di tag meta viewport ke cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Anda kemudian dapat menggunakan safe-area-inset-* variabel lingkungan CSS untuk menata letak konten Anda.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Ada postingan menarik di blog WebKit tentang Mendesain Situs untuk iPhone X, atau lihat penjelasan untuk mengetahui detail selengkapnya.

Web Locks API

Web Locks API memungkinkan Anda memperoleh kunci secara asinkron, menahannya saat pekerjaan dilakukan, lalu melepaskannya. Selama kunci dipegang, tidak ada skrip lain di origin yang dapat mendapatkan kunci yang sama, sehingga membantu mengoordinasikan penggunaan resource bersama.

Misalnya, jika aplikasi web yang berjalan di beberapa tab ingin memastikan bahwa hanya satu tab yang disinkronkan ke jaringan, kode sinkronisasi akan mencoba mendapatkan kunci bernama network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Tab pertama yang mendapatkan kunci akan menyinkronkan data ke jaringan. Jika tab lain mencoba mendapatkan kunci yang sama, tab tersebut akan dimasukkan dalam antrean. Setelah kunci dilepaskan, permintaan yang diantrekan berikutnya akan diberi kunci, dan dieksekusi.

MDN memiliki pengantar Web Locks yang bagus dan menyertakan penjelasan yang lebih mendalam serta banyak contoh. Atau pelajari lebih dalam dan lihat spesifikasinya.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 69 untuk developer, tentu saja, ada banyak perubahan lainnya.

gradien kerucut

  • Dari spesifikasi CSS4, Anda kini dapat membuat transisi warna di sekitar keliling lingkaran, menggunakan gradien kerucut. Lea Verou memiliki polyfill conic-gradient() CSS yang dapat Anda gunakan, dan halaman tersebut menyertakan banyak sampel yang dikirimkan komunitas yang sangat keren.
  • Ada metode toggleAttribute() baru pada elemen yang mengalihkan keberadaan atribut, mirip dengan classList.toggle().
  • Array JavaScript mendapatkan dua metode baru: flat() dan flatMap(). Fungsi ini menampilkan array baru dengan semua elemen sub-array yang digabungkan ke dalamnya.
  • OffscreenCanvas memindahkan pekerjaan dari thread utama ke pekerja, sehingga membantu menghilangkan hambatan performa.

Fitur tersembunyi

Apakah kamu menemukan semua telur paskah dalam video?

Terima kasih khusus kepada semua orang yang telah membantu mewujudkan 28 episode New in Chrome. Setiap orang ini luar biasa!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Ingin melihat perkembangan New in Chrome sejak episode pertama kami? Tonton video progres 30 detik yang seru ini, yang memetakan sejarah kami dari video pertama hingga saat ini.

Dan tentu saja, terima kasih telah menonton dan memberikan komentar serta masukan Anda. Saya membaca semuanya, dan mempertimbangkan saran Anda. Video ini menjadi lebih baik berkat Anda.

Terima kasih sudah menonton.

Kesalahan Baru di Chrome

Kami mengumpulkan beberapa kesalahan lucu untuk Anda nikmati. Setelah menontonnya, saya mempelajari beberapa hal:

  • Saat saya salah mengucapkan kata, saya mengeluarkan suara aneh.
  • Saya membuat ekspresi wajah dan menjulurkan lidah.
  • Saya banyak bergerak.

Langganan

Ingin terus mendapatkan info terbaru tentang video kami? Subscribe ke channel YouTube Chrome Developers kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 70 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome.