Mart ayında web platformunda yeni kullanıma sunulanlar

Mart 2024'te kararlı ve beta web tarayıcılarında kullanıma sunulan bazı ilginç özellikleri keşfedin.

Rachel Andrew

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ı uyarlama

Chrome 123'te kullanıma sunulan light-dark() renk işlevi, renk şemalarını kullanıcı tercihine göre uyarlamayı kolaylaştırır. Aşağıdaki örnekte color-scheme, root tarihinde light dark olarak ayarlanmıştır. Özel özellikler, kullanıcının açık veya koyu mod tercihine göre 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);
}

Daha fazla örnek ve ayrıntı için light-dark() ile CSS color-scheme bağımlı renkleri başlıklı makaleyi inceleyin.

Tarayıcı desteği

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Kaynak

field-sizing ile girişleri daha iyi kontrol etme

Chrome 123'te field-sizing mülkünün bir diğer işlevi de otomatik olarak büyüyen metin giriş alanlarını etkinleştirmektir.

Tarayıcı Desteği

  • Chrome: 123.
  • Edge: 123.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

text-spacing-trim ile CJK noktalama işaretleri için kerning

Chrome 123'te text-spacing-trim mülkü, aşırı boşlukları ayarlamak için Çince, Japonca ve Korece (CJK) noktalama işareti karakterlerine kerning uygular. CSS için dört yeni uluslararası özellik kullanıma sunuluyor başlıklı makalede daha fazla bilgi edinebilirsiniz.

Tarayıcı desteği

  • Chrome: 123.
  • Edge: 123.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

@scope kuralında CSS

Safari 17.4, belirli DOM alt ağaçlarındaki öğeleri seçmenize olanak tanıyan @scope özelliğini içerir. Bu özellik sayesinde, geçersiz kalması zor olan aşırı spesifik seçiciler yazmadan ve seçicilerinizi DOM yapısına çok sıkı bir şekilde bağlamadan öğeleri hassas bir şekilde hedefleyebilirsiniz.

CSS @scope at-kuralı ile seçicilerinizin erişimini sınırlama başlıklı makalede daha fazla bilgi edinin.

Tarayıcı desteği

  • Chrome: 118.
  • Edge: 118.
  • Firefox: İşaretli.
  • Safari: 17.4.

Kaynak

Pencere içinde pencere iyileştirmeleri

Chrome 123, pencere içinde pencere deneyimlerini iyileştirmeye yönelik iki özellik içerir. Bunlardan ilki CSS picture-in-picture görüntüleme modudur. Bu sayede, yalnızca web uygulaması (veya bir kısmı) pencere içinde pencere modunda gösterildiğinde uygulanacak belirli CSS kuralları yazabilirsiniz.

İkinci özellik, belge pencere içinde pencere penceresinden opener.focus simgesini kullanarak sistem düzeyinde odağı, belge pencere içinde pencere penceresinin sahibi olan sekmeye getirmenize olanak tanır.

Bu şekilde, gerektiğinde orijinal sekmeyi tekrar ön plana getirebilirsiniz. Örneğin, kullanıcının daha küçük resim içinde resim penceresine sığmayan bir kullanıcı arayüzü deneyimine erişmesi gerektiğinde.

Blok ve tablo düzeninde align-content desteği

Chrome 123 ve Safari 17.4, blok ve tablo düzeninde align-content için destek içerir. align-content desteğindeki değişiklik hakkında bilgi edinin.

Service Worker Statik Yönlendirme API'si

Service Worker Statik Yönlendirme API'si, Chrome 123'ten itibaren kullanılabilir. Bu API, belirli kaynak yollarının nasıl getirileceğini açık bir şekilde belirtmenize olanak tanır. Diğer bir deyişle, tarayıcının yalnızca bir önbellekten veya doğrudan ağdan yanıt almak için bir hizmet çalışanı çalıştırması gerekmez.

Belirli yollar için hizmet çalışanını atlamak üzere Service Worker Static Routing API'yi kullanma başlıklı makalede daha fazla bilgi edinin.

Uzun Animasyon Çerçeveleri API'sı

Chrome 123, yavaş kullanıcı arayüzü (UI) güncellemelerini daha iyi anlamak için Long Tasks API'de yapılan bir güncelleme olan Long Animation Frames API'yi de içerir. Bu, duyarlılığı ölçen Interaction to Next Paint (INP) Core Web Vital metriğini etkileme olasılığı olan yavaş animasyon karelerini veya akıcılığı etkileyen diğer kullanıcı arayüzü takılmalarını belirlemek için yararlı olabilir.

Tarayıcı Desteği

  • Chrome: 123.
  • Edge: 123.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

content-visibility mülkü

Firefox 124, CSS content-visibility mülkünü destekler. Bu özellik, bir öğenin içeriği oluşturup oluşturmayacağını kontrol eder. Böylece, ihtiyaç duyulana kadar tarayıcılar içeriği oluşturmayı atlayabilir.

Tarayıcı desteği

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Kaynak

ArrayBuffer ve dizi gruplandırmasına eklemeler

Safari 17.4'te JavaScript, detached mülkü ve ArrayBuffer'ın transfer() ve transferToFixedLength() yöntemleri için destek içeren bazı yeni özellikler kazandı.

Tarayıcı Desteği

  • Chrome: 114.
  • Kenar: 114.
  • Firefox: 122.
  • Safari: 17.4.

Kaynak

Safari 17.4, Object.groupBy ve Map.groupBy dizi gruplandırma yöntemlerini de içerir. Dizi gruplandırma hakkında daha fazla bilgi edinmek için JavaScript'e dizi gruplandırma yöntemleri eklendi başlıklı makaleyi okuyun.

Tarayıcı Desteği

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4

Kaynak

Bu özellikler artık birlikte çalışabilir durumda olduğundan Baseline Yeni Kullanıma Sunuldu'ya eklendi.

setHTMLUnsafe ve parseHTMLUnsafe

Safari 17.4'te kullanıma sunulan setHTMLUnsafe ve parseHTMLUnsafe yöntemleri, JavaScript'ten açıklayıcı gölge DOM'un 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ırmanın daha kolay bir yolunu da sunar.

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, sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini, herkese sunulmadan önce test etmenin tam zamanı. Yeni beta sürümler 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. Aşağıda bunlardan birkaçını bulabilirsiniz.

Firefox 125 heyecan verici bir sürüm olacak gibi görünüyor. Bloklarda align-content bulunur ve bu özellik birlikte çalışabilir hale gelir. Popover API de bu kapsamda yer aldığından Yeni Kullanıma Sunulan Temel API'nin bir parçası haline geldi. transition-behavior özelliği de desteklenir. Popover ve transition-behavior, Interop 2024'ün bir parçasıdır.

Chrome 124, Bildirim Temelli Gölge DOM'nin JavaScript'ten kullanılmasına izin vermek için setHTMLUnsafe ve parseHTMLUnsafe yöntemlerini içerir. Böylece bu özellikler birlikte çalışabilir. WebSocketStream API ve writingsuggestions özelliği de buna dahildir.