Baru di Chrome 100

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 100.

100 Chrome

Saat browser pertama kali mencapai versi 10, ada beberapa masalah karena nomor versi utama berubah dari satu digit menjadi dua digit. Mudah-mudahan, kita mempelajari beberapa hal yang akan memudahkan transisi dari dua digit menjadi tiga.

Logo Chrome dan Firefox

Chrome 100 kini telah hadir, dan Firefox 100 segera hadir. Nomor versi tiga digit ini berpotensi menyebabkan masalah di situs yang mengandalkan identifikasi versi browser dengan cara tertentu. Selama beberapa bulan terakhir, tim Firefox, dan tim Chrome, menjalankan eksperimen yang melaporkan browser dengan nomor versi 100, meskipun sebenarnya tidak.

Hal ini menyebabkan beberapa masalah yang dilaporkan, yang sebagian besar telah diperbaiki. Namun, kami masih memerlukan bantuan Anda.

  • Jika Anda adalah pengelola situs, uji situs Anda dengan Chrome dan Firefox 100.
  • Jika Anda mengembangkan library penguraian Agen Pengguna, tambahkan pengujian untuk mengurai versi yang lebih besar dari dan sama dengan 100.

Lihat Chrome dan Firefox dalam waktu dekat untuk mencapai versi utama 100 di web.dev untuk mengetahui detail selengkapnya.

100 Momen Web Keren

Gambar promo 100 Momen Web Keren

Sangat menyenangkan melihat web berkembang, dan melihat semua hal menakjubkan yang Anda buat dalam 100 rilis Chrome terakhir. Kami pikir akan menyenangkan untuk mengingat kembali dan merayakan #100CoolWebMoments yang telah terjadi dalam 14 tahun terakhir.

Beri tahu kami momen mana yang paling Anda sukai. Jika kami melewatkan sesuatu (dan kami yakin telah melakukannya), tweet ke @Chromiumdev dengan #100CoolWebMoments. Selamat menikmati!

String Agen Pengguna yang Dipersingkat

Berbicara tentang agen pengguna, Chrome 100 akan menjadi versi terakhir yang mendukung string Agen Pengguna yang tidak dikurangi secara default. Ini adalah bagian dari strategi untuk mengganti penggunaan string Agen Pengguna, dengan User-Agent Client Hints API yang baru.

Mulai Chrome 101, jumlah agen pengguna akan dikurangi secara bertahap.

Lihat Uji Coba Origin dan Tanggal Pengurangan Agen Pengguna di [blog Chromium][crblog], untuk mempelajari lebih lanjut apa yang akan dihapus, dan kapan.

API penempatan jendela multilayar

Untuk beberapa aplikasi, membuka jendela baru dan menempatkannya di tempat tertentu, atau tampilan tertentu merupakan fitur penting. Misalnya, saat menggunakan Slide untuk mempresentasikan, saya ingin slide muncul dalam layar penuh di layar utama, dan catatan pembicara saya muncul di layar lain.

Multi-Screen Window Placement API memungkinkan untuk menghitung tampilan yang terhubung ke perangkat pengguna, dan menempatkan jendela di layar tertentu.

Anda dapat dengan cepat memeriksa apakah ada lebih dari satu layar yang terhubung ke perangkat dengan window.screen.isExtended.

const isExtended = window.screen.isExtended;
// returns true/false

Namun, fungsi utamanya ada di window.getScreenDetails(), yang memberikan detail tentang layar yang terpasang.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Misalnya, Anda dapat menentukan layar utama, lalu menggunakan requestFullscreen() untuk membuat elemen menjadi layar penuh pada tampilan tersebut.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Selain itu, API ini menyediakan cara untuk memproses perubahan, misalnya jika layar baru dicolokkan atau dilepas, resolusi berubah, dan sebagainya.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Lihat artikel terbaru Tom, Mengelola beberapa layar dengan Multi-Screen Window Placement API di web.dev untuk mempelajari lebih lanjut.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Ada metode forget() baru untuk Perangkat HID yang memungkinkan Anda mencabut izin ke Perangkat HID yang diberikan oleh pengguna.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

Dan untuk WebNFC, metode makeReadOnly() memungkinkan Anda membuat tag NFC hanya baca secara permanen.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 100.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 101 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!