Kasım 2022'de kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.
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'de Chrome'da Düzen Görüntü Alanı davranışında yapılan değişiklik
Android'de Chrome 108'den itibaren, 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 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 Görünüm 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.
Tarayıcı desteği
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 sayede kullanıcı aracısı, alt öğelerini oluşturmak zorunda kalmadan bir öğenin boyutunu belirleyebilir. 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, 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;
}
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şik kimlik akışları için 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