Eylül ayında web platformunda yeni kullanıma sunulanlar

Eylül 2024'te kararlı ve beta web tarayıcılarında kullanıma sunulan bazı ilgi çekici özellikleri keşfedin.

Rachel Andrew

Kararlı tarayıcı sürümleri

Eylül 2024'te Firefox 130, Safari 18 ve Chrome 129 kararlı hale geldi. Bu yayında, web platformuna eklenen yeni özellikler ele alınmaktadır.

<details> için name özelliğine sahip özel akordeonlar

Firefox 130, <details> öğesinin name özelliğini destekler. Bu grup, <details> öğelerini gruplandırır. Gruptaki yalnızca bir öğe aynı anda açık olabilir. Bu sayede, JavaScript kullanmadan özel bir akordeon oluşturabilirsiniz.

Tarayıcı desteği

  • Chrome: 120.
  • Kenar: 120.
  • Firefox: 130.
  • Safari: 17.2.

Animasyonlu geçişi otomatik olarak ayarlama (ve daha fazlası)

Chrome 129, CSS interpolate-size mülkünü ve calc-size() işlevini ekler.

CSS interpolate-size özelliği, anahtar kelimelerin canlandırılabildiği durumlarda auto, min-content ve fit-content gibi CSS'nin doğal boyutlandırma anahtar kelimelerinin animasyonlarını ve geçişlerini etkinleştirmelerine olanak tanır.

Tarayıcı desteği

  • Chrome: 129.
  • Edge: Desteklenmez.
  • Firefox: Desteklenmez.
  • Safari: desteklenmez.

Kaynak

CSS calc-size() işlevi, calc()'e benzer bir CSS işlevidir ancak tam olarak bir desteklenen boyutlandırma anahtar kelimesiyle ilgili işlemleri de destekler. Desteklenen boyutlandırma anahtar kelimeleri auto, min-content, max-content ve fit-content şeklindedir.

Tarayıcı Desteği

  • Chrome: 129.
  • Edge: 129.
  • Firefox: Desteklenmez.
  • Safari: desteklenmez.

Kaynak

CSS'de height: auto; (ve diğer doğal boyutlandırma anahtar kelimeleri) için animasyon başlıklı makalede daha fazla bilgi edinin.

JavaScript'te süre biçimlendirme

Chrome 129'da ayrıca Intl.DurationFormat işlevi de yer alır. Bu işlev, süreleri biçimlendirmek için birden fazla yerel ayarı destekleyen bir yöntem (ör. "1 saat 40 dakika 30 saniye") sağlar.

Tarayıcı Desteği

  • Chrome: 129.
  • Edge: 129.
  • Firefox: Desteklenmez.
  • Safari: 16.4.

Kaynak

WebCodecs API

Web Codecs API artık Firefox 130'ta masaüstünde destekleniyor. Bu sayede web geliştiricileri, video akışının tek tek karelerine ve ses parçalarına düşük düzeyde erişim elde edebiliyor. Yeni arayüzler şunlardır: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame ve VideoColorSpace. Bu API, Firefox Android'de henüz desteklenmediğinden Baseline Newly'yi tam olarak kullanmamaktadır, ancak Android için Firefox Gecelik desteği mevcuttur.

Tarayıcı Desteği

  • Chrome: 94.
  • Kenar: 94.
  • Firefox: 130.
  • Safari: 16.4.

Kaynak

Özel mülkler için CSS stil sorguları

Safari 18, CSS stil sorguları da dahil olmak üzere çeşitli yeni özellikler için destek sunar. Stil sorguları, yeniden kullanılabilir stiller oluşturmanın ve bunları grup olarak uygulamanın bir yolunu sunar. Örneğin, birden fazla varyantı olan yeniden kullanılabilir bir bileşeniniz varsa.

Tarayıcı desteği

  • Chrome: 111.
  • Kenar: 111.
  • Firefox: Desteklenmez.
  • Safari: 18.

Kaynak

CSS stil sorguları hakkında daha fazla bilgi edinin.

Aynı doküman görünümü geçişleri

Safari 18, SPA'lar için aynı doküman görünümü geçişlerini de destekler. Bu sayede, bir uygulamanın farklı durumları arasında görsel geçişler oluşturabilirsiniz.

Tarayıcı Desteği

  • Chrome: 111.
  • Edge: 111.
  • Firefox: Desteklenmez.
  • Safari: 18.

Kaynak

Aynı doküman görünümü geçişleri hakkında daha fazla bilgi edinin

Beta tarayıcı sürümleri

Beta tarayıcı sürümleri, tarayıcının bir sonraki kararlı sürümünde yer alacak özelliklerin önizlemesini sunar. Bu, sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini, herkese sunulmadan önce test etmenin tam zamanı. Yeni beta sürümler Firefox 131, Chrome 130 ve Safari 18.1'dir. Bu sürümler platforma birçok harika özellik getiriyor. Tüm ayrıntılar için sürüm notlarına göz atın. İşte birkaç önemli nokta.

Firefox 131'de yeni JavaScript yineleme yardımcıları ve Bağımsız Bölümlendirilmiş Duruma Sahip Çerezler (CHIPS) artık etkin.

Chrome 130, hem satır içi parçalandırma (satır düzeni) hem de blok parçalandırma (baskı ve çok sütunlu için oluşturulan parçalar) için box-decoration-break: clone desteği içerir. Ayrıca IndexedDB'de daha iyi hata raporlaması ve Web Seri SerialPort arayüzü için yeni bir connected özelliği de vardır.

Safari 18.1, mevcut özelliklerde yapılan hata düzeltmelerini içeren bir sürümdür.