Baru di Chrome 93

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja, dan merekam dari rumah. Mari kita lihat apa yang baru untuk developer di Chrome 93.

Skrip Modul CSS

Anda kini dapat memuat sheet gaya CSS dengan pernyataan import, seperti modul JavaScript. Sheet gaya kemudian dapat diterapkan ke dokumen atau root bayangan dengan cara yang sama seperti stylesheet yang dapat dibuat.

Fitur Skrip Modul CSS baru sangat cocok untuk elemen kustom. Selain itu, tidak seperti cara lain untuk menerapkan CSS dari JavaScript, Anda tidak perlu membuat elemen, atau mengacaukan string JavaScript dari teks CSS.

Untuk menggunakannya, impor sheet gaya dengan assert {type: 'css'}, lalu terapkan ke document atau shadowRoot dengan memanggil adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Namun, berhati-hatilah, jika Anda menghapus assert, file akan diperlakukan sebagai JavaScript, dan tidak akan berfungsi.

Lihat Menggunakan Skrip Modul CSS untuk mengimpor stylesheet di web.dev untuk mengetahui detail selengkapnya.

Multi-Screen Window Placement API

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

Multi-Screen Window Placement API memungkinkan penghitungan layar yang terhubung ke komputer pengguna, dan menempatkan jendela di layar tertentu. Ini adalah uji coba origin kedua, dan kami telah melakukan sejumlah perubahan berdasarkan masukan Anda.

Anda dapat memeriksa dengan cepat apakah ada lebih dari satu layar yang terhubung ke perangkat:

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

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

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

Misalnya, Anda dapat menentukan layar utama, lalu menggunakan requestFullscreen() untuk menampilkan elemen di layar tersebut.

try {
  const screens = await window.getScreens();
  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 dihapus.

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

Baca artikel Tom Mengelola beberapa layar dengan Multi-Screen Window Placement API di web.dev untuk mengetahui informasi selengkapnya.

Siklus rilis yang dipersingkat

Pada bulan Maret, kami mengumumkan rencana untuk mempersingkat siklus rilis dan mengirimkan versi baru Chrome setiap empat minggu.

Waktunya telah tiba, dan kami akan mengirimkan Chrome 94 pada 21 September. Anda dapat menemukan tanggal rilis yang direncanakan untuk setiap versi di Kalender Chrome.

Fitur PWA baru

Jika Anda membuat Progressive Web App, ada dua origin trial baru yang patut dicoba.

Pengendali URL untuk PWA

Jika Anda telah menginstal PWA, dan mengklik link ke PWA tersebut, Anda mungkin ingin link tersebut terbuka di PWA, bukan tab browser.

Dengan menentukan url_handlers di manifes aplikasi web, dan menambahkan file web-app-origin-association ke direktori .well-known/, Anda dapat memberi tahu browser bahwa jika pengguna mengklik link ke PWA Anda, link tersebut akan terbuka dalam PWA yang diinstal.

Contoh url_handlers dalam file manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Contoh file web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Dan dengan sedikit verifikasi tambahan, Anda bahkan dapat membuat PWA menangani link dari origin lain yang Anda miliki.

Semua detail tentang uji coba origin ada di PWA sebagai Pengendali URL di web.dev.

Overlay kontrol jendela

Overlay kontrol jendela memperluas area klien untuk mencakup seluruh jendela, termasuk panel judul, dan tombol kontrol jendela, seperti tombol tutup, maksa, dan perkecil.

Anda dapat menggunakan fitur ini untuk membuat PWA yang diinstal terlihat lebih mirip dengan aplikasi terinstal lainnya.

Untuk informasi selengkapnya tentang uji coba origin, lihat Menyesuaikan overlay kontrol jendela di panel judul PWA Anda.

PWA Summit

PWA Summit akan diadakan pada bulan Oktober. Ini adalah konferensi online gratis yang berfokus untuk membantu semua orang meraih kesuksesan dengan Progressive Web App. PWA Summit adalah kolaborasi antara orang-orang dari beberapa perusahaan berbeda yang terlibat dalam pembuatan teknologi PWA: Google, Intel, Microsoft, dan Samsung.

Ada banyak diskusi dan konten yang bagus. Anda dapat mempelajari lebih lanjut dan mendaftar di PWASummit.org.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Item flexbox dan flexbox telah menambahkan dukungan untuk kata kunci perataan: start, end, self-start, self-end, left, dan right.
  • API papan klip asinkron kini mendukung file SVG.
  • Selain itu, atribut media akan dipatuhi saat menetapkan meta theme-color, sehingga Anda dapat menentukan warna tema yang berbeda untuk mode terang dan gelap.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Bacaan lebih lanjut

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

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 94 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.