Ekim ayında web platformundaki yenilikler

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

Ekim ayında Firefox 106, Chrome 107 ve Safari 16.1 kararlı sürüm olarak kullanıma sunuldu. Bunun web platformu için ne anlama geldiğine bakalım.

Microsoft'taki katkıda bulunanlarımızın çalışmaları sayesinde Chrome artık grid-template-columns ve grid-template-rows değerlerini enterpolasyonlu olarak hesaplayabiliyor. Bu sayede ızgara düzenleri, bir animasyonun veya geçişin orta noktasında sabitlenmek yerine, durumlar arasında sorunsuz bir şekilde geçiş yapabilir.

Animasyonu görmek için fareyle avatarların üzerine gelin. Bu örnek, daha fazla bilgi edinebileceğiniz CSS animasyonlu ızgara düzenleri makalesinden alınmıştır.

Tarayıcı desteği

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

getDisplayMedia()'e eklemeler

Chrome'da getDisplayMedia()'a, ekran paylaşımı sırasında yanlışlıkla fazla paylaşım yapılmasını önlemeyi amaçlayan bazı eklemeler de yapılmıştır.

  • displaySurface seçeneği, web uygulamasının belirli bir görüntüleme yüzeyi türünü (sekmeler, pencereler veya ekranlar) sunmayı tercih ettiğini gösterebilir.
  • surfaceSwitching seçeneği, Chrome'un kullanıcının paylaşılan sekmeler arasında dinamik olarak geçiş yapmasına izin verip vermeyeceğini belirtir.
  • selfBrowserSurface seçeneği, kullanıcının mevcut sekmeyi paylaşmasını önlemek için kullanılabilir. Bu sayede "aynalı koridor" etkisinden kaçınabilirsiniz.
  • systemAudio seçeneği, Chrome'un kullanıcıya yalnızca alakalı ses kaydı sunmasını sağlar.

Safari 16.1, belirli bir Safari penceresini yakalama desteği ekleyerek getDisplayMedia desteği de içerir.

CSS'deki yazı tipi teknolojisi ve özelliklerinin desteklenmesi için test etme

Firefox, @supports ile özellik sorgularına font-tech() ve font-format() işlevlerini ekledi. Aşağıdaki örnek, COLRv1 yazı tiplerinin desteklenip desteklenmediğini test eder.

@supports font-tech(color-COLRv1) {

}

Daha fazla örneği MDN'de bulabilirsiniz.

Metin parçasına ilerle

Safari 16.1, belirli bir metin parçasının belirtildiği bir URL'ye gitme desteği ekleyen metin parçasına kaydırma özelliğini destekler.

AVIF desteği

Safari 16, hareketsiz AVIF resimleri için destek içeriyordu. Safari 16.1 ise macOS Ventura, iOS 16 ve iPadOS 16'da animasyonlu AVIF resimleri için destek içerir.

Safari için Web Push

Safari 16.1, macOS Ventura'daki Safari'de Web Push desteğini kullanıma sundu. Bu işlem için Push API ve Notifications API kullanılır. Bu konu hakkında daha fazla bilgiyi Web Push ile tanışın başlıklı makalede bulabilirsiniz. Safari'de Web Push açılış sayfası, bu özelliğin artık üç büyük motorda da kullanılabildiği anlamına gelir.

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. Bu ayki yeni beta sürümler Chrome 108, Firefox 107 ve Safari 16.2'dir.

Chrome 108, yazdırma sırasında CSS parçalama özelliklerinin (break-before, break-after ve break-inside) avoid değeri için destek içerir. Bu değer, tarayıcıya uygulandığı öğenin öncesinde, sonrasında veya içinde satır aralığı bırakmamasını söyler. Örneğin, aşağıdaki CSS, bir şeklin sayfa sonuna bölünmesini önler.

figure {
    break-inside: avoid;
}

Chrome 108'de, değiştirilen öğelerde taşmanın davranışıyla ilgili bir değişiklik kullanıma sunulmaya başlıyor. Bu değişiklik bazı durumlarda görsel değişikliklere neden olabilir. Daha fazla bilgi edinmek ve karşılaştığınız sorunları nasıl gidereceğinizi öğrenmek için CSS'de değiştirilen öğelerde overflow özelliğinde yapılan değişiklik başlıklı makaleyi okuyun.

Android'de Chrome'da, dokunmatik klavye gösterildiğinde düzen görüntü alanının davranışında bir değişiklik yapıldı. Daha fazla bilgi edinmek ve bu özelliğin gelecek ay kararlı sürüme sunulmasına hazırlanmak için Android'de Chrome'a gelecek görüntü alanı yeniden boyutlandırma davranışı değişikliklerine hazırlanma başlıklı makaleyi okuyun.

Chrome'da yeni CSS Görünüm Birimleri de mevcuttur. Bunlar arasında küçük (svw, svh, svi, svb, svmin, svmax), büyük (lvw, lvh, lvi, lvb, lvmin, lvmax), dinamik (dvw, dvh, dvi, dvb, dvmin, dvmax) ve mantıksal (vi, vb) birimler bulunur. Bu birimler Firefox ve Safari'de zaten uygulanmaktadır.

Firefox 107, COLRv1 yazı tipi desteğini etkinleştirerek bu yazı tipi teknolojisini destekleyen Chrome'a katıldı. Chrome 108, yazı tiplerinde @supports içeren özellik sorguları için font-tech() ve font-format() işlevlerine destek de ekler.

Firefox da contain-intrinsic-size desteğini ekleyerek bu özelliği destekleyen iki tarayıcıdan biri oldu.

Safari 16.2 Beta, boyutlandırma ve kaydırma sabitleme dahil olmak üzere bir dizi CSS düzeltmesi içerir.

Web'de yeni olanlar serisi kapsamında