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.

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

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

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: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

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.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

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

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

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.