Baru menggunakan platform web pada bulan Mei

Temukan beberapa fitur menarik yang diluncurkan di browser web stabil dan beta selama Mei 2023.

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.

Dukungan Browser

  • Chrome: 113.
  • Edge: 113.
  • Pratinjau Teknologi Firefox: didukung.
  • Pratinjau Teknologi Safari: didukung.

Sumber

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.

Dukungan Browser

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

Sumber

Dan fitur media update.

Dukungan Browser

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

Sumber

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

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.

Dukungan Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Sumber

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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

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.

Dukungan Browser

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Sumber

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;
   
}
 
}
}

Dukungan Browser

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Sumber

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.

Dukungan Browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Sumber

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.

Dukungan Browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 120.
  • Safari: 17.

Sumber

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