Mayıs 2024'te kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.
Kararlı tarayıcı sürümleri
Mayıs 2024'te Firefox 126, Safari 17.5 ve Chrome 125 kararlı sürüm olarak kullanıma sunuldu. Bu yayında, web platformuna eklenen yeni özellikler ele alınmaktadır.
CSS bağlantı metni yerleşimi
Chrome 125, CSS ankraj konumlandırmasını içerir. Bu sayede, JavaScript kullanmadan, mutlak konumlandırılmış bir öğeyi sayfadaki bir veya daha fazla öğeye (sabitleyiciler) açıklayıcı bir şekilde bağlayabilirsiniz. Yer işaretleri kaydırılabilir olduğunda yer işareti konumlandırması etkili bir şekilde çalışır. İpucu gibi bir pop-up'ı, tetikleyen öğenin veya seçili bir menünün ve pop-up seçenekleri listesinin yanına yerleştirmek yaygın bir kullanım alanıdır.
CSS anchor positioning API'yi tanıtıyoruz başlıklı makalede daha fazla bilgi edinebilirsiniz.
CSS kademeli değer işlevleri: round()
, mod()
ve rem()
mod()
ve rem()
Chrome 125, basamaklı değer işlevlerini de içerir. Bu, bu işlevlerin artık Temel Yeni Kullanıma Sunuldu olarak sınıflandırıldığı anlamına gelir. round()
, mod()
ve rem()
kademeli değer işlevlerinin tümü, belirli bir değeri başka bir "kademeli değere" göre dönüştürür.
CSS kademeli değer matematik işlevleri artık Baseline 2024'te başlıklı makalede daha fazla bilgi edinin.
light-dark()
işlevi
Temel Yeni Kullanıma Sunulanlar listesine Safari 17.5'te bulunan CSS renk işlevi light-dark()
de eklendi.
light-dark()
, iki bağımsız değişkeni kabul eden bir işlevdir. Bu bağımsız değişkenlerin her ikisi de <color>
olmalıdır. Kullanılan renk şemasına bağlı olarak bunlardan biri seçilir.
- Kullanılan renk şeması
light
veya bilinmiyorsa ilk değerin hesaplanmış değeri döndürülür. - Kullanılan renk şeması
dark
ise ikinci rengin hesaplanmış değeri döndürülür.
Daha fazla bilgi için light-dark() ile CSS renk şemasına bağlı renkler başlıklı makaleyi inceleyin.
Screen Wake Lock API
Firefox 126'da, artık Baseline Yeni Kullanıma Sunuldu'nun bir parçası olan Screen Wake Lock API de kullanıma sunuluyor. Bu API, cihazın ekranı karartmasını ve kilitlemesini önlemenin bir yolunu sağlar.
Bu özelliği nasıl kullanacağınızı Screen Wake Lock API ile uyanık kalma başlıklı makalede bulabilirsiniz.
Compute Pressure API
Compute Pressure API, sistemdeki CPU yükünü temsil eden üst düzey durumlar sunar. Sistem yönetilemez bir stres altında olmadığı sürece kullanıcıların kullanabilecekleri tüm işleme gücünden yararlanabilmelerini sağlamak için uygulamanın doğru temel donanım metriklerini kullanmasına olanak tanır.
Bu özellik Chrome 125 sürümündedir. Intel, video konferans uygulamalarının özellikleri ve performansı dinamik olarak dengelemesine olanak tanıyacak bu API'nin tasarım ve uygulama çalışmalarına liderlik etti.
Compute Pressure API ile ilgili dokümanları okuyun.
@starting-style
kuralı
Safari 17.5, @starting-style
kuralını içerir. Bu CSS at-kuralı, giriş animasyonları için gerektiğinde tarayıcının öğe sayfa üzerinde açılmadan önce bakabileceği bir stil uygulamanıza olanak tanır.
@starting-style
kuralı, Sorunsuz giriş ve çıkış animasyonları için dört yeni CSS özelliği başlıklı makalede ele alınan özelliklerden biridir.
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 127 ve Chrome 126'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.
Chrome 126, aynı kaynaktaki gezinmeler için doküman içi görünüm geçişleri içerir. 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. Görüntüleme geçişleri artık aynı kaynaktaki gezinmeler için varsayılan olarak etkindir. Aynı kaynaktaki iki farklı doküman arasında görünüm geçişi oluşturabilirsiniz.
Firefox 127, intersection()
, union()
, difference()
,symmetricDifference()
, isSubsetOf()
, isSupersetOf()
ve isDisjointFrom()
olmak üzere ek JavaScript Set yöntemleri içerir.