Chrome 123'teki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Adım Adriana Jara. Chrome 123'teki geliştiricilere yönelik yenilikleri inceleyelim.

light-dark() CSS işlevini kullanmanız gerekir.

CSS'deki light-dark() işlevi, kullanıcı tercihine göre açık veya koyu modu uyarlayan renkler oluşturmanıza olanak tanır. Tek bir CSS mülkünde iki farklı renk değeri belirtmek için light-dark() işlevini kullanın.

Tarayıcı, öğenin hesaplanmış 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ı limon sarısı olur.
  • Kullanıcı koyu tema seçtiyse öğenin arka planı yeşil olur.

Long Animation Frames API.

Long Animation Frames API, genellikle web sitesinin duyarlılığını ölçen bir Core Web Vital olan INP'nin (Interaction to Next Paint) kötü olmasının nedeni olan ana iş parçacığı tıkanıklığının nedenlerini bulmanıza yardımcı olur.

Yeni API, yavaş kullanıcı arayüzü güncellemelerini daha iyi anlamanızı sağlayan Uzun Görevler API'sinin gelişmiş bir sürümüdür. Long Animation Frames API, engelleyen çalışmaları ölçmenize olanak tanır. Görevleri aşağıdaki oluşturma güncellemesiyle birlikte ölçer ve uzun süre çalışan komut dosyaları, oluşturma süresi ve zorunlu düzen ve stilde harcanan süre (düzen karmaşası olarak bilinir) gibi bilgileri ekler.

Bu bilgileri toplayıp analiz etmek, performans darboğazlarını tespit etmenize ve gidermenize olanak tanır. Aşağıdaki kodla 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.

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

Ancak bir sayfa bir süredir ilk kez yüklendiğinde ve kontrol eden hizmet çalışanı o anda çalışmıyorsa performans maliyeti olabilir. Tüm getirme işlemlerinin hizmet çalışanı üzerinden yapılması gerektiğinden, tarayıcının hangi içeriğin yükleneceğini bilmesi 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ı belirtebilirsiniz. Kontrol edilen bir URL daha sonra yüklendiğinde tarayıcı, hizmet çalışanı başlamadan önce bu yollardan kaynak getirmeye başlayabilir. Bu işlem, hizmet işçisine ihtiyaç duymadığınızı bildiğiniz URL'lerden hizmet işçisini kaldırır.

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

Diğer özellikler

Elbette daha birçok özellik var.

  • NavigationActivation arayüzüyle kullanıcının nereden gezindiğine göre özelleştirilmiş sayfalar sunabilirsiniz.

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

  • Chrome 123'ten itibaren bfcache için notRestoredReasons API kullanıma sunulmaktadır. Bu sayede site sahipleri, bfcache'in neden kullanılamadığını ilgili alanda toplayabilir. Site sahipleri, geçmişte daha hızlı gezinme olanağı sağlayan bfcache'in kullanımını iyileştirmek için bu özelliği kullanabilir.

  • display-mode için picture-in-picture değeri, yalnızca web uygulaması resim içinde resim 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, yalnızca bazı önemli noktaları kapsar. Chrome 123'teki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Adriana Jara. Chrome 124 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.