Baru menggunakan platform web pada bulan Juni

Temukan beberapa fitur menarik yang dirilis di browser web stabil dan beta selama Juni 2022.

Rachel Andrew

Rilis browser stabil

Pada bulan Juni, Chrome 103 dan Firefox 102 menjadi stabil.

Mengubah aliran dan aliran byte yang dapat dibaca

Firefox 102 menyertakan dukungan untuk Transform Streams. Hal ini memungkinkan pemipaan dari ReadableStream ke WritableStream, yang mengeksekusi transformasi pada bagian. Kami senang fitur ini tersedia di ketiga mesin tersebut, sehingga ini adalah waktu yang tepat untuk mempelajari Aliran Data.

Dukungan Browser

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Sumber

Byte stream yang dapat dibaca kini juga didukung di Firefox 102, yang memungkinkan pembaca BYOB (bawa buffer Anda sendiri) dengan antarmuka ReadableStreamBYOBReader. Ini dapat digunakan untuk melakukan streaming data yang disediakan oleh developer.

Dukungan Browser

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: tidak didukung.

Sumber

Mengakses font yang diinstal secara lokal

Chrome 103 menyertakan Local Font Access API, yang memungkinkan akses ke font yang diinstal secara lokal oleh pengguna. Setelah meminta akses ke font yang diinstal di perangkat, panggil window.queryLocalFonts() untuk mendapatkan array font yang diinstal.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Fitur media update

Firefox 102 menyertakan fitur media update. Ini digunakan untuk membuat kueri apakah perangkat output dapat mengubah tampilan konten setelah dirender.

Dukungan Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Sumber

Kode status HTTP baru—103 petunjuk awal

Chrome 103 menambahkan kode status baru HTTP 103 Early Hints. Jika server atau CDN mengetahui bahwa kumpulan sub-resource tertentu diperlukan untuk memuat halaman, server atau CDN dapat menyarankan browser untuk melakukan pra-koneksi ke origin atau bahkan memuat ulang resource saat halaman yang memerlukannya muncul. Hal ini memerlukan update pada server atau CDN Anda untuk memanfaatkan fitur ini. Cari tahu lebih lanjut tentang Petunjuk Awal.

Rilis browser beta

Versi browser Beta memberi Anda pratinjau hal-hal yang akan ada di versi browser stabil berikutnya. Ini adalah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum seluruh dunia mendapatkan rilis tersebut.

Versi beta baru pada bulan April adalah Chrome 104, Firefox 103, dan Safari 16.

Sintaksis baru untuk kueri media rentang

Chrome 104 menyertakan sintaksis baru untuk kueri media rentang, dari spesifikasi Kueri Media Level 4. Misalnya, kueri media yang sebelumnya ditulis seperti ini:

@media (min-width: 400px) { … }

Sekarang dapat ditulis seperti ini:

@media (width >= 400px) { … }

Dukungan Browser

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Sumber

Region Capture API

Chrome 104 di desktop juga menyertakan Region Capture API. Tindakan ini memungkinkan pemangkasan dan penghapusan konten dari video yang diambil sebelum membagikannya.

Safari 16 menghadirkan beberapa fitur utama ke browser

Safari 16 tampaknya menjadi rilis menarik lainnya dari tim Safari. Rilis ini menambahkan banyak fitur yang disertakan dalam Interop 2022. Sangat menyenangkan melihat begitu banyak fitur yang diluncurkan pada pertengahan tahun ini. Saya akan menyoroti beberapa fitur favorit saya di sini, tetapi lihat catatan rilis untuk mengetahui informasi selengkapnya.

Bersama dengan banyak developer, saya sangat senang melihat dukungan kueri ukuran untuk Kueri Penampung, fitur yang saat ini juga berada di balik flag di Chrome.

Selain itu, Safari 16 mendukung nilai subgrid untuk grid-template-columns dan grid-template-rows. Fitur ini sudah ada di Firefox, dan sedang dalam pengembangan di Chrome, serta memungkinkan ukuran jalur petak diwarisi oleh petak bertingkat.

Dukungan Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Sumber

Selain itu, untuk tata letak petak, Anda dapat menganimasikan jalur petak.

Dukungan Browser

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Metode showPicker(), yang memungkinkan cara kanonis untuk menampilkan pemilih browser untuk tanggal, waktu, warna, dan file disertakan. Anda dapat mengetahui lebih lanjut tentang hal ini di menampilkan pemilih browser untuk tanggal, waktu, warna, dan file.

Dukungan Browser

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Sumber

Masalah aksesibilitas untuk display: contents juga telah diatasi, sehingga fitur yang berguna ini aman digunakan tanpa bahaya menghapus elemen dari hierarki aksesibilitas.

Fitur beta ini akan segera tersedia di browser stabil.

Bagian dari serial Baru di web