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.

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 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

  • Chrome: 108.
  • Edge: 108.
  • Firefox: 101.
  • Safari: 15.4.

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.

Tarayıcı desteği

  • Chrome: 83.
  • Edge: 83.
  • Firefox: 107.
  • Safari: 17.

Kaynak

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