Temukan beberapa fitur menarik yang diluncurkan di browser web stabil dan beta selama Mei 2023.
Rilis browser stabil
Pada Mei 2023, Firefox 113, Chrome 113, Chrome 114, dan Safari 16.5 menjadi stabil. Mari kita lihat apa artinya ini bagi platform web.
WebGPU
Chrome 113 menyertakan WebGPU, penerus API grafis WebGL dan WebGL 2 untuk web. Platform ini menyediakan fitur modern seperti komputasi GPU, akses overhead yang lebih rendah ke hardware GPU, kemampuan untuk merender ke beberapa kanvas dari satu perangkat grafis, dan performa yang lebih baik dan lebih dapat diprediksi.
Set Pihak Pertama
Set Pihak Pertama (FPS) adalah bagian dari Privacy Sandbox. Ini adalah cara bagi organisasi untuk mendeklarasikan hubungan antar-situs, sehingga browser dapat memutuskan kapan harus mengizinkan akses cookie pihak ketiga yang terbatas untuk situs dalam set. FPS memulai peluncuran bertahap di Chrome 113.
Fitur media CSS dan lainnya
Untuk CSS, Chrome 113 menyertakan fitur media overflow-inline
dan overflow-block
.
Dan fitur media update
.
Fungsi easing linear()
juga disertakan, yang dapat Anda pelajari lebih lanjut dalam artikel Membuat kurva animasi kompleks di CSS dengan fungsi easing linear()
.
Dukungan Browser
Fitur CSS Color Level 4
Firefox 113 menyertakan notasi fungsional color()
, lab()
, lch()
, oklab()
, oklch()
, dan color-mix()
, beserta properti forced-color-adjust. Artinya, ruang dan fungsi warna baru kini didukung di ketiga mesin utama. Anda dapat mempelajari lebih lanjut ruang warna dan fungsi ini di Panduan warna CSS dengan resolusi tinggi.
Kontrol lebih besar atas :nth-child()
pilihan
Firefox 113 juga 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
Compressions Streams API
Kini didukung di ketiga mesin utama karena disertakan dalam Firefox 113, Compressions Streams API memungkinkan kompresi dan dekompresi streaming. Artinya, aplikasi JavaScript tidak perlu lagi memaketkan library kompresi.
Penyusunan bertingkat CSS
Safari 16.5 sebagian besar menyelesaikan masalah, tetapi juga menambahkan dukungan untuk Penetasan CSS, dengan pemilih penetasan baru >
, yang digunakan untuk menyusun aturan gaya terkait, dengan cara yang akan dikenali oleh developer yang telah menggunakan pre-processor:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
Menyeimbangkan judul dengan text-wrap: balance
Dari Chrome 114, Anda dapat menggunakan text-wrap: balance
. Hal ini memungkinkan Anda menyeimbangkan judul, sehingga menghindari masalah satu kata di baris terakhir, dan memberikan hasil yang lebih menarik dan mudah dibaca. Anda dapat mengetahui informasi selengkapnya di CSS text-wrap: balance.
CHIPS: Cookie yang Memiliki Status Partisi Independen
Sebagai bagian dari upaya untuk menghentikan penggunaan cookie pihak ketiga, CHIPS memungkinkan keikutsertaan dalam cookie pihak ketiga yang dipartisi oleh situs tingkat atas menggunakan atribut cookie baru Partitioned
. CHIPS tersedia di Chrome 114.
Popover API
Di Chrome 114 juga terdapat Popover API yang memudahkan pembuatan elemen antarmuka pengguna (UI) sementara yang ditampilkan di atas semua UI aplikasi web lainnya.
Hal ini mencakup elemen interaktif pengguna seperti menu tindakan, saran elemen formulir, pemilih konten, dan UI pengajaran.
Atribut pop-up baru memungkinkan elemen apa pun ditampilkan di lapisan atas secara otomatis. Artinya, developer tidak perlu lagi mengkhawatirkan posisi, elemen yang ditumpuk, fokus, atau interaksi keyboard.
Pelajari lebih lanjut di Memperkenalkan popover API.
Rilis browser beta
Versi browser beta memberi Anda pratinjau hal-hal yang akan ada di versi stabil browser 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 adalah Firefox 114, Chrome 115, dan Safari 16.6. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat catatan rilis untuk mengetahui semua detailnya, berikut beberapa sorotannya.
Chrome 115 menyertakan beberapa nilai untuk properti display
CSS. Artinya, display: flex
menjadi display: block flex
dan display: block
menjadi display: block flow
. Nilai tunggal dipertahankan sebagai kata kunci lama. Setelah berada di Chrome Stabil, beberapa nilai tersebut akan tersedia di semua mesin.
Di Chrome 115, terdapat juga ekstensi ScrollTimeline
dan ViewTimeline
untuk spesifikasi Animasi Web. Hal ini memungkinkan animasi berbasis scroll melalui CSS dan JavaScript.
Firefox 114 menyertakan WebTransport API, update modern untuk WebSocket yang memberikan dukungan untuk beberapa streaming, streaming satu arah, dan pengiriman yang tidak berurutan.
Bagian dari serial Baru di web