Ekim 2022'de kararlı ve beta web tarayıcılarında bulunan bazı ilgi çekici özellikleri keşfedin.
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.
Tarayıcı Desteği
- 107
- 107
- 66
- 16
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ı