Mayıs 2024'te kararlı ve beta web tarayıcılarında kullanıma sunulan 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ı hâle geldi. Bu yayında, web platformuna eklenen yeni özellikler ele alınmaktadır.
CSS bağlayıcı konumlandırması
Chrome 125, CSS sabit konumlandırması içerir. Bu, mutlak konumlandırılmış bir öğeyi JavaScript kullanmadan bildirimli bir şekilde sayfadaki bir veya daha fazla öğeye (bağlayıcılar) bağlamanıza olanak tanır. Çapa konumlandırması, çapalar kaydırılabilir olduğunda etkili bir şekilde çalışır. Yaygın bir kullanım durumu, öğeyi çağıran öğenin yanına ipucu gibi bir pop-up veya bir seçme menüsü ve bu öğenin pop-up seçenekleri listesi gibi bir pop-up yerleştirmektir.
CSS sabit konumlandırma API'si ile tanışın bölümünden daha fazla bilgi edinebilirsiniz.
CSS adımlı değer işlevleri: round(), mod() ve rem()
Chrome 125, basamaklı değer işlevlerini de içerdiği için bu işlevlerin artık Temel Yeni Kullanılabilir özellikte olduğu anlamına gelir. Basamaklı değer işlevlerinin (round(), mod() ve rem()) tümü belirli bir değeri başka bir "adım değerine" göre dönüştürür.
CSS basamaklı değer matematik işlevleri artık Baseline 2024'te daha fazla bilgiye ulaşabilirsiniz.
light-dark() işlevi
Ayrıca, Safari 17.5'te bulunan Baseline Newly available (Yeni Kullanılabilir) CSS renk işlevi de light-dark() ile birlikte kullanılır.
light-dark(), her ikisi de <color> olması gereken iki bağımsız değişkeni kabul eden bir işlevdir. Kullanılan renk şemasına bağlı olarak her ikisinden biri seçilir.
- Kullanılan renk şeması
lightise veya bilinmiyorsa ilk değerin hesaplanan değeri döndürülür. - Kullanılan renk şeması
darkise ikinci rengin hesaplanan değeri döndürülür.
Daha fazla bilgi için light-dark() ile CSS renk şemasına bağlı renkler konusuna bakın.
Ekran Uyandırma Kilidi API'si
Firefox 126'da Ekran Uyandırma Kilidi API'si kullanıma sunuldu. Bu API, artık Yeni Kullanılabilir Temel Değer'de yer alan başka bir özelliktir. Bu API, cihazın kararmasını ve ekranı kilitlemesini önlemek için bir yol sağlar.
Bu özelliği nasıl kullanacağınızı Ekran Uyandırma Kilidi API'si ile uyanık kalma başlıklı makaleden öğrenebilirsiniz.
Compute Pressure API
Compute Pressure API, sistemdeki CPU yükünü temsil eden üst düzey durumlar sunar. Bu sayede uygulama, doğru temel donanım metriklerinin kullanılmasını sağlar. Böylece kullanıcılar, sistem yönetilemez düzeyde stres altında olmadığı sürece, kendilerine sunulan tüm işlem gücünden yararlanabilir.
Bu özellik Chrome 125 sürümünde sunulmaktadır. Intel, video konferans uygulamalarının özellikleri ve performansı dinamik olarak dengelemesini sağlayan bu API'nin tasarım ve uygulama çalışmalarına öncülük etti.
Compute Pressure API ile ilgili belgeleri okuyun.
@starting-style kuralı
Safari 17.5, @starting-style kuralını içerir. Bu CSS kuyruklu a kuralı, öğe sayfada açılmadan önce tarayıcının bakabileceği bir stili (giriş animasyonları için gerektiği gibi) uygulayabilmenizi sağlar.
@starting-style kuralı, düzgün giriş ve çıkış animasyonları için dört yeni CSS özelliği kapsamındaki özelliklerden biridir.
Beta tarayıcı sürümleri
Beta tarayıcı sürümleri, tarayıcının sonraki kararlı sürümünde olacak öğelerin önizlemesini sunar. Dünya bu sürümü almadan ö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. Bazı önemli noktaları aşağıda bulabilirsiniz.
Chrome 126, aynı kaynak gezinmeleri için dokümanlar arası görünüm geçişleri içerir. Daha önce View Transitions API'yi kullanmak için web sitenizi bir SPA olarak yeniden tasarlamanız gerekiyordu. Bu durum artık geçerli değil. Görünüm geçişleri, artık aynı kaynaktan yapılan gezinmeler için varsayılan olarak etkindir. Aynı kaynağa sahip iki farklı doküman arasında bir görünüm geçişi oluşturabilirsiniz.
Firefox 127, ek JavaScript Kümesi yöntemleri içerir: intersection(), union(), difference(),symmetricDifference(), isSubsetOf(), isSupersetOf() ve isDisjointFrom().