Baru menggunakan platform web pada bulan Agustus

Temukan beberapa fitur menarik yang telah diluncurkan di browser web stabil dan beta selama Agustus 2024.

Rilis browser stabil

Pada Agustus 2024, Firefox 129 dan Chrome 128 menjadi stabil. Postingan ini membahas fitur baru yang ditambahkan ke platform web.

Pembaruan pada pemformatan ruby

Elemen <ruby> HTML adalah alat yang efektif untuk meningkatkan kualitas presentasi teks, terutama untuk bahasa Asia Timur. Elemen ini memungkinkan Anda menampilkan anotasi fonetik atau informasi tambahan lainnya di atas atau di samping teks dasar. Mulai Chrome 128, anotasi ruby dapat dipecah barisnya, dan Anda dapat menata gaya teks ruby dengan properti CSS ruby-align.

Pelajari lebih lanjut di Properti <ruby> dan ruby-align CSS yang dapat dipecah baris.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties untuk Coretan Multi-Pena

Perubahan ini, yang dikirimkan di Chrome 128, memberikan cara yang aman dan andal untuk mengidentifikasi setiap pena (pointer) yang berinteraksi dengan layar untuk menetapkan warna atau bentuk pena tertentu untuk setiap perangkat yang berinteraksi dengan digitizer. Class ini memperluas antarmuka PointerEvent untuk menyertakan atribut baru, deviceProperties. Ini berisi atribut uniqueId, yang mewakili ID unik yang persisten di sesi dan terisolasi dokumen yang dapat Anda gunakan dengan andal untuk mengidentifikasi setiap pena yang berinteraksi dengan halaman.

Promise.try

Selain itu, di Chrome 128, Promise.try memudahkan penanganan error dengan Promise. Ada pola tempat Anda memiliki fungsi, f. Fungsi ini mungkin asinkron, dan menampilkan Promise, atau mungkin tidak. Untuk menggunakan semantik Promise guna menangani error dalam kedua kasus tersebut, Anda menggabungkan fungsi dalam Promise. Hal ini biasanya dicapai dengan new Promise(resolve => resolve(f())).

Promise.try adalah cara yang lebih mudah untuk mencapai hal yang sama. Dengan begitu, Anda dapat memulai rantai Promise yang menangkap semua error di pengendali .catch, bukan harus menangani alur pengecualian sinkron dan asinkron.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

Menganimasikan efek entri

Firefox 129 menyertakan dua fitur CSS yang digunakan untuk menganimasikan efek entri, dan fitur ini kini tersedia di Dasar Pengukuran.

Aturan @starting-style menentukan gaya awal pada elemen sebelum dirender di halaman. Hal ini diperlukan untuk elemen yang dianimasikan dari display: none, karena elemen tersebut memerlukan status untuk dianimasikan.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Efek entri juga memerlukan animasi properti terpisah, yaitu properti yang tidak dapat melakukan interpolasi antar-nilai. Hal ini kini dapat dicapai dengan transition-behavior: allow-discrete atau nilai allow-discrete dalam singkatan transisi Anda. Fitur ini juga kini didukung di Firefox 129.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

Pelajari lebih lanjut di Sekarang di Dasar Pengukuran: menganimasikan efek entri.

Penambahan ke PerformanceResourceTiming

Firefox 129 menambahkan properti contentType dan responseStatus dari antarmuka PerformanceResourceTiming. Kedua nilai ini masing-masing menunjukkan jenis konten resource yang diambil dan kode status respons HTTP yang ditampilkan saat mengambil resource.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

Metode toJSON() geolokasi

Di Firefox 129 juga ada GeolocationCoordinates.toJSON() dan GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 kini memiliki dukungan untuk WebDriver BiDi. Artinya, Anda dapat menggunakan Puppeteer dengan Chrome atau Firefox untuk otomatisasi. Pelajari lebih lanjut di WebDriver BiDi siap produksi di Firefox, Chrome, dan Puppeteer serta Mengumumkan Dukungan Puppeteer Resmi untuk Firefox.

Rilis browser beta

Versi browser Beta memberi Anda pratinjau hal-hal yang akan ada di browser versi 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 adalah Firefox 130 dan Chrome 129. Versi beta Safari 18 masih berlangsung. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat catatan rilis untuk mengetahui semua detailnya. Berikut adalah beberapa sorotan.

Firefox 130 mendukung atribut nama elemen <details> yang mengelompokkan elemen <details>, dengan hanya satu elemen dalam grup yang dapat dibuka dalam satu waktu. Dengan begitu, Anda dapat membuat akordeon eksklusif tanpa menggunakan JavaScript.

Chrome 129 menambahkan properti interpolate-size dan fungsi calc-size() CSS.

Properti interpolate-size CSS memungkinkan halaman memilih untuk menggunakan animasi dan transisi kata kunci ukuran intrinsik CSS seperti auto, min-content, dan fit-content, jika kata kunci tersebut dapat dianimasikan.

Fungsi calc-size() CSS adalah fungsi CSS yang mirip dengan calc(), tetapi juga mendukung operasi pada tepat satu kata kunci ukuran yang didukung. Kata kunci ukuran yang saat ini didukung adalah auto, min-content, max-content, dan fit-content.

Di Chrome 129 juga terdapat Intl.DurationFormat, yang menyediakan metode untuk memformat durasi, misalnya "1 jam 40 menit 30 detik" yang mendukung beberapa lokalitas.