Chrome 129'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

• Performansı artırmak için uzun görevlerde verimliliği artırabilirsiniz.
• İçsel boyutlara sahip öğeleri animasyon haline getirin.
• Yer işareti konumlandırma söz diziminde bazı değişiklikler yapıldı.
• Bunun gibi çok daha fazla özellik var.

Adım Pete LePage. Chrome 129'daki geliştiricilere yönelik yenilikleri inceleyelim.

scheduler.yield() ile uzun görevleri bölme

Uzun görevler, tarayıcının kullanıcı girişine yanıt verme özelliğini geciktirir. Bu da sitenin yavaş olduğu algısını oluşturur ve INP gibi kritik performans metriklerini etkiler. scheduler.yield() ile uzun görevleri daha küçük parçalara bölebilir ve açıkça ana iş parçacığına geri dönerek yanıt verme süresini artırabilirsiniz.

Tarayıcıya şunları söylemenizi sağlar:

"HEY! Şu an yapacağım iş biraz zaman alabilir. Bir çerçeve boyamak, kullanıcı girişine yanıt vermek veya başka önemli görevleriniz varsa sorun değil. Bekleyebilirim."

Tarayıcıya nefes alma alanı tanımak ve INP sorunlarını önlemek için aşağıdaki satırı JavaScript kodunuza sık sık ekleyin.

await scheduler.yield();

Daha da önemlisi, yield yaparak kaybetmemeniz için kodunuzun devam etmesine öncelik verilmesini sağlar. Daha büyük iş parçaları arasında scheduler.yield() öğesinin, işlevlerde serbestçe kullanılmasını öneririz.

Daha fazla bilgi için Uzun görevleri optimize etme başlıklı makaleyi inceleyin.

Yerleşik boyutları olan animasyonlar

CSS animasyonları oldukça hoştur ancak genellikle açık boyutlar gerektirir. auto, min-content veya fit-content gibi doğal boyutlandırma anahtar kelimelerini kullanılamazsınız.

CSS mülkü interpolate-size, gerçek boyutlandırma anahtar kelimeleri kullanılırken mümkün olmayan yeni bir animasyon grubu açar.

interpolate-size olmadan aşağıdaki videodaki düğmelerde geçiş olmaz.

interpolate-size: allow-keywords eklendikten sonra videodaki düğmeler güzel bir geçiş animasyon efekti alır.

root öğesinde interpolate-size: allow-keywords belirtildiğinde, sayfanın tamamı için yeni davranış ayarlanır. Bu işlemi, uyumluluk sorun olmadığında yapmanızı öneririz.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Daha hassas bir kontrol için calc() işlevine benzer şekilde CSS calc-size() işlevi, desteklenen doğal boyutlandırma anahtar kelimelerinden tam olarak biriyle ilgili işlemleri de destekler. size anahtar kelimesi, düzen hesaplamaları yapılırken calc-size-basis değerinin orijinal boyutuyla değerlendirilir.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Tüm ayrıntılar için CSS'de yükseklik: auto; (ve diğer içsel boyut anahtar kelimelerine göre) animasyonu bölümüne göz atın.

CSS ankrajı konumlandırmasında yapılan değişiklikler

CSS ankraj konumlandırması Chrome 125'te kullanıma sunuldu ancak CSS çalışma grubunda yapılan bazı ek tartışmalardan sonra spesifikasyon ve uygulamada birkaç değişiklik yapıldı. CSS ankraj konumunu zaten kullanıyorsanız kodunuzu en kısa sürede güncellemeniz gerekir.

Öncelikle inset-area, position-area olarak yeniden adlandırıldı. position- ifadesi, bu özelliğin ana öğeye değil, konumlandırılmış öğeye uygulandığını hatırlamanıza yardımcı olduğundan bu tercih edildi.

İkinci olarak, position-try-options position-try-fallbacks olarak yeniden adlandırılır. Bu, bunların yalnızca temel stillerle belirlenen birincil konuma yönelik yedek seçenekler olduğunu hatırlamanıza yardımcı olur.

Son olarak, inset-area() işlevsel söz dizimi position-try öğesinden kaldırılıyor. Bu nedenle, position-try-fallbacks: inset-area(top) yerine position-try-fallbacks: top kullanın.

Diğer özellikler

Elbette daha birçok özellik var.

Birden fazla yerel ayarı destekleyen, süreleri biçimlendirmek için yeni bir Intl yöntemi kullanıma sunuldu.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU kanvası artık HDR resimler için ekranın tüm aralığını kullanabilir.

Ayrıca, bazı geliştiricileri etkileyebilecek birkaç desteğin sonlandırılması ve kaldırılması söz konusudur.

Sürüm notlarının tamamını okuyun.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 129'daki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.

• Chrome Geliştirici Araçları'ndaki yenilikler (129)
• Chrome 129 için ChromeStatus.com güncellemeleri
• Chromium kaynak deposu değişiklik listesi
• Chrome sürüm takvimi

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 Pete LePage. Adriana'yla ilgili sorularım var. Chrome 130 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağız.