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.

Rachel Andrew

Kararlı tarayıcı sürümleri

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

Izgara kanallarının animasyonu

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

• 107
• 107
• 66
• 16

getDisplayMedia()'e eklemeler

Ayrıca Chrome'da, getDisplayMedia()'a eklenen ve ekran paylaşımı sırasında yanlışlıkla fazla paylaşımın engellenmesini amaçlayan bazı eklemeler de bulunmaktadı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ını 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 özellik, Push API'sini ve Bildirimler API'sini kullanır. Bu konu hakkında daha fazla bilgiyi Meet Web Push makalesinde bulabilirsiniz. Safari'de Web Push açılışı, artık başlıca üç motorun tümünde kullanılabilir olduğu 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 ay kullanıma sunulan yeni beta sürümler 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 özellikleri için avoid değeri desteği 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