Chrome 123'teki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Şimdi, Chrome 123'te geliştiriciler için sunulan yeniliklere göz atalım.

light-dark() CSS işlevi.

CSS'deki light-dark() işlevi, kullanıcının açık veya koyu mod tercihine uygun renkler oluşturmanıza olanak tanır. Tek bir CSS mülkü iç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çerse öğenin arka planı limon rengi olur.
  • Kullanıcı koyu bir tema seçerse öğenin arka planı yeşil olur.

Long Animation Frames API (Uzun Animasyon Çerçeveleri API'si).

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, Long Tasks API'nin gelişmiş bir sürümüdür. Yavaş kullanıcı arayüzü güncellemelerinin daha iyi anlaşılmasını sağlar. 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ı, ve düzen sıkıştırma olarak bilinen, zorlanmış düzen ve stilde harcanan süre.

Bu bilgileri toplayıp analiz ederek performans sorunlarını tespit edip giderebilirsiniz. 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 });

Service Worker 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.

Bununla birlikte, bir sayfa bir süredir ilk kez yüklendiğinde ve kontrol hizmeti çalışanı o anda çalışmadığında 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 Statik Yönlendirme API'si ile yükleme sırasında her zaman ağdan sunulacak yolları bildirebilirsiniz. Kontrollü bir URL daha sonra yüklendiğinde tarayıcı, hizmet çalışanı başlatma işlemini tamamlamadan önce bu yollardan kaynak getirmeye başlayabilir. Bu işlem sonucunda hizmet çalışanı, hizmet çalışanına ihtiyacı olmadığını bildiğiniz URL'lerden kaldırılır.

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

Diğer özellikler

Tabii ki çok daha fazlası var.

  • Kullanıcının NavigationActivation arayüzüyle nereden gezindiğine bağlı olarak özelleştirilmiş sayfalar sunabilirsiniz.

  • Chrome artık Zstandard (zstd) standardını destekliyor. Bu Content-Encoding, sayfaların daha hızlı yüklenmesine, daha az bant genişliği kullanılmasına ve sunucularda daha az zaman, CPU ve güç harcanmasına yardımcı olarak sunucu maliyetlerinde düşüş sağlar.

  • 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 bunu kullanarak geçmişe yönelik daha hızlı gezinmeyi sağlayan bfcache kullanımını iyileştirebilirler.

  • display-mode için picture-in-picture değeri, yalnızca web uygulaması pencere içinde pencere modunda gösterildiğinde geçerli olacak 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 yer alıyor. Aşağıdaki bağlantıları kontrol edin: Chrome 123'teki ek değişiklikler.

Abone ol

Gelişmelerden haberdar olmak için şu yayına abone olun: Chrome Developers YouTube kanalı Yeni bir video yayınladığımızda size e-posta bildirimi göndereceğiz.

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