Haziran ayında web platformunda yeni kullanıma sunulanlar

Haziran 2022'de kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.

Rachel Andrew

Kararlı tarayıcı sürümleri

Haziran ayında Chrome 103 ve Firefox 102 kararlı sürüm olarak kullanıma sunuldu.

Akışları ve okunabilir bayt akışlarını dönüştürme

Firefox 102, Transform Streams desteğini içerir. Bu sayede, ReadableStream'ten WritableStream'a boru hattı oluşturabilir ve parçalarda dönüşüm gerçekleştirebilirsiniz. Bu özelliğin üç motorda da kullanıma sunulduğunu görmek çok güzel. Bu nedenle, akışlar hakkında bilgi edinmek için şimdi tam zamanı.

Tarayıcı desteği

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Kaynak

Okunabilir bayt akışları artık Firefox 102'de de destekleniyor. Bu sayede, ReadableStreamBYOBReader arayüzüyle BYOB (kendi arabelleğinizi getirin) okuyucu kullanılabiliyor. Bu, geliştirici tarafından sağlanan verileri aktarmak için kullanılabilir.

Tarayıcı desteği

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: Desteklenmez.

Kaynak

Yerel olarak yüklü yazı tiplerine erişme

Chrome 103, kullanıcının yerel olarak yüklü yazı tiplerine erişmesine olanak tanıyan Local Font Access API'yi içerir. Cihaza yüklenen yazı tiplerine erişim isteğinde bulunduktan sonra, yüklü yazı tiplerinin bir dizisini almak için window.queryLocalFonts() işlevini çağırın.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

update medya özelliği

Firefox 102, update medya özelliğini içerir. Bu, çıkış cihazının oluşturulduktan sonra içeriğin görünümünü değiştirip değiştiremeyeceğini sorgulamak için kullanılır.

Tarayıcı desteği

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

Kaynak

Yeni bir HTTP durum kodu: 103 erken ipucu

Chrome 103, HTTP 103 Erken İpuçları adlı yeni bir durum kodu ekler. Sunucu veya CDN, bir sayfanın yüklenmesi için belirli bir alt kaynak grubunun gerekli olduğunu bilirse tarayıcıya kaynaklara önceden bağlanmasını veya hatta bunları gerektiren sayfa geldiğinde kaynakları önceden yüklemesini önerebilir. Bu özellikten yararlanmak için sunucunuzda veya CDN'nizde güncelleme yapmanız gerekir. Erken İpuçları 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 sürüm dünya genelinde kullanıma sunulmadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmek için mükemmel bir zamandır.

Nisan ayındaki yeni beta sürümleri Chrome 104, Firefox 103 ve Safari 16 idi.

Aralık medya sorguları için yeni söz dizimi

Chrome 104, Medya Sorguları 4. Seviye spesifikasyonundaki aralık medya sorguları için yeni söz dizimini içerir. Örneğin, daha önce şu şekilde yazılmış bir medya sorgusu:

@media (min-width: 400px) { … }

Artık şu şekilde yazılabilir:

@media (width >= 400px) { … }

Tarayıcı desteği

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Kaynak

Region Capture API

Masaüstünde Chrome 104, Region Capture API'yi de içerir. Bu sayede, çekilen videoyu paylaşmadan önce kırpabilir ve videodan içerik kaldırabilirsiniz.

Safari 16, tarayıcıya birkaç önemli özellik getiriyor

Safari 16, Safari ekibinin heyecan verici bir sürümü olacak gibi görünüyor. Bu sürümde, Interop 2022'de yer alan özelliklerin çoğu eklendi. Yılın ortasında bu kadar çok özellik kullanıma sunulduğuna sevindik. En sevdiğim özelliklerden birkaçını burada öne çıkarıyorum. Daha fazla bilgi için sürüm notlarına göz atın.

Birçok geliştirici gibi ben de, şu anda Chrome'da bir işaretin arkasında olan bir özellik olan kapsayıcı sorguları için boyut sorguları desteğini görmekten heyecan duyuyorum.

Safari 16'da grid-template-columns ve grid-template-rows için subgrid değeri de desteklenir. Firefox'ta mevcut olan ve Chrome'da geliştirme aşamasında olan bu özellik, ızgara kanal boyutunun iç içe yerleştirilmiş ızgaralar tarafından devralınmasını sağlar.

Tarayıcı desteği

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Kaynak

Ayrıca, ızgara düzeninde ızgara kanallarını animasyonlu hale getirme seçeneği de vardır.

Tarayıcı desteği

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Tarih, saat, renk ve dosyalar için tarayıcı seçiciyi göstermenin standart bir yolunu sağlayan showPicker() yöntemi dahildir. Bu konu hakkında daha fazla bilgiyi Tarih, saat, renk ve dosyalar için tarayıcı seçici gösterme başlıklı makalede bulabilirsiniz.

Tarayıcı desteği

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Kaynak

display: contents ile ilgili erişilebilirlik sorunları da giderildi. Bu sayede, erişilebilirlik ağacından öğe kaldırma riski olmadan bu yararlı özelliği güvenli bir şekilde kullanabilirsiniz.

Bu beta özellikler yakında kararlı tarayıcılarda kullanıma sunulacaktır.

Web'de yeni olanlar serisi kapsamında