Chrome 123'teki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Adım Adriana Jara. Chrome 123'te geliştiriciler için neler yeni olduğuna göz atalım.

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'si, ana iş parçacığı tıkanıklığının nedenlerini bulmanıza yardımcı olmak için kullanılabilir. Bu durum genellikle kötü INP'nin (Sonraki Boyamayla Etkileşim), yani web sitesinin yanıt verme hızını ölçen Core Web Vitals'dır.

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, engelleme işini ö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 bilgiler 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.

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

Ancak bir sayfa uzun süre sonra ilk kez yüklendiğinde ve kontrol eden hizmet çalışanı o anda çalışmıyorsa performans maliyeti olabilir. Tüm getirme işlemlerinin Service Worker üzerinden gerçekleşmesi gerektiğinden tarayıcının, hangi içeriğin yükleneceğini öğrenmek için Service Worker'ın başlaması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 gezindiği yere göre özelleştirilmiş sayfalar sunabilirsiniz.

  • Chrome artık Zstandard (zstd) için destek sunmaktadır. 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.

  • Bfcache için notRestoredReasons API, Chrome 123'ten kullanıma sunuluyor. Bu, site sahiplerinin bfcache'ın neden kullanılamadığına dair nedenleri alanında toplamasına olanak tanır. Site sahipleri, geçmişte daha hızlı gezinmeye olanak tanıyan 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.