Baru menggunakan platform web pada bulan Maret

Temukan beberapa fitur menarik yang tersedia di browser web stabil dan beta selama Maret 2023.

Rachel Andrew

Rilis browser stabil

Pada Maret 2023, Firefox 111, Chrome 111, dan Safari 16.4 menjadi stabil. Mari kita lihat apa artinya ini untuk platform web.

Atribut HTML global

Firefox 111 menambahkan dukungan untuk beberapa atribut HTML global yang berguna. Atribut autocapitalize mengontrol apakah teks dapat secara otomatis dikapitalisasi saat pengguna mengetik di keyboard virtual.

Dukungan Browser

  • 43
  • 79
  • 111
  • x

Sumber

Atribut translate menunjukkan apakah suatu elemen harus diterjemahkan saat halaman dilokalkan.

Dukungan Browser

  • 19
  • 79
  • 111
  • 6

Sumber

Sistem File Pribadi Origin (OPFS)

Firefox menambahkan dukungan untuk Origin Private File System (OPFS) saat menggunakan File System Access API. Pelajari OPFS lebih lanjut.

View Transitions API

Chrome 111 menambahkan View Transitions API, sehingga pembuatan transisi yang bagus di Aplikasi Web Satu Halaman (SPA) menjadi lebih sederhana dengan membuat snapshot tampilan dan memungkinkan DOM berubah tanpa tumpang tindih di antara status.

Cari tahu selengkapnya di postingan peluncuran Transisi tampilan SPA hadir di Chrome 111.

Dukungan Browser

  • 111
  • 111
  • x
  • x

Sumber

Ruang dan fungsi warna CSS baru

Selain itu, Chrome 111 menyertakan serangkaian cara baru untuk menggunakan warna di web. Chrome kini mendukung ruang warna yang mengakses warna di luar gamut RGB, beserta fungsi color() dan color-mix(). Pelajari lebih lanjut di Panduan warna CSS definisi tinggi dan postingan blog di color-mix().

Dukungan Browser

  • 111
  • 111
  • 113
  • 16,2

Sumber

Rilis Chrome juga mencakup DevTools baru untuk membantu Anda bekerja dengan fungsi warna baru ini.

Kontrol lebih besar atas :nth-child() pilihan

Chrome 111 menambahkan kemampuan untuk meneruskan daftar pemilih ke :nth-child() dan nth-last-child(). Pelajari hal ini lebih lanjut, dan lihat contohnya dalam postingan Kontrol lebih besar atas pilihan :nth-child() dengan sintaksis S.

Dukungan Browser

  • 111
  • 111
  • 113
  • 9

Dukungan untuk slide sebelumnya dan berikutnya di Media Session API

Terakhir dalam daftar penambahan Chrome 111 ini adalah Mempresentasikan slide actions untuk API sesi media—"previousslide" dan "nextslide".

Dukungan Browser

  • 111
  • 111
  • x
  • x

Dukungan kelas semu di Safari

Safari 16.4 adalah rilis yang luar biasa untuk platform web. Artikel ini tidak akan mencakup semua penambahan tersebut, jadi lihat daftar lengkap fitur di catatan rilis Safari 16.4.

Ada banyak pseudo-class CSS tambahan yang didukung dalam rilis ini: :user-invalid, :user-valid, :dir(), :modal, dan :fullscreen.

Sintaksis rentang baru untuk kueri media

Rilis Safari ini membuat sintaks rentang yang jauh lebih elegan dan berguna untuk kueri media dapat dioperasikan bersama di ketiga mesin. Lihat contoh sintaksis ini di postingan ini, yang dipublikasikan saat sintaksis dikirimkan di Chrome.

Dukungan Browser

  • 104
  • 104
  • 102
  • 16,4

Sumber

Properti dan Nilai CSS

Safari 16.4 menambahkan dukungan untuk @property, yang memungkinkan pendaftaran properti khusus CSS langsung di stylesheet. Pelajari hal ini lebih lanjut di @property: memberikan kekuatan super pada variabel CSS.

Dukungan Browser

  • 85
  • 85
  • 16,4

Sumber

Dukungan CSS API

Penambahan hebat untuk CSS akan terus hadir, dengan dukungan untuk OM Berjenis CSS. API ini mengekspos nilai CSS sebagai objek JavaScript yang diketik, bukan string. Ini membuat penggunaan CSS dari JavaScript lebih mudah, dan berperforma lebih baik daripada metode yang ada.

Dukungan Browser

  • 66
  • 79
  • x
  • 16,4

Sumber

Ada juga dukungan untuk stylesheet yang dapat dibuat dengan CSSStyleSheet(). Ini akan memungkinkan berbagi stylesheet antara dokumen dan subhierarki shadow DOM-nya. Dengan versi Safari ini, stylesheet yang dapat dibuat kini didukung di ketiga mesin telusur.

Dukungan Browser

  • 73
  • 79
  • 101
  • 16,4

Sumber

Web Push dan Badging API

Safari kini mendukung Web Push, bersama dengan Badging API, yang merupakan kabar baik bagi developer aplikasi. Secara khusus, versi ini berarti notifikasi push didukung di semua mesin telusur utama.

Dukungan Browser

  • 42
  • 17
  • 44
  • 16

Sumber

Mengimpor peta

Penambahan lain yang membuat fitur memiliki status interoperabilitas adalah penambahan Peta impor JavaScript, sehingga mempermudah pengimporan modul ES.

Dukungan Browser

  • 89
  • 89
  • 108
  • 16,4

Rilis browser beta

Versi browser beta memberikan pratinjau dari hal-hal yang akan ada dalam versi browser stabil berikutnya. Ini adalah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum dunia merilisnya. Versi beta baru adalah Firefox 112, Safari 16.5, dan Chrome 112. Rilis ini menghadirkan banyak fitur hebat ke platform ini. Lihat catatan rilis untuk semua detailnya, berikut beberapa sorotan.

Firefox 112 menambahkan dukungan untuk atribut inert, yang akan membuat atribut yang berguna ini tersedia di semua mesin telusur. Anda dapat mempelajari inert lebih lanjut di Memperkenalkan inert. Firefox juga akan mengaktifkan dukungan untuk fungsi easing linear().

Chrome 112 dan Safari 16.5 menambahkan dukungan untuk Penyebaran CSS, fitur yang sangat dinantikan oleh banyak developer.

Chrome 112 juga mencakup dukungan untuk animation-composition. Pelajari cara kerja properti ini di Menentukan bagaimana beberapa efek animasi harus digabungkan dengan komposisi animasi.

Jika Anda menggunakan mode Headless Chrome, misalnya dengan Puppeteer, 112 akan menghadirkan mode Headless yang baru. Pelajari fitur ini di Mode Headless Chrome mendapatkan upgrade.

Bagian dari serial Baru di web