Baru di Chrome 93

Pete LePage

Berikut hal yang perlu Anda ketahui:

• Anda kini dapat memuat lembar gaya CSS dengan pernyataan import, seperti modul JavaScript.
• PWA yang diinstal dapat terdaftar sebagai pengendali URL, sehingga memungkinkan pengguna untuk langsung membuka PWA Anda.
• Multi-Screen Window Placement API telah diupdate berdasarkan masukan Anda, dan memulai uji coba origin kedua.
• PWA Summit akan diselenggarakan pada 6-7 Oktober.
• Dan masih banyak lagi.

Saya Pete LePage, bekerja, dan mengambil gambar dari rumah. Mari selami dan lihat apa yang baru untuk developer di Chrome 93.

Skrip Modul CSS

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

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

Untuk menggunakannya, impor lembar 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 membiarkan 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.

API Penempatan Jendela Multilayar

Untuk beberapa aplikasi, membuka jendela baru dan menempatkannya di tempat atau tampilan tertentu merupakan fitur yang penting. Misalnya, saat menggunakan Slide untuk 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 untuk menghitung tampilan yang terhubung ke mesin pengguna, dan menempatkan jendela di layar tertentu. Ini adalah uji coba origin yang kedua, dan kami telah melakukan sejumlah perubahan berdasarkan masukan Anda.

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

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

Namun, fungsi utamanya berada di window.getScreens(), yang memberikan semua detail tentang tampilan 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, layanan ini memberikan cara untuk memproses perubahan, misalnya jika layar baru dicolokkan atau dilepas.

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 tampilan dengan Multi-Screen Window Placement API di web.dev untuk mempelajari lebih lanjut.

Siklus rilis yang dipersingkat

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

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

Fitur PWA baru

Jika Anda membangun Progressive Web App, ada dua uji coba origin baru yang patut Anda coba.

Pengendali URL untuk PWA

Jika telah menginstal PWA, lalu mengklik link ke PWA tersebut, mungkin Anda ingin PWA terbuka di PWA, bukan di 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 di 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 meminta PWA menangani link dari origin lain yang Anda miliki.

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

Overlay kontrol jendela

Overlay kontrol jendela memperluas area klien untuk menutupi seluruh jendela, termasuk panel judul, dan tombol kontrol jendela, seperti tombol tutup, maksimalkan, dan minimalkan.

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

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

PWA Summit

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

Ada banyak bincang-bincang dan konten hebat. 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 sekarang mendukung file SVG.
• Dan, atribut media akan diberikan saat menyetel 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

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 93.

• Yang baru di Chrome DevTools (93)
• Penghentian & penghapusan Chrome 93
• Update ChromeStatus.com untuk Chrome 93
• Yang baru di JavaScript di Chrome 93
• Daftar perubahan repositori sumber Chromium

Langganan

Untuk terus mengikuti info terbaru, berlangganan 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 ada di sini untuk memberi tahu Anda apa yang baru di Chrome!