Ekim ayında web platformunda yeni

Kararlı tarayıcı sürümleri #

Ekimde, Firefox 106, krom 107Ve Safari 16.1 kararlı hale geldi. Bunun web platformu için ne anlama geldiğine bir göz atalım.

Izgara izlerinin animasyonu #

Microsoft’ta katkıda bulunanlarımızın çalışmaları sayesinde, Chrome artık enterpolasyon yapabiliyor grid-template-columns Ve grid-template-rows değerler. Bu, ızgara düzenlerinin, bir animasyonun veya geçişin orta noktasında yakalanmak yerine, durumlar arasında sorunsuz bir şekilde geçiş yapabileceği anlamına gelir.

eklemeler getDisplayMedia() #

Ayrıca Chrome’da bazı eklemeler vardır getDisplayMedia() engellemeyi amaçlayan ekran paylaşımı sırasında yanlışlıkla aşırı paylaşım.

• bu displaySurface seçeneği, web uygulamasının belirli bir görüntüleme yüzeyi türü (sekmeler, pencereler veya ekranlar) sunmayı tercih ettiğini gösterebilir.
• bu surfaceSwitching seçeneği, Chrome’un kullanıcının paylaşılan sekmeler arasında dinamik olarak geçiş yapmasına izin verip vermeyeceğini belirtir.
• bu selfBrowserSurface seçeneği, kullanıcının mevcut sekmeyi paylaşmasını engellemek için kullanılabilir. Bu, “aynalı salon” etkisini önler.
• bu systemAudio seçeneği, Chrome’un kullanıcıya yalnızca alakalı ses kaydı sunmasını sağlar.

Safari 16.1 ayrıca şu desteği içerir: getDisplayMediabelirli bir Safari penceresinin yakalanması için destek eklendi.

CSS’den yazı tipi teknolojisi ve özellikleri için destek testi #

Firefox ekledi font-tech() Ve font-format() ile sorguları öne çıkaran işlevler @supports. Destek için aşağıdaki örnek testler COLRv1 yazı tipleri.

@supports font-tech(color-COLRv1) {
}

Daha fazla örnek bulabilirsiniz MDN’de.

Metin parçasına ilerleyin #

Safari 16.1 şunları destekler: metin parçasına kaydır belirtilen belirli bir metin parçasıyla bir URL’ye gitmek için destek ekler.

AVIF desteği #

Safari 16, hareketsiz AVIF görüntüleri için destek içeriyordu; Safari 16.1, macOS Ventura, iOS 16 ve iPadOS 16’da animasyonlu AVIF görüntüleri için destek içeriyor.

Safari için Web İtme #

Safari 16.1, Web Push desteğini macOS Ventura’da Safari’ye getiriyor. Bu, Push API ve Bildirimler API’sini kullanır, bu konuda daha fazla bilgiyi makalede okuyabilirsiniz. Web Push ile tanışın. Safari’de Web Push iniş, artık üç ana motorun hepsinde mevcut olduğu anlamına gelir.

Beta tarayıcı sürümleri #

Beta tarayıcı sürümleri, size tarayıcının bir sonraki kararlı sürümünde olacak şeylerin bir önizlemesini sunar. Dünya bu sürümü almadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırmaları test etmek için harika bir zaman. Bu ayki yeni betalar krom 108, Firefox 107Ve Safari 16.2.

Chrome 108 şunları destekler: avoid CSS parçalanma özelliklerinin değeri break-before, break-afterVe break-inside yazdırırken. Bu değer, tarayıcıya, uygulandığı öğeden önce, sonra veya içinde kırılmamasını söyler. Örneğin, aşağıdaki CSS, bir şeklin sayfa sonunda kırılmasını önler.

figure {
break-inside: avoid;
}

Chrome 108, bazı durumlarda görsel değişikliklere neden olabilen değiştirilen öğelerde taşmanın davranış biçiminde bir değişiklik sunmaya başlar. Makaleyi oku CSS’de değiştirilen öğelerde taşma değişikliği daha fazla ayrıntı ve gördüğünüz sorunları nasıl çözeceğinizi görmek için.

Ekran klavyesi gösterildiğinde, Mizanpaj Görünümünün Android’de Chrome’da nasıl davrandığına dair bir değişiklik var. Okumak Android’de Chrome’a ​​gelen görüntü alanı yeniden boyutlandırma davranış değişiklikleri için hazırlanın daha fazlasını öğrenmek ve bu sevkiyatın gelecek ay istikrarlı hale gelmesi için nasıl hazırlanacağını öğrenmek için.

Ayrıca Chrome’da yeni CSS Görünüm Birimleri 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) birimleri. Bu birimler zaten Firefox ve Safari’de uygulanmaktadır.

Firefox 107, COLRv1 yazı tipi desteğini etkinleştirerek Chrome’un bu yazı tipi teknolojisini desteklemesine katılıyor. Ayrıca yazı tiplerinde, Chrome 108 aşağıdakiler için destek ekler: font-tech() Ve font-format() ile sorguları öne çıkaran işlevler @supports.

Firefox da ekler contain-intrinsic-size destek, bu özelliği destekleyen iki tarayıcı oluşturmak için Chrome’a ​​​​katılmak.

Safari 16.2 Beta, boyutlandırma ve kaydırma eki gibi bir dizi CSS düzeltmesi içerir.

fotoğrafı çeken ahmet zaid.