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 rapi.
  • Potongan layar memungkinkan Anda menggunakan area layar sepenuhnya, 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 banyak lagi fitur lainnya.

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

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

CSS Scroll Snap

Lihat demo | Sumber

CSS Scroll Snap memungkinkan Anda membuat pengalaman scroll yang lancar dan rapi, dengan mendeklarasikan posisi snap scroll yang memberi tahu browser tempat berhenti setelah setiap operasi scroll. Hal ini sangat membantu untuk carousel gambar, atau bagian yang diberi nomor halaman, 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;
}

Pengepasan Scroll CSS berfungsi dengan baik, bahkan saat target yang dipaskan memiliki ukuran berbeda atau lebih besar dari scroller! Lihat postingan Scroll yang Dikontrol dengan Baik dengan CSS Scroll Snap untuk mengetahui detail dan contoh selengkapnya yang dapat Anda coba.

Potongan layar (alias notch)

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

Ada peningkatan jumlah perangkat seluler yang dirilis dengan potongan layar, yang terkadang disebut notch. Untuk mengatasinya, browser menambahkan sedikit margin tambahan ke halaman Anda 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 diperluas ke area potongan tampilan, 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 menata 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 lihat penjelasan untuk mengetahui detail selengkapnya.

Web Locks API

Web Locks API memungkinkan Anda memperoleh kunci secara asinkron, menahannya saat pekerjaan dilakukan, lalu melepaskannya. Saat kunci ditahan, 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 memperoleh 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 berikutnya yang diantrekan akan diberi kunci, dan dieksekusi.

MDN memiliki pembahasan awal Kunci Web yang bagus dan menyertakan penjelasan yang lebih mendalam serta banyak contoh. Atau, pelajari lebih lanjut dan lihat spesifikasi.

Dan banyak lagi!

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

gradien kerucut

  • Dari spesifikasi CSS4, Anda kini dapat membuat transisi warna di sekitar lingkar lingkaran, menggunakan gradien kerucut. Lea Verou memiliki polyfill conic-gradient() CSS yang dapat Anda gunakan, dan halaman tersebut menyertakan banyak contoh 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.
  • Selain itu, OffscreenCanvas memindahkan pekerjaan dari thread utama ke pekerja, sehingga membantu menghilangkan bottleneck performa.

Telur Paskah

Apakah Anda menemukan semua telur paskah dalam video?

Terima kasih khusus kepada semua orang yang telah membantu membuat 28 episode Baru di Chrome terjadi. Setiap orang di antara mereka sangat 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 kami? Tonton video progres berdurasi 30 detik yang menyenangkan ini yang memetakan sejarah kami dari video pertama hingga saat ini.

Dan tentu saja, terima kasih Anda telah menonton serta memberikan komentar dan masukan. Kami telah membaca semua saran Anda dan akan mempertimbangkannya dengan cermat. Video ini menjadi lebih baik karena Anda.

Terima kasih sudah menonton.

Bloopers Baru di Chrome

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

  • Saat saya salah mengucapkan kata, saya akan mengeluarkan suara aneh.
  • Aku menjulurkan lidah dan menjulurkan lidah.
  • Saya banyak bergerak.

Langganan

Ingin mendapatkan info terbaru terkait video kami, lalu 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 -- yang baru di Chrome.