Chrome 123'teki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Chrome 123'ün geliştiricilere yönelik yenilikleri inceleyelim.

light-dark() CSS işlevi.

CSS'deki light-dark() işlevi, kullanıcının açık veya koyu mod tercihine uyan renkler oluşturmanıza olanak tanır. Tek bir CSS özelliğinde iki farklı renk değeri belirtmek için light-dark() işlevini kullanın.

Tarayıcı, öğenin hesaplanan color-scheme değerine göre uygun rengi otomatik olarak seçer. Örneğin, aşağıdaki CSS ile:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • Kullanıcı açık bir tema seçtiyse öğenin arka planı küf yeşili olur.
  • Kullanıcı koyu bir tema seçtiyse öğenin arka planı yeşil olur.

Uzun Animasyon Çerçeveleri API'si.

Uzun Animasyon Çerçeveleri API'si, ana iş parçacığı tıkanıklığının nedenlerini bulmanıza yardımcı olmak için kullanılabilir. Bu genellikle kötü INP'nin (Sonraki Boyamayla Etkileşim) nedenidir. Bu, bir web sitesinin yanıt verme düzeyini ölçen Core Web Vital'dir.

Yeni API, Uzun Görevler API'sinin geliştirilmiş bir sürümüdür. Bu sürüm, yavaş kullanıcı arayüzü güncellemelerinin daha iyi anlaşılmasını sağlar. Uzun Animasyon Çerçeveleri API'si, engelleme çalışmalarını ölçmenizi sağlar. Görevleri, aşağıdaki oluşturma güncellemesiyle birlikte ölçer ve uzun çalışan komut dosyaları, oluşturma süresi, zorunlu düzen ve stilde harcanan süre gibi bilgileri ekler. Bu durum, düzeni bozma olarak bilinir.

Bu bilgileri toplayıp analiz etmek, performans sorunlarını tespit edip gidermenize olanak tanır. Aşağıdaki kodu kullanarak uzun kareler yakalayabilirsiniz.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Hizmet çalışanı Statik Yönlendirme API'si.

Service Worker'ları kullanarak web sitelerinin çevrimdışı çalışmasını sağlayabilir ve performansı artırabilecek önbelleğe alma stratejileri oluşturabilirsiniz.

Ancak sayfa bir süre ilk kez yüklenirken ve hizmet çalışanı o anda çalışmadığında performans maliyeti olabilir. Tüm getirme işlemlerinin Service Worker üzerinden yapılması gerektiğinden, tarayıcının hangi içeriğin yükleneceğini öğrenmek için hizmet çalışanının başlatılmasını ve çalışmasını beklemesi gerekir.

Service Worker Static Routing API ile yükleme sırasında, her zaman ağdan yayınlanacak yolları bildirebilirsiniz. Kontrollü bir URL daha sonra yüklendiğinde, hizmet çalışanı işi tamamlamadan önce tarayıcı bu yollardan kaynakları getirmeye başlayabilir. Bu işlem Service Worker'ı, Service Worker'a ihtiyacı olmadığını bildiğiniz URL'lerden kaldırır.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

Diğer ölçütler

Elbette dahası var.

  • Kullanıcının NavigationActivation arayüzünü kullanarak nereye gittiğine bağlı olarak özelleştirilmiş sayfalar sunabilirsiniz.

  • Chrome artık Zstandard (zstd) için destek sunuyor. Bu Content-Encoding, sayfaların daha hızlı yüklenmesine, daha az bant genişliği kullanmasına, sunucularda daha az zaman ve CPU ile sıkıştırma gücü harcanmasına yardımcı olarak sunucu maliyetlerini azaltır.

  • Bfcache için notRestoredReasons API, Chrome 123 sürümünden kullanıma sunulmaktadır. Bu, site sahiplerinin bfcache kullanılamamasının nedenlerini ilgili alanda toplayabilmelerini sağlar. Site sahipleri bu özelliği, geçmişte gezinmeyi hızlandıran bfcache kullanımını iyileştirmek amacıyla kullanabilir.

  • display-mode için picture-in-picture değeri, yalnızca web uygulaması pencere içinde pencere modunda gösterildiğinde geçerli olan belirli CSS kuralları yazmanıza olanak tanır. Örneğin:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 123'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Merhaba Adriana Jara, Chrome 124 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.