Ağustos 2024'te kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.
Kararlı tarayıcı sürümleri
Ağustos 2024'te Firefox 129 ve Chrome 128 kararlı sürüm oldu. Bu yayında, web platformuna eklenen yeni özellikler ele alınmaktadır.
Ruby biçimlendirmesinde yapılan güncellemeler
HTML <ruby>
öğesi, özellikle Doğu Asya dilleri için metin sunumunu iyileştirmeye yönelik güçlü bir araçtır. Bu öğe, temel metnin üstünde veya yanında fonetik ek açıklamaları ya da diğer ek bilgileri görüntülemenize olanak tanır. Chrome 128'den itibaren ruby notları satırlara bölünebilir ve ruby metinlerini ruby-align
CSS mülküyle biçimlendirebilirsiniz.
Satırda bölünebilir <ruby>
ve CSS ruby-align
mülkü hakkında daha fazla bilgi edinin.
Çoklu Kalemle Mürekkepleme için PointerEvent.deviceProperties
Chrome 128'de kullanıma sunulan bu değişiklik, ekranla etkileşime geçen kalemleri (işaretçileri) tek tek tanımlayarak sayısallaştırıcıyla etkileşime geçen her cihaz için belirli renkleri veya kalem şekillerini ayarlamanızı sağlar. PointerEvent
arayüzünü deviceProperties
adlı yeni bir özellik içerecek şekilde genişletir. Bu, sayfayla etkileşime geçen kalemleri tek tek tanımlamak için güvenilir bir şekilde kullanabileceğiniz, oturum boyunca kalıcı, belgeye özel, benzersiz bir tanımlayıcıyı temsil eden uniqueId
özelliğini içerir.
Promise.try
Chrome 128'de Promise.try
, Promise'lerle hataları daha kolay yönetmenizi sağlar. f
işleviniz olan bir kalıp var. Bu işlev, Promise döndürebilir veya döndürmeyebilir. Her iki durumda da hataları işlemek için Promise semantiğini kullanmak üzere işlevi bir Promise içine sararsınız. Bu işlem genellikle new Promise(resolve => resolve(f()))
ile yapılır.
Promise.try
, aynı işlemi yapmanın daha basit bir yoludur. Hem senkron hem de asenkron istisna akışlarını yönetmek zorunda kalmak yerine, .catch
işleyicilerindeki tüm hataları yakalayan bir Promise zinciri başlatmanıza olanak tanır.
Giriş efektlerine animasyon ekleme
Firefox 129, giriş efektlerini animasyonlu hale getirmek için kullanılan iki CSS özelliği içerir. Bu özellikler artık Temel Yeni Kullanılabilir olarak sunulmaktadır.
@starting-style
kuralı, bir öğe sayfa üzerinde oluşturulmadan önce öğenin ilk stillerini tanımlar. Bu, animasyonlu olarak görünen öğeler için gereklidir. Bu öğeler, animasyonlu olarak görünmek için bir duruma ihtiyaç duyar.
Giriş efektleri, ayrık özelliklerin (değerler arasında kesme işlemi yapılamayan özellikler) animasyonunu da gerektirir.
Bu işlem artık geçiş kısaltmanızda transition-behavior: allow-discrete
veya allow-discrete
değeriyle yapılabilir.
Bu özellik artık Firefox 129'da da desteklenmektedir.
Temel sürümde artık mevcut: Giriş efektlerini animasyonlu hâle getirme başlıklı makalede daha fazla bilgi edinin.
PerformanceResourceTiming
'e eklemeler
Firefox 129, PerformanceResourceTiming
arayüzünün contentType
ve responseStatus
özelliklerini ekler.
Bunlar sırasıyla, getirilen kaynağın içerik türünü ve kaynak getirilirken döndürülen HTTP yanıt durum kodunu gösterir.
contentType
responseStatus
Coğrafi konum toJSON()
yöntemleri
Firefox 129'da GeolocationCoordinates.toJSON()
ve GeolocationPosition.toJSON()
de vardır.
WebDriver BiDi
Firefox 129 artık WebDriver BiDi'yi destekliyor. Bu, otomasyonlar için Puppeteer'ı Chrome veya Firefox ile kullanabileceğiniz anlamına gelir. Daha fazla bilgi için WebDriver BiDi, Firefox, Chrome ve Puppeteer'da üretime hazır ve Firefox için Resmi Puppeteer Desteği Duyuruldu başlıklı makaleleri inceleyin.
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 130 ve Chrome 129'dur. 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.
Firefox 130, <details>
öğelerini gruplandıran <details>
öğesinin ad özelliğini destekler. Bu durumda, bir gruptaki yalnızca bir öğe aynı anda açık olabilir. Bu sayede, JavaScript kullanmadan özel bir akordeon oluşturabilirsiniz.
Chrome 129, CSS interpolate-size
mülkünü ve calc-size()
işlevini ekler.
CSS interpolate-size
mülkü, bir sayfanın auto
, min-content
ve fit-content
gibi CSS doğal boyutlandırma anahtar kelimelerinin animasyonlarını ve geçişlerini etkinleştirmesine olanak tanır (bu anahtar kelimeler animasyonlu olabilir).
CSS calc-size()
işlevi, calc()
'e benzer bir CSS işlevidir ancak tam olarak bir desteklenen boyutlandırma anahtar kelimesiyle ilgili işlemleri de destekler. Şu anda desteklenen boyutlandırma anahtar kelimeleri auto
, min-content
, max-content
ve fit-content
'dır.
Chrome 129'da ayrıca Intl.DurationFormat
işlevi de yer alır. Bu işlev, süreleri biçimlendirmek için bir yöntem sağlar (ör. "1 saat 40 dakika 30 saniye"). Bu yöntem, birden fazla yerel ayarı destekler.