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() olup DOMParser.parseFromString() ile benzer şekilde çalışır.

Bu API'lerin ikisi de güvenli değildir. Yani giriş temizleme işlemi yapmazlar. Bu nedenle beslediğiniz her şeyin 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'si

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'nin karşı baskıyla başa çıkmak için iyi bir yolu yok.

WebSocket Stream API, size akışların ve web soketlerinin gücünü sunar. Böylece, ters basınç hiçbir ek maliyet olmadan 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 size bir WritableStreamDefaultWriter verir. Ardından, bu WritableStreamDefaultWriter'a veri write() edebilirsiniz.

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 ve tüm tarayıcılarda tutarlı bir ilk boyama işlemi yapılmasını sağlayan belge oluşturma engelleme özelliği de vardır.

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, mevcut PWA ölçütlerini karşılamayanlar bile dahil kullanıcıların istedikleri 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.