Temmuz 2024'te kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.
Kararlı tarayıcı sürümleri
Temmuz 2024'te Firefox 128, Safari 17.6 ve Chrome 127 kararlı sürüm oldu. Bu yayında, web platformuna eklenen yeni özellikler ele alınmaktadır.
CSS göreli renk söz dizimi
Firefox 128, CSS göreli renk söz dizimini içerir. Bu, bir kaynak renge göre bir renk oluşturmanıza olanak tanır.
Aşağıdaki CSS, hsl()
kullanarak indigo
renginin doygunluğunu yarıya indirir.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Browser Support
CSS göreli renk söz dizimi blog yayınında daha birçok örnek bulabilirsiniz. Göreli renk söz dizimi, Interop 2024'ün odak alanlarından biridir. Bu nedenle, bu güncelleme Firefox'un kararlı sürümünün puanını artırmaya yardımcı olur.
content
mülkü için alternatif metin
Firefox 128, resim içeren CSS content
mülkü için alternatif metni destekler. Alternatif metin, erişilebilirlik ağacına gösterilir.
Bu, alternatif metnin artık content
için tüm tarayıcılar tarafından desteklendiği anlamına gelir.
Browser Support
Chrome 127'de yapılan bir güncelleme, Chrome'un yalnızca tek bir dize yerine rastgele sayıda öğe kabul etmesini sağlar. Bu sayede, örneğin attr()
işlevinin kullanılması mümkün olur.
font-size-adjust
mülkü
Chrome 127, Interop 2024'ün de odak alanlarından biri olan font-size-adjust
özelliğini içerir.
Bu özellik, yedek yazı tipinin boyutunu ilk tercih edilen yazı tipiyle eşleştirmenize yardımcı olduğundan yazı tipi yedekleme işleminin gerçekleşebileceği durumlarda kullanışlıdır.
Bu Chrome sürümüyle birlikte font-size-adjust
mülkü, Yeni Kullanıma Sunulan Temel'in bir parçası haline gelir.
Iframe'lerde Görüntü Geçişi API'si desteği
Chrome 127'den itibaren ana çerçevede ve aynı kaynaklı iframe'de aynı doküman görünümünde eşzamanlı 127 geçiş kullanılabilir.
Önceden, ana çerçeve aynı anda geçiş yapıyorsa aynı kaynaktaki bir iFrame'de document.startViewTransition kullanılarak görünüm geçişi çalıştırmak işe yaramıyordu. Iframe'in geçişi otomatik olarak atlanır. Artık her iki geçiş de uygulanacaktır.
Klavyeyle odaklanılabilir kaydırma kapsayıcıları
Chrome 127'den itibaren kaydırıcılar varsayılan olarak tıklamayla odaklanma ve programatik olarak odaklanma özelliğine sahip olur. Odaklanabilir alt öğeleri olmayan kaydırıcılar varsayılan olarak klavyeyle odaklanılabilir olur.
Bu değişiklik hakkında daha fazla bilgiyi Klavyeyle odaklanılabilir kaydırma çubukları başlıklı yayında bulabilirsiniz.
@property
kuralı
Firefox 128, @property
kuralı ve ilgili JavaScript API'leri için destek içerir. Bu, söz dizimi, devralma ve ilk değeri tanımlayan CSS özel özellikleri oluşturabileceğiniz anlamına gelir.
Aşağıdaki örnekte özel mülk, yalnızca <color>
değerini kabul edecek, devralmayacak ve hotpink
değerine sahip olacak şekilde tanımlanmıştır.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
kuralı artık Baseline Yeni Kullanıma Sunuldu kapsamındadır. Daha fazla bilgi için @property: Artık evrensel tarayıcı desteğine sahip yeni nesil CSS değişkenleri başlıklı makaleyi inceleyin.
Yeniden boyutlandırılabilir ArrayBuffer
ve genişletilebilir SharedArrayBuffer
Yeniden boyutlandırılabilen ArrayBuffer ve genişletilebilen SharedArrayBuffer artık Firefox 128'de destekleniyor. Bu sayede, yeni bir arabellek ayırıp içine veri kopyalamak zorunda kalmadan arabelleklerin boyutu değiştirilebiliyor. Bu mülkler, yeni kullanıma sunulan temel mülklere de katılır.
Flexbox özelliklerindeki safe
anahtar kelimesi
Safari 17.6, çoğunlukla mevcut özelliklerde yapılan düzeltmeleri içeren 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ışabilir olmasını sağlar.
Browser Support
safe
anahtar kelimesi, seçilen bir hizalamanın içeriğin görüntülenebilir alanın dışında gösterilmesine neden olmasını engeller. Aşağıdaki CodePen'de, bu özelliğin orta hizalanmış öğelerle nasıl çalıştığı gösterilmektedir. center
hizası veri kaybına neden olursa bunun yerine start
kullanılır.
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 herkese sunulmadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmenin tam zamanı. Yeni beta sürümler Firefox 129 ve Chrome 128'dir. Safari 18 beta sürümü hâlâ devam ediyor. Bu sürümler platforma birçok harika özellik getiriyor. Tüm ayrıntılar için sürüm notlarına göz atın. Aşağıda bunlardan birkaçını bulabilirsiniz.
Chrome 128, CSS ruby-align
özelliğini ve display: ruby
içeren öğelerde satır aralarını mümkün kılmak için yapılan değişiklikleri içerir. zoom
özelliği de spesifikasyonla eşleşecek şekilde güncellendi. AudioContext
API'sinde, AudiContext.onerror
'a atanan ve AudioContext oluşturma ve oluşturma hatalarını bildiren bir geri çağırma işlevi eklemek için bir güncelleme yapıldı.
Firefox 129, @starting-style
kuralını ve transition-behavior
mülkünü içerir. Bu özellikler, Firefox 129 kararlı sürüm olarak yayınlandıktan sonra Yeni Kullanıma Sunulan Temel Özellikler'in bir parçası olacak.