Baru di Chrome 85

Pete LePage

Chrome 85 sekarang mulai diluncurkan ke stabil.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja dan mengambil gambar dari rumah. mari kita pelajari lebih dalam dan lihat apa yang baru untuk pengembang di Chrome 85!

Visibilitas Konten

Proses rendering browser

Untuk mengubah HTML menjadi sesuatu yang dapat dilihat pengguna, browser harus melakukan beberapa langkah bahkan sebelum dapat menggambar piksel pertama. Hal ini juga berlaku untuk seluruh halaman, bahkan untuk konten yang tidak terlihat di area pandang.

Menerapkan content-visibility: auto ke elemen, akan memberi tahu browser bahwa browser dapat melewati tugas rendering untuk elemen tersebut hingga men-scroll ke area pandang, sehingga memberikan render awal yang lebih cepat.


.my-class {
  content-visibility: auto;
}

Untuk mendapatkan dampak maksimal dari content-visibility, terapkan ke bagian induk dengan algoritma tata letak yang lebih kompleks, seperti flexbox, dan grid, atau yang memiliki turunan dengan tata letak yang berisi sendiri.

Dengan memotong konten dan menambahkan content-visibility: auto;, halaman ini berubah dari waktu rendering 232 md menjadi hanya 30 md.

Lihat visibilitas konten untuk mengetahui cara menggunakannya untuk meningkatkan performa rendering.

@property dan variabel CSS

Variabel CSS, secara teknis disebut properti khusus, sangatlah luar biasa. Dengan Houdini CSS Properties dan Values API, Anda dapat menentukan jenis dan nilai fallback default untuk properti kustom Anda. Saya sebelumnya telah membahasnya di Baru di Chrome 78, saat kami menambahkan dukungan untuk menentukannya dalam JavaScript.

Mulai Chrome 85, Anda juga dapat menentukan dan menetapkan properti CSS secara langsung di CSS. Yang saya sukai dari Properti CSS - adalah properti ini memberikan makna semantik properti, nilai penggantian, dan bahkan memungkinkan pengujian CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una memiliki postingan yang bagus @property: memberikan kemampuan super pada variabel CSS yang menunjukkan cara menggunakannya.

Mendapatkan aplikasi terkait yang terinstal

getInstalledRelatedApps() API memungkinkan Anda memeriksa apakah aplikasi Anda telah diinstal, lalu menyesuaikan pengalaman pengguna.

Misalnya, tampilkan konten yang berbeda kepada pengguna di halaman landing jika aplikasi Anda sudah diinstal. Memusatkan fungsi yang tumpang tindih dalam satu aplikasi untuk mencegah kebingungan. Atau, jika aplikasi native Anda sudah diinstal, jangan mempromosikan penginstalan PWA Anda.

Saat pertama kali diluncurkan di Chrome 80, aplikasi ini hanya berfungsi untuk aplikasi Android. Kini, di Android, fitur ini juga dapat memeriksa apakah PWA Anda telah diinstal. Dan di Windows, dapat memeriksa apakah aplikasi UWP Windows sudah diinstal.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Lihat artikel saya Apakah aplikasi Anda sudah diinstal? getInstalledRelatedApps() akan memberi tahu Anda. di web.dev untuk melihat cara kerjanya, dan cara menandatangani aplikasi untuk membuktikan bahwa aplikasi tersebut milik Anda.

Pintasan Ikon Aplikasi

Pintasan ikon aplikasi di Windows

Di Chrome 84, kami menambahkan dukungan untuk Pintasan Ikon Aplikasi. Saya tidak sengaja mengatakan fitur itu tersedia di mana saja, tetapi hanya tersedia di Android. Kini, di Chrome 85, fitur tersebut tersedia di Android dan Windows, serta di Chrome dan Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Baca artikel Pintasan Ikon Aplikasi di web.dev untuk mengetahui detail selengkapnya, dan kami mohon maaf atas kebingungan yang Anda alami.

Uji Coba Origin: Permintaan streaming dengan fetch()

Mulai Chrome 85, streaming upload fetch tersedia sebagai uji coba origin. Hal ini memungkinkan Anda memulai pengambilan sebelum isi permintaan siap. Sebelumnya, Anda hanya dapat memulai permintaan setelah seluruh isi Anda siap. Namun sekarang, Anda dapat mulai mengirim konten, meskipun Anda masih membuat konten tersebut.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Misalnya, gunakan untuk menyiapkan server, atau streaming audio atau video saat diambil dari mikrofon atau kamera.

Jake mempelajari secara mendalam permintaan streaming dengan API pengambilan di web.dev, dan juga membahasnya dalam video HTTP203 - Permintaan streaming dengan pengambilan terbaru.

Dan lainnya

Tentu saja, masih banyak lagi.

Promise.any menampilkan promise yang dipenuhi oleh promise pertama yang diberikan yang akan dipenuhi atau ditolak.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Mengganti semua instance dalam string lebih mudah dengan .replaceAll(), tidak ada lagi ekspresi reguler.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 menambahkan dukungan dekode untuk AVIF, format gambar yang dienkode dengan AV1 dan distandarkan oleh Alliance for Open Media. AVIF menawarkan peningkatan kompresi yang signifikan dibandingkan JPEG dan WebP, dengan studi Netflix terbaru yang menunjukkan penghematan 50% dibandingkan JPEG standar dan penghematan >60% pada konten 4:4:4.

Dan Penghapusan AppCache telah dimulai.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan pada Chrome 85.

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 akhirnya potong rambut saya!

Segera setelah Chrome 86 dirilis, saya akan ada di sini untuk memberi tahu Anda -- apa yang baru di Chrome!