Ekim 2022'de kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.
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. 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.
Tarayıcı desteği
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