Mart 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
Mart 2024'te Firefox 124, Safari 17.4 ve Chrome 123 kararlı hale geldi. Bu yayında, web platformuna eklenen yeni özellikler ele alınmaktadır.
light-dark() ile renk şemalarını uyarlayın
light-dark() renk işlevi Chrome 123'te kullanıma sunulmuştur ve renk şemalarını kullanıcı tercihine uyarlamayı kolaylaştırır.
Aşağıdaki örnekte color-scheme, root üzerinde light dark olarak ayarlanmıştır.
Özel özellikler, kullanıcının açık veya koyu mod tercihine bağlı olarak
aralarında geçiş yapılacak renkleri ayarlamak için light-dark() renk işlevini kullanır.
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
light-dark() ile CSS color-scheme'ye bağlı renkler bölümünde daha fazla örnek ve ayrıntı bulabilirsiniz
field-sizing ile girişleri daha iyi kontrol edin
Ayrıca Chrome 123'te field-sizing özelliği, otomatik olarak büyüyen metin giriş alanlarını etkinleştirir.
Tarayıcı Desteği
- 123
- x
- x
- x
text-spacing-trim ile CJK noktalama işareti için sıralama ölçütü
Chrome 123'te text-spacing-trim özelliği, fazla boşlukları düzenlemek için Çince, Japonca ve Korece (CJK) noktalama işaretlerine aralık uygular.
CSS için dört yeni uluslararası özellikle tanışın bölümünden daha fazla bilgi edinebilirsiniz.
Tarayıcı Desteği
- 123
- x
- x
- x
@scope CSS kull.
Safari 17.4'te, belirli DOM alt ağaçlarındaki öğeleri seçebilmenizi sağlayan @scope özelliği bulunur. Bu sayede, geçersiz kılması zor olan aşırı spesifik seçiciler yazmadan ve seçicilerinizi DOM yapısıyla çok sıkı bir şekilde birleştirmeden öğeleri hassas bir şekilde hedefleyebilirsiniz.
Seçicilerinizin erişimini kuraldaki CSS @scope ile sınırlama bölümünden daha fazla bilgi edinebilirsiniz.
Pencere içinde pencere iyileştirmeleri
Chrome 123, pencere içinde pencere deneyimini iyileştirmek için iki özellik içerir.
Birincisi, CSS picture-in-picture
görüntüleme modudur.
Bu, yalnızca web uygulaması pencere içinde pencere modunda gösterildiğinde (bir kısmı) uygulanan belirli CSS kuralları yazmanıza olanak tanır.
İkinci özellik, belge pencere içinde pencere penceresinden opener.focus kullanarak sistem düzeyindeki odağı dokümanın pencere içinde pencere penceresinin bulunduğu sekmeye getirmenizi sağlar.
Böylece, gerektiğinde orijinal sekmeyi tekrar ön plana getirebilirsiniz. Kullanıcının küçük pencere içinde pencere penceresine sığmayan bir kullanıcı arayüzü deneyimine erişmesi gerektiğinde buna örnek gösterilebilir.
Blok ve tablo düzeninde align-content desteği
Chrome 123 ve Safari 17.4, blok ve tablo düzeninde align-content desteği içerir. align-content desteğiyle ilgili değişiklik hakkında bilgi edinin.
Hizmet Çalışanı Statik Yönlendirme API'si
Chrome 123'ten itibaren Service Worker Static Yönlendirme API'si kullanılabilir. Bu API, belirli kaynak yollarının nasıl getirilmesi gerektiğini bildirimli olarak belirtmenize olanak tanır. Diğer bir deyişle, tarayıcının yalnızca yanıtları bir önbellekten veya doğrudan ağdan almak için Service Worker çalıştırması gerekmez.
Uzun Animasyon Çerçeveleri API'sı
Chrome 123, yavaş kullanıcı arayüzü (UI) güncellemelerinin daha iyi anlaşılmasını sağlamak için Long Tasks API'de yapılan bir güncelleme olan Uzun Animasyon Çerçeveleri API'sini de içeriyor. Bu, duyarlılığı ölçen Sonraki Boyamayla Etkileşim (INP) Core Web Vital metriğini etkilemesi muhtemel yavaş animasyon karelerinin tanımlanmasında veya pürüzsüzlüğü etkileyen diğer kullanıcı arayüzü duraklamasının tanımlanmasında faydalı olabilir.
Tarayıcı Desteği
- 123
- x
- x
- x
content-visibility özelliği
Firefox 124, CSS content-visibility özelliğini destekler.
Bu özellik, bir öğenin içeriğini oluşturup oluşturmadığını kontrol ederek tarayıcıların gerekli olana kadar içeriği oluşturmayı atlamasına izin verir.
ArrayBuffer ve dizi gruplandırmasına yapılan eklemeler
Safari 17.4 JavaScript'te, detached özelliğinin yanı sıra ArrayBuffer için transfer() ve transferToFixedLength() yöntemlerini destekleyen bazı yeni özellikler edinilir.
Safari 17.4, Object.groupBy ve Map.groupBy dizi gruplandırma yöntemlerini de içerir. Dizi gruplaması hakkında daha fazla bilgi edinmek için JavaScript, dizi gruplandırma yöntemlerini alıyor bölümünü okuyun.
Bu özellikler artık birlikte çalışabilir ve dolayısıyla "Yeni Kullanılabilir" Temel Değer'e katılır.
setHTMLUnsafe ve parseHTMLUnsafe
Safari 17.4'teki setHTMLUnsafe ve parseHTMLUnsafe yöntemleri, Bildirimsel Gölge DOM'un JavaScript'ten kullanılmasına olanak tanır.
Bu yöntemler, innerHTML veya DOMParser ile karşılaştırıldığında HTML'yi zorunlu olarak DOM'ye ayrıştırmak için de daha kolay bir yol sunar.
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 betalar Firefox 125 ve Chrome 124'tü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.
Firefox 125 heyecan verici bir sürüm olacak.
Bloklar üzerinde align-content içermesi nedeniyle bu özellik birlikte çalışabilir.
Popover API de bu listeye dahildir ve böylece Baseline Newly available'ın bir parçası haline gelir. transition-behavior özelliği de desteklenir.
Popover ve transition-behavior, Interop 2024'ün bir parçasıdır.
Chrome 124, Bildirimli Gölge DOM'un JavaScript'ten kullanılmasına izin veren setHTMLUnsafe ve parseHTMLUnsafe yöntemlerini içerdiğinden, bu özellikler birlikte çalışabilir hale gelir. WebSocketStream API ve writingsuggestions özelliği de dahildir.