Haziran ayında web platformunda yeni kullanıma sunulanlar

Haziran 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

Haziran 2024'te Firefox 127 ve Chrome 126 kararlı sürüm olarak kullanıma sunuldu. Bu yayında, web platformuna eklenen yeni özellikler ele alınmaktadır.

Not: MDN'den alınan tarayıcı uyumluluğu verileri bu yayınlara dahil edilmiştir ve en son tarayıcı sürümleri için henüz güncellenmemiş olabilir. browser-compat-data sürümünde doğru bilgiler göründüğü anda yayında da doğru bilgiler gösterilir.

JavaScript Set yöntemleri

Kümeler, her programlama dilinde temel bir veri yapısıdır. Artık küme işlemleri yapmak için JavaScript'in yerleşik yöntemlerini kullanabilirsiniz. Aşağıdaki ayar yöntemleri artık Firefox 127'den itibaren kullanılabilir ve Yeni Kullanıma Sunulan Temel Özellikler'in bir parçası haline geldi:

• intersection()
• union()
• difference()
• symmetricDifference()
• isSubsetOf()
• isSupersetOf()
• isDisjointFrom()

Tarayıcı desteği

• 122
• 122
• 127
• 17

Kaynak

Daha fazla bilgi edinmek için JavaScript Set yöntemleri artık temel düzeyde başlıklı makaleyi inceleyin.

Async Clipboard API

Clipboard API artık Firefox 127'den itibaren tam olarak desteklenmektedir. Firefox artık ClipboardItem arayüzünün yanı sıra Clipboard arayüzünün read() ve write() yöntemlerini de destekliyor. Pano erişiminin engellemesini kaldırma başlıklı makalede Pano API hakkında daha fazla bilgi edinin.

Tarayıcı desteği

• 76
• 79
• 127
• 13.1

Kaynak

CSS gradyanlarda renk aralığı

CSS renk geçişleri, <color-interpolation-method> değerini kabul edecek şekilde belirtilir ve bu özellik artık Firefox'ta desteklenmektedir. Bu sayede, tüm büyük motorlarda birlikte çalışabilir hale gelir. Artık örneğin, hsl renk sistemini ve daha uzun bir enterpolasyonu kullanarak bir linear-gradient() belirtebilirsiniz.

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Tarayıcı desteği

• 111
• 111
• 127
• 16.2

Doküman arası görüntü geçişleri

Görüntüleme Geçişleri API'sini kullanmak için daha önce web sitenizi SPA olarak yeniden tasarlamanız gerekiyordu. Bu durum artık geçerli değil. Chrome 126'dan itibaren, görüntü geçişleri aynı kaynaktaki gezinme işlemleri için varsayılan olarak etkinleştirildi. Aynı kaynaktaki iki farklı doküman arasında görünüm geçişi oluşturabilirsiniz.

Belgeler arası görünüm geçişini etkinleştirmek için her iki tarafın da etkinleştirmesi gerekir. Bunu yapmak için @view-transition at-kuralını kullanın ve gezinme tanımlayıcısını auto olarak ayarlayın.

@view-transition {
  navigation: auto;
}

Tarayıcı desteği

• 126
• 126
• x
• 

Doküman arası görüntü geçişleri dokümanında daha fazla bilgi edinin.

Gamepad API trigger-rumble uzantısı

Chrome 126, uyumlu gamepad'ler için web'de trigger-rumble özelliğini göstermek üzere GamepadHapticActuator arayüzünü genişletir. Bu uzantı, Gamepad API'den yararlanan web uygulamalarının bu işlevle donatılmış gamepad cihazlarının tetikleyicilerini de titreştirmesine olanak tanı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 128, Chrome 127, Safari 18 ve Safari 17.6'dır. 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.

Safari 17.6, mevcut özelliklerde yapılan düzeltmeleri içeren bir sürümdür. Safari 18'de stil kapsayıcı sorguları, tek sayfalık uygulamalar için görüntü geçişi API'si ve flexbox özelliklerinde safe anahtar kelimesi desteği gibi birçok heyecan verici yeni özellik bulunuyor.

Chrome 127, font-size-adjust CSS özelliğini, oluşturulan içerikte alt metni rastgele sayıda öğe olarak belirtme özelliğini ve MediaMetaData'da bölüm bilgilerini tek tek ekleme özelliğini içerir.

Firefox 128, CSS Özellikleri ve Değerleri'ni içerdiğinden bu özellik, Temel Yeni Kullanılabilir olarak sınıflandırılmıştır. type tanımlamak ve CSS özel mülkleri için yedek değer ayarlamak üzere @property kullanın.