Kasım ayında web platformunda yeni kullanıma sunulanlar

Kasım 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

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

Android'deki Chrome'da Düzen Görünümü davranışında değişiklik

Android'de Chrome 108'den itibaren, Dokunmatik Klavye gösterildiğinde Sayfa Düzeni Görünüm Alanının davranışında bir değişiklik yapıldı. Daha fazla bilgi edinmek için Android'de Chrome'a gelecek görüntü alanı yeniden boyutlandırma davranışı değişikliklerine hazırlanın başlıklı makaleyi okuyun.

Yeni görüntü alanı birimleri

Chrome 108'de yeni CSS ekran birimleri de yer alıyor. 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 zaten Firefox ve Safari'de uygulanmış durumda. Bu da artık bu birimler için üç ana tarayıcı motoru arasında birlikte çalışabilirlik elde ettiğimiz anlamına geliyor.

Büyük, küçük ve dinamik görüntü alanı birimleri başlıklı makaleyi okuyun.

contain-intrinsic-size kısaltması CSS özelliği, Firefox 107'de uzun contain-intrinsic-width, contain-intrinsic-height ve mantıksal özellikler contain-intrinsic-block-size ve contain-intrinsic-inline-size ile birlikte desteklenir.

Bunlar, boyut sınırlamasına tabi olan bir kullanıcı arayüzü öğesinin boyutunu belirtmek için uygulanır. Bu, kullanıcı aracısının bir öğenin alt öğelerini oluşturmaya gerek kalmadan boyutunu belirlemesine olanak tanır. Bir öğe boyut sınırlamasına tabi olduğunda bu özellikler kullanışlıdır.

CSS parçalama avoid anahtar kelimesi için destek

Chrome 108, baskı 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;
}

Bu ekleme, LayoutNG'yi kullanan baskı desteğinin dahil edilmesi nedeniyle yapılmıştır. Bu, modern ve daha az hata içeren bir deneyim sunar. LayoutNG hakkında daha fazla bilgi edinin.

Federated Credential Management API

Federated Credential Management API (FedCM), web'deki birleştirilmiş kimlik akışları için bir soyutlama sağlar. Kullanıcıların web sitelerine giriş yapmak için kimlik sağlayıcılardan hesap seçmesine olanak tanıyan, tarayıcı aracılı bir iletişim kutusu gösterir. FedCM, Chrome 108'de kullanıma sunulmuştur. Bu özellik hakkında daha fazla bilgiyi FedCM duyurusu blog yayınında bulabilirsiniz.

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. Yayınlanma tarihleri nedeniyle bu ay yalnızca Firefox 108 beta sürümü kullanıma sunuldu. Safari 16.2 beta sürümü ise kullanıma sunulmaya devam ediyor.

Firefox 108, <picture> öğesinin alt öğesi olduğunda <source> öğesi için height ve width özelliklerini destekler. Bu özellikler, resmin piksel cinsinden yüksekliğini veya genişliğini birim içermeyen bir tam sayı olarak kabul eder.

Firefox'ta container sorgularının uygulanması devam etmektedir. Firefox 108 beta sürümündeki layout.css.container-queries.enabled işaretinin arkasında kapsayıcı sorgu uzunluk birimleri (cqw, cqh, cqi, cqb, cqmin, cqmax) bulunur. Bunlar, sorgu kapsayıcısının boyutuna göre uzunluk birimleridir.

Web'de yeni olanlar serisi kapsamında