Chrome 124'teki yenilikler

Pete LePage

Chrome 124'teki öne çıkan özellikleri aşağıda bulabilirsiniz:

Tüm ayrıntıları öğrenmek ister misiniz? Chrome 124 Sürüm Notları'na göz atın.

JavaScript'te bildirimsel gölge DOM kullanma

JavaScript'ten açıklayıcı gölge DOM'un kullanılmasına olanak tanıyan iki yeni API vardır.

setHTMLUnsafe(), innerHTML'a benzer ve bir öğenin iç HTML'sini sağlanan dizeye ayarlamanıza olanak tanır. Bu, aşağıdaki gibi açıklayıcı bir gölge DOM içeren HTML'niz olduğunda faydalıdır.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Yalnızca innerHTML kullanırsanız tarayıcı bunu düzgün şekilde ayrıştırmaz ve gölge DOM olmaz. Ancak setHTMLUnsafe() ile gölge DOM'unuz oluşturulur ve öğe, beklediğiniz gibi ayrıştırılır.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

Diğer API, parseHTMLUnsafe()'tür ve DOMParser.parseFromString()'e benzer şekilde çalışır.

Bu API'lerin ikisi de güvenli değildir. Yani giriş temizleme işlemi yapmazlar. Bu nedenle, onlara verdiğiniz yiyeceklerin güvenli olduğundan emin olmalısınız. Yakında yayınlanacak bir sürümde, girişin temizlenmesini sağlayan bir sürüm göreceğimizi umuyoruz.

Son olarak, bu API'lerin ikisi de Firefox ve Safari'nin en son sürümlerinde zaten destekleniyor.

WebSocket Stream API

WebSocket'ler, anketlere başvurmak zorunda kalmadan kullanıcının tarayıcısı ile sunucu arasında veri göndermenin mükemmel bir yoludur. Bu, bilgilerin geldikten hemen sonra işleme almak istediğiniz sohbet uygulamaları gibi durumlar için mükemmeldir.

Peki veriler işleyebileceğinizden daha hızlı gelirse ne olur?

Buna geri basınç denir ve ciddi sorunlara yol açabilir. Maalesef WebSocket API'sinde geri basınçla başa çıkmanın iyi bir yolu yoktur.

WebSocket Stream API, akışların ve web soketlerinin gücünü size sunar. Bu sayede, ek ücret ödemeden geri basınç uygulanabilir.

Yeni bir WebSocketStream oluşturarak ve bu nesneye WebSocket sunucusunun URL'sini göndererek başlayın.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Ardından, bağlantının açılmasını bekleyin. Bu işlem sonucunda ReadableStream ve WritableStream oluşur. ReadableStream.getReader() yöntemini çağırarak bir ReadableStreamDefaultReader elde edersiniz. Ardından, akış tamamlanana kadar bu ReadableStreamDefaultReader üzerinden veri read() edebilirsiniz.

Veri yazmak için WritableStream.getWriter() yöntemini çağırın. Bu yöntem, verileri write() edebileceğiniz bir WritableStreamDefaultWriter döndürür.

Geçiş iyileştirmelerini görüntüleme

Görüntüleme geçişi özellikleri beni heyecanlandırıyor. Chrome 124'te görüntüleme geçişlerini kolaylaştırmak için tasarlanmış iki yeni özellik var.

Bir gezinme işlemi dokümanı yeni bir dokümanla değiştirdiğinde pageswap etkinliği dokümanın pencere nesnesinde tetiklenir.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Ayrıca, kritik içerik ayrıştırılana kadar bir dokümanın oluşturulmasını engellemenize olanak tanıyan doküman oluşturma engelleme özelliği, tüm tarayıcılarda tutarlı bir ilk boyama sağlar.

Diğer özellikler

Elbette daha birçok özellik var.

  • disallowReturnToOpener, tarayıcıya, pencere içinde pencere penceresinde kullanıcının açıcı sekmesine geri dönmesine olanak tanıyan bir düğme göstermemesi gerektiğini belirtir.

  • Klavyeyle odaklanılabilir kaydırma kapsayıcıları, sıralı odaklanma gezinmesini kullanarak kaydırma kapsayıcılarını odaklanılabilir hale getirerek erişilebilirliği iyileştirir.

  • Evrensel yükleme ise kullanıcıların mevcut PWA ölçütlerini karşılamayan sayfalar da dahil olmak üzere herhangi bir sayfayı yüklemesine olanak tanır.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 124'teki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

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. Chrome 125 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğiz.