Kasım 2022'de kararlı ve beta web tarayıcılarında bulunan bazı ilgi çekici özellikleri keşfedin.
Kararlı tarayıcı sürümleri
Kasım ayında Firefox 107 ve Chrome 108 kararlı hale geldi. Şimdi, bunun web platformu için ne anlama geldiğine bakalım.
Android'de Chrome'daki Düzen Görünümü davranışında değişiklik
Android'de dokunmatik klavye göründüğünde Düzen Görünümü'nün davranışında Chrome 108'de değişiklik yapıldı. Daha fazla bilgi edinmek için Android'de Chrome'da yapılacak görüntü alanı yeniden boyutlandırma davranışı değişikliklerine hazırlanma başlıklı makaleyi okuyun.
Yeni görüntü alanı birimleri
Chrome 108'de yeni CSS Görüntü Alanı Birimleri de 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, Firefox ve Safari'de zaten uygulanmaktadır. Diğer bir deyişle, şu anda bu birimler için üç ana tarayıcı motorunda birlikte çalışabiliriz.
Büyük, küçük ve dinamik görüntü alanı birimleri bölümünü okuyun.
Tarayıcı Desteği
- 108
- 108
- 101
- 15,4
Firefox 107'de contain-intrinsic-size
kısayol CSS özelliği, contain-intrinsic-width
, contain-intrinsic-height
ve mantıksal özellikler contain-intrinsic-block-size
ile contain-intrinsic-inline-size
ile birlikte desteklenir.
Bunlar, boyut kısıtlaması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. Bunlar, bir öğe boyut kapsama tabi olduğunda yararlıdır.
CSS parçalama avoid
anahtar kelimesi için destek
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;
}
Bu ekleme, LayoutNG kullanarak yazdırma desteğinin dahil edilmesinden kaynaklanmaktadır. Bu da modern ve daha az hatalı bir deneyim sunar. LayoutNG hakkında daha fazla bilgi edinin.
Birleşik Kimlik Bilgisi Yönetimi API'si
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ı uyumlu bir iletişim kutusunu gösterir. FedCM, Chrome 108'de kullanıma sunuluyor. FedCM duyurusu blog yayınından daha fazla bilgi edinebilirsiniz.
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ı. Yayın tarihlerinin denk geldiği yer nedeniyle, bu ayki tek yeni beta sürümü Firefox 108'dir ve Safari 16.2 beta sürümü hâlâ devam etmektedir.
Firefox 108, bir <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 birimi olmayan bir tam sayı olarak kabul eder.
Firefox'ta kapsayıcı sorguları uygulanmaya devam ediyor. Firefox 108 beta sürümünde layout.css.container-queries.enabled
işaretinin arkasında, kapsayıcı sorgu uzunluğu birimleri (cqw
, cqh
, cqi
, cqb
, cqmin
, cqmax
) yer alır. Bunlar, sorgu kapsayıcının boyutuna göre belirlenen uzunluk birimleridir.
Web'de yeniler serisinin bir parçası