Ekim ayında web platformundaki yenilikler

Ekim 2022'de kararlı ve beta web tarayıcılarında bulunan bazı ilgi çekici özellikleri keşfedin.

Rachel Andrew

Kararlı tarayıcı sürümleri

Ekim ayında Firefox 106, Chrome 107 ve Safari 16.1 kararlı hale geldi. Şimdi, bunun web platformu için ne anlama geldiğine bakalım.

Izgara kanalları animasyonu

Microsoft'taki katkıda bulunan kullanıcılarımız sayesinde Chrome artık grid-template-columns ve grid-template-rows değerlerini birlikte hesaplayabiliyor. Bu, ızgara düzenlerinin bir animasyonun veya geçişin orta noktasına tutturmak yerine durumlar arasında sorunsuz bir şekilde geçiş yapabileceği anlamına gelir.

getDisplayMedia() için yapılan eklemeler

Chrome'da getDisplayMedia() için yapılan bazı eklemeler, ekran paylaşımı sırasında yanlışlıkla aşırı paylaşımı önlemeyi amaçlar.

• displaySurface seçeneği, web uygulamasının belirli bir görüntü yüzeyi türü (sekmeler, pencereler veya ekranlar) sunmayı tercih ettiğini belirtebilir.
• surfaceSwitching seçeneği, Chrome'un kullanıcıya paylaşılan sekmeler arasında dinamik olarak geçiş yapmasına izin verip vermeyeceğini belirtir.
• selfBrowserSurface seçeneği, kullanıcının geçerli sekmeyi paylaşmasını engellemek için kullanılabilir. Bu yöntem, "aynalar" efektini önler.
• systemAudio seçeneği, Chrome'un kullanıcıya yalnızca alakalı ses yakalamayı sunmasını sağlar.

Safari 16.1 ayrıca getDisplayMedia desteği ile belirli bir Safari penceresini yakalama desteği de sunar.

CSS'nin yazı tipi teknolojisi ve özelliklerini destekleme testi

Firefox, @supports içeren sorgulara yer vermek için font-tech() ve font-format() işlevlerini ekledi. Aşağıdaki örnek, COLRv1 yazı tiplerinin desteğini test eder.

@supports font-tech(color-COLRv1) {

}

MDN'de daha fazla örnek bulabilirsiniz.

Metin parçasına git

Safari 16.1, belirtilen belirli bir metin parçasıyla URL'ye gitme desteği sağlayan metin parçasına kaydırma için destek içerir.

AVIF desteği

Safari 16'ya sabit AVIF resimleri, Safari 16.1 ise macOS Ventura, iOS 16 ve iPadOS 16'da animasyonlu AVIF resimleri için destek sunar.

Safari için Web Push

Safari 16.1, macOS Ventura'daki Safari'ye Web Push desteği getiriyor. Bu API, Push API'sini ve Notifications API'yi kullanır. Bununla ilgili daha fazla bilgiyi Meet Web Push başlıklı makaleden edinebilirsiniz. Web Push'un Safari'de açılması, bu özelliğin artık üç ana motorda da kullanılabildiği anlamına geliyor.

Beta tarayıcı sürümleri

Beta tarayıcı sürümleri, tarayıcının bir sonraki kararlı sürümünde olacak öğelerin önizlemesini sunar. Dünya bu sürümü almadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmenin tam zamanı. Bu ayın yeni beta sürümleri Chrome 108, Firefox 107 ve Safari 16.2'dir.

Chrome 108, yazdırma sırasında break-before, break-after ve break-inside CSS parçalama özelliklerinin avoid değeri için destek içerir. Bu değer, tarayıcıya uygulandığı öğenin öncesinde, sonrasında veya içinde bozulmamasını bildirir. Örneğin, aşağıdaki CSS sayfa sonunda bir şeklin bozulmasını önler.

figure {
    break-inside: avoid;
}

Chrome 108'de, taşmanın değiştirilen öğelerdeki davranışı ile ilgili bir değişiklik uygulanmaya başlandı. Bu durum, bazı durumlarda görsel değişikliklere neden olabilir. Daha ayrıntılı bilgi edinmek ve gördüğünüz sorunları nasıl gidereceğinizi öğrenmek için CSS'de değiştirilen öğelerdeki taşma değişikliği başlıklı makaleyi okuyun.

Android'de dokunmatik klavye gösterildiğinde Düzen Görünümünün Davranışı ile ilgili bir değişiklik yapılmıştır. Android'de Chrome'da yapılacak görüntü alanı yeniden boyutlandırma davranışı değişikliklerine hazırlanma başlıklı makaleden daha fazla bilgi edinebilir ve önümüzdeki ay için bu gönderimin kararlı hale getirilmesine nasıl hazırlanacağınızı öğrenebilirsiniz.

Chrome'da da yeni CSS Görüntü Alanı Birimleri vardır. Bunlar 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 birimleridir. Bu birimler halihazırda Firefox ve Safari'de uygulanmıştır.

Firefox 107, COLRv1 yazı tipi desteğini etkinleştirerek bu yazı tipi teknolojisini desteklemek için Chrome'a katılıyor. Yine yazı tiplerinde, Chrome 108'de sorguları @supports ile öne çıkarmak için font-tech() ve font-format() işlevleri desteklenmektedir.

Firefox, contain-intrinsic-size desteğini de ekleyerek bu özelliği destekleyen iki tarayıcı yapmak için Chrome'a katıldı.

Safari 16.2 Beta sürüm, boyutlandırma ve kaydırmayı atlama dahil olmak üzere çok sayıda CSS düzeltmesi içerir.

Web'de yeniler serisinin bir parçası