Temmuz ayında web platformundaki yenilikler

Kararlı ve beta sürümündeki bazı ilgi çekici özellikleri keşfedin web tarayıcılarında gösterilecek.

Rachel Andrew

Kararlı tarayıcı sürümleri

Temmuz 2024'te Firefox 128, Safari 17.6 ve Chrome 127 kararlı hale geldi. Bu yayında, web platformuna eklenen yeni özellikler incelenmektedir.

CSS Göreli renk söz dizimi

Firefox 128 şunları içerir: CSS göreli renk söz dizimi, bir kaynak rengine göre renk oluşturabilmenizi sağlar. Aşağıdaki CSS, hsl() kullanarak indigo rengin doygunluğunu yarıya indiriyor.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Blog yayınında daha pek çok örnek bulabilirsiniz. CSS göreli renk söz dizimi. Göreli renk söz dizimi, Interop 2024'te en çok dikkat çeken alanlardan biridir. Dolayısıyla bu güncelleme, kararlı Firefox'un puanını artırmaya yardımcı olur.

content özelliği için alternatif metin

Firefox 128, CSS content özelliği için alternatif metni destekler. bir resim içerdiğinden emin olun. Alternatif metin, erişilebilirlik ağacında gösterilir. Bu, alternatif metnin artık content için tüm tarayıcılar tarafından desteklendiği anlamına gelir.

Chrome 127'deki bir güncelleme, Chrome'un rastgele sayıda öğelerini kullanarak tek bir dize yerine attr() işlevini kullanın.

font-size-adjust mülkü

Chrome 127'de, Interop 2024'ün odak noktalarından biri olan font-size-adjust bulunur. Bu özellik, yazı tipi yedeğinin gerçekleşebileceği, bir yedek yazı tipinin boyutunu ilk tercih edilen yazı tipiyle eşleştirmenize yardımcı olur.

Bu Chrome sürümüyle birlikte font-size-adjust özelliği Referans Değer Yeni Kullanıma Sunuldu.

iframe'lerde View Transition API desteği

Chrome 127'den itibaren bir ana çerçeve ve aynı kaynak iframe'de aynı doküman görüntüleme geçişleri kullanılabilecektir.

Önceden, ana çerçeve aynı anda bir geçiş çalıştırıyorsa aynı kaynak iframe'de document.startViewTransition kullanılarak bir görünüm geçişi çalıştırılamıyordu. iframe'in geçişi otomatik olarak atlanır. Artık her iki geçiş de yürütülecektir.

Klavyeye odaklanılabilir kaydırma kapsayıcıları

Chrome 127'deki kaydırma çubukları tıklamaya ve programatik olarak odaklanılabilir varsayılan olarak. Odaklanılabilir çocuklara sahip olmayan kaydırıcılar varsayılan olarak klavyeye odaklanabilir.

Yayından, bu değişiklik hakkında daha fazla bilgi edinin Klavye odaklanılabilir kaydırıcılar.

@property kuralı

Firefox 128, @property kuralı ve ilgili JavaScript desteği içerir API'ler. Yani bir söz dizimini tanımlayan özel CSS özellikleri oluşturabilirsiniz: devralma ve bir başlangıç değeri.

Aşağıdaki örnekte özel mülk, <color> kabul edecek şekilde tanımlanmıştır devralmayacak ve başlangıç değeri hotpink olacak.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property kuralı artık Temel Yeni Kullanılabilir'in bir parçası. Daha fazla bilgi için @property: Artık evrensel tarayıcı desteğine sahip yeni nesil CSS değişkenleri.

Yeniden boyutlandırılabilir ArrayBuffer ve büyütülebilir SharedArrayBuffer

Yeniden Boyutlandırılabilir ArrayBuffer ve yetiştirilebilir SharedArrayBuffer artık Firefox 128'de destekleniyor. Bu özellik, tamponların boyutunun bir program ayırmaya gerek kalmadan arabelleğe alıp verileri oraya kopyalayın. Bu mülkler, Yeni Kullanılabilir Temel Düzey'e de katılır.

Flexbox özelliklerindeki safe anahtar kelimesi

Safari 17.6, çoğunlukla mevcut özelliklerde yapılan düzeltmelerin yer aldığı bir sürümdür. ancak flexbox hizalama özellikleri için safe anahtar kelimesini de içerir. Bu, safe anahtar kelimesinin tarayıcılar arasında birlikte çalışabilmesini sağlar.

safe anahtar kelimesi seçilen hizalamanın içeriğin dışında görüntülenmesini önler görüntülenebilir alan. Aşağıdaki CodePen, bunun nasıl çalıştığını gösterir ortaya hizalı öğelerle değiştirin. center hizalaması veri kaybına neden oluyorsa Bunun yerine start kullanıldı.

Beta tarayıcı sürümleri

Beta tarayıcı sürümleri, gelecekte kullanıma sunulacak özelliklerin önizlemesini sunar tarayıcının kararlı sürümünü kullanır. Yeni özellikleri test etmek veya söz konusu içeriği kaldırma ihtimaliniz vardır. Yeniler betalar Firefox 129 ve Chrome 128. İlgili içeriği oluşturmak için kullanılan Safari 18 beta programı hâlâ devam ediyor. Bu sürümler, platforma pek çok muhteşem özellik katıyor. Yayına göz atın not almalısınız. İşte birkaç önemli nokta.

Chrome 128, CSS ruby-align özelliğini ve display: ruby, zoom özelliği de spesifikasyona uyacak şekilde güncellendi. Evet, AudioContext AudioContext oluşturma ve oluşturma hatalarını bildiren AudiContext.onerror.

Firefox 129, @starting-style kuralını ve transition-behavior Bu mülkler, Temel Yeni Kullanılabilir özellik kapsamına alınacak Firefox 129 kararlı sürüme yayınlandı.