Temukan beberapa fitur menarik yang hadir di browser web versi stabil dan beta pada Maret 2023.
Rilis browser stabil
Pada Maret 2023, Firefox 111, Chrome 111, dan Safari 16.4 menjadi versi stabil. Mari kita lihat apa artinya ini bagi platform web.
Atribut HTML global
Firefox 111 menambahkan dukungan untuk beberapa atribut HTML global yang berguna. Atribut autocapitalize mengontrol apakah teks dapat menggunakan huruf besar secara otomatis saat pengguna mengetik di keyboard virtual.
Atribut translate menunjukkan apakah elemen harus diterjemahkan saat halaman dilokalkan.
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 menyederhanakan pembuatan transisi yang disempurnakan di Aplikasi Web Satu Halaman (SPA) dengan membuat snapshot tampilan dan memungkinkan DOM berubah tanpa tumpang-tindih antara status.
Cari tahu selengkapnya di postingan peluncuran tentang transisi tampilan SPA yang akan diterapkan di Chrome 111.
Fungsi dan ruang warna CSS baru
Dalam Chrome 111, juga terdapat 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 tentang color-mix().
Rilis Chrome juga menyertakan DevTools baru untuk membantu Anda menggunakan 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 di 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 tambahan Chrome 111 ini adalah Tindakan mempresentasikan slide untuk API sesi media—"previousslide" dan "nextslide".
Dukungan Browser
- 111
- 111
- x
- x
Dukungan class semu di Safari
Safari 16.4 adalah rilis yang luar biasa untuk platform web. Artikel ini tidak akan membahas semua tambahan, jadi lihat daftar lengkap fitur di catatan rilis Safari 16.4.
Ada banyak pseudo-class CSS tambahan dengan dukungan dalam rilis ini: :user-invalid, :user-valid, :dir(), :modal, dan :fullscreen.
Sintaksis rentang baru untuk kueri media
Rilis Safari ini membuat sintaksis rentang yang jauh lebih elegan dan berguna untuk kueri media yang memiliki interoperabilitas di ketiga mesin. Lihat contoh sintaksis tersebut di postingan ini, yang dipublikasikan saat sintaksis dikirimkan di Chrome.
Properti dan Nilai CSS
Safari 16.4 menambahkan dukungan untuk @property, sehingga memungkinkan pendaftaran properti khusus CSS langsung di stylesheet. Pelajari hal ini lebih lanjut di @property: memberikan kekuatan super ke variabel CSS.
Dukungan CSS API
Penambahan hebat untuk CSS terus bermunculan, dengan dukungan untuk OM CSS Typed OM. API ini mengekspos nilai CSS sebagai objek JavaScript yang diketik, bukan string. Ini membuat bekerja dengan CSS dari JavaScript lebih mudah, dan lebih berperforma tinggi daripada metode yang sudah ada.
Ada juga dukungan untuk stylesheet yang dapat dibuat dengan CSSStyleSheet(). Ini memungkinkan pembagian stylesheet di antara dokumen dan subpohon shadow DOM-nya. Dengan versi Safari ini, stylesheet yang dapat dibuat kini didukung di ketiga mesin.
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 bahwa notifikasi push didukung di semua mesin utama.
Mengimpor peta
Tambahan lain yang memberikan fitur pada status interoperabilitas adalah penambahan Import maps JavaScript, sehingga pengimporan modul ES menjadi lebih mudah.
Dukungan Browser
- 89
- 89
- 108
- 16,4
Rilis browser beta
Versi browser beta memberi Anda pratinjau hal-hal yang akan ada di versi stabil browser berikutnya. Inilah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum rilis tersebut dirilis. Versi beta baru adalah Firefox 112, Safari 16.5, dan Chrome 112. Rilis ini menghadirkan banyak fitur hebat ke platform. Periksa catatan rilis untuk semua detailnya, berikut beberapa sorotannya.
Firefox 112 menambahkan dukungan untuk atribut inert, yang akan membuat atribut ini berguna tersedia di semua mesin. 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 CSS Nesting, fitur yang sangat dinantikan oleh banyak developer.
Chrome 112 juga menyertakan dukungan untuk animation-composition. Pelajari cara kerja properti ini di Menentukan cara penggabungan beberapa efek animasi 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 New to the web