Baru di Chrome 69

Pete LePage

Sudah sepuluh tahun sejak Chrome pertama kali dirilis. Banyak yang telah berubah sejak saat itu, tetapi tujuan kami membangun dasar yang kuat untuk aplikasi web modern belum tercapai.

Di Chrome 69, kami telah menambahkan dukungan untuk:

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

Dan masih ada banyak lagi.

Saya Pete LePage. Mari kita selami dan lihat hal-hal baru untuk developer di Chrome 69.

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

Snap Scroll CSS

Lihat demo | Sumber

CSS Scroll Snap memungkinkan Anda menciptakan pengalaman scroll yang lancar, apik, dan scroll, dengan mendeklarasikan posisi snap scroll yang memberi tahu browser tempat untuk berhenti setelah setiap operasi scroll. Hal ini sangat berguna untuk carousel gambar, atau bagian bernomor halaman tempat Anda ingin pengguna men-scroll ke titik tertentu.

Untuk carousel gambar, saya akan menambahkan scroll-snap-type: x mandatory; ke container 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 tepat.


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

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

Snap Scroll CSS berfungsi dengan baik, bahkan jika target snap memiliki ukuran yang berbeda atau jika lebih besar dari scroller! Lihat postingan Scrolling yang Terkontrol dengan Baik dengan CSS Scroll Snap untuk mengetahui detail dan contoh selengkapnya yang bisa Anda coba.

Potongan layar (alias notch)

ponsel dengan potongan layar
Browser menambahkan margin tambahan pada perangkat seluler yang memiliki potongan layar agar konten tidak tertutup oleh potongan.

Ada peningkatan jumlah perangkat seluler yang dirilis dengan potongan layar, terkadang disebut notch. Untuk mengatasinya, browser menambahkan sedikit margin tambahan ke halaman sehingga konten tidak terhalang 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'>

Selanjutnya, Anda dapat menggunakan variabel lingkungan CSS safe-area-inset-* untuk membuat tata letak konten.

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

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

API Kunci Web

Web Locks API memungkinkan Anda memperoleh kunci secara asinkron, menahannya saat pekerjaan dilakukan, lalu melepaskannya. Selama kunci ditahan, tidak ada skrip lain dalam asal yang dapat mendapatkan kunci yang sama, yang 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 berupaya untuk 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 untuk mendapatkan kunci akan menyinkronkan data ke jaringan. Jika tab lain mencoba mendapatkan kunci yang sama, tab tersebut akan dimasukkan ke dalam antrean. Setelah kunci dilepaskan, permintaan antrean berikutnya akan diberi kunci, lalu dieksekusi.

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

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 69 untuk developer, tentu saja masih banyak lagi.

gradien kerucut

  • Dari spesifikasi CSS4, kini Anda dapat membuat transisi warna di sekitar keliling lingkaran, menggunakan gradien kerucut. Lea Verou memiliki polyfill conic-gradient() CSS yang dapat Anda gunakan, dan halaman ini menyertakan banyak sampel kiriman 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(). Metode ini menampilkan array baru dengan semua elemen sub-array yang disisipkan ke dalamnya.
  • Selain itu, OffscreenCanvas memindahkan pekerjaan dari thread utama ke pekerja, sehingga membantu menghilangkan bottleneck performa.

Objek tersembunyi

Apakah Anda menemukan semua objek tersembunyi dalam video?

Terima kasih banyak 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 fitur Baru di Chrome sejak episode pertama? Tonton video progres berdurasi 30 detik yang seru ini, yang memetakan histori kami dari video pertama hingga hari ini.

Dan tentu saja, terima kasih Anda telah menonton serta memberikan komentar dan masukan Anda. Saya membaca semuanya, dan mengingat saran Anda. Video-video ini menjadi lebih baik karena Anda!

Terima kasih sudah menonton.

Baru di Chrome Blooper

Kami telah membuat klip blooper kecil yang seru untuk Anda nikmati. Setelah menontonnya, saya telah belajar beberapa hal:

  • Ketika tersandung ucapanku, aku membuat suara yang aneh.
  • Aku menjulurkan lidah dan menjulurkan wajah.
  • Saya sering bergoyang.

Subscribe

Ingin terus mendapatkan video terbaru kami, lalu berlangganan channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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