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

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.

Tarayıcı Desteği

  • 83
  • 83
  • 107
  • 17

Kaynak

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ı