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 animasyonlu hale 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 ayırabilir, ana iş parçacığına açıkça geri vererek yanıt vermeyi artırabilirsiniz.

Tarayıcıya şunları bildirmenizi sağlar:

"HEY! Yapacağım işlem biraz zaman alabilir. Bir çerçeve boyamanız, kullanıcı girişine yanıt vermeniz 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ına öncelik verilmesini sağlar. Daha büyük çalışma parçaları arasındaki işlevlerde scheduler.yield()'ün bolca kullanılmasını öneririz.

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

Doğal 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.

interpolate-size CSS özelliği, içsel boyutlandırma anahtar kelimeleri kullanılırken mümkün olmayan yeni bir animasyon grubu sunar.

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

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

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

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

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Daha hassas kontrol için CSS calc-size() işlevi, calc()'a benzer şekilde, desteklenen doğal boyutlandırma anahtar kelimelerinden tam olarak birinde 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);
  }
}

Ayrıntılı bilgi için CSS'de height: auto; (ve diğer doğal boyutlandırma anahtar kelimeleri) için animasyon başlıklı makaleyi inceleyin.

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'dan 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 tamamı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ılara göz atın.

• 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.

Adriana'nın yerine ben Pete LePage buradayım. Chrome 130 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğiz.