Temmuz ayında web platformundaki yenilikler

Temmuz 2024'te kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.

Rachel Andrew

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 rengin doygunluğunu yarıya indiriyor.

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

CSS göreli renk söz dizimi blog yayınında daha birçok örnek bulabilirsiniz. Göreli renk söz dizimi, Interop 2024'te en çok odaklanılan alanlardan biridir. Bu nedenle, bu güncelleme kararlı Firefox'un puanının iyileştirilmesine 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.

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'de, Interop 2024'ün odak noktası olan font-size-adjust bulunur. 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ırma araçları varsayılan olarak tıklamaya odaklanılabilir ve programlı şekilde odaklanılabilir. 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 sayede söz dizimi, devralma ve ilk değeri tanımlayan CSS özel özellikleri oluşturabilirsiniz.

Aşağıdaki örnekte özel mülk yalnızca <color> değerini kabul edecek, devralmayacak ve başlangıç değeri hotpink 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 büyütülebilir SharedArrayBuffer

Yeniden boyutlandırılabilir ArrayBuffer ve büyütülebilir SharedArrayBuffer'ın da artık Firefox 128'de desteklenmesi sayesinde arabellek boyutu, yeni bir arabellek ayırmak ve verileri buraya kopyalamak zorunda kalmadan değiştirilmektedir. 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 özelliklerle ilgili düzeltmeler içeren bir sürümdür, ancak aynı zamanda 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.

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 sonraki kararlı sürümünde kullanılan özelliklerin önizlemesini sunar. Bu, sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini, herkese sunulmadan önce 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 özelliğini 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.