Chrome 124'teki yenilikler

Pete LePage

Chrome 124'te öne çıkan özellikler şunlardır:

Yayının tamamını mı okumak istiyorsunuz? Chrome 124 Sürüm Notları'na göz atın.

JavaScript'te bildirim temelli gölge DOM kullanma

Bildirim temelli gölge DOM'un JavaScript'ten kullanılmasına olanak tanıyan iki yeni API vardır.

setHTMLUnsafe(), innerHTML ile benzerdir ve bir öğenin iç HTML'sini sağlanan dizeye ayarlamanıza olanak tanır. Bu, şunun gibi bildirim temelli bir gölge DOM içeren bir HTML'nizin olması halinde yardımcı olur.

<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 bir şekilde ayrıştırmaz ve bir 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() ve DOMParser.parseFromString() ile benzer şekilde çalışır.

Bu API'lerin ikisi de güvenli değildir, yani giriş temizleme yapmazlar. Bu nedenle, onlara ne veriyorsanız, güvenli olduğundan emin olmalısınız. Yakında yayınlanacak bir sürümde, girişi temizleme işlevi sunan bir sürüm görmeyi bekliyoruz.

Son olarak, bu API'ların her ikisi de Firefox ve Safari'nin son sürümünde zaten desteklenmektedir.

WebSocket Akış API'sı

WebSockets, yoklamaya gerek kalmadan kullanıcının tarayıcısıyla sunucu arasında veri alışverişi yapmanın harika bir yoludur. Bu, bilgi geldiği anda ilgilenmek istediğiniz sohbet uygulamaları gibi uygulamalar için idealdir.

Peki ya veriler başa çıkabileceğinizden daha hızlı ulaşırsa?

Buna sırtta baskı denir ve ciddi baş ağrılarına neden olabilir. Ne yazık ki WebSocket API, karşı basınçla başa çıkmanın iyi bir yöntemi değildir.

WebSocket Stream API, size akışların ve web soketlerinin gücünü sunar. Bu da geri baskının ek maliyet olmaksızın uygulanabileceği anlamına gelir.

İlk olarak yeni bir WebSocketStream oluşturun ve bunu WebSocket sunucusunun URL'sini iletin.

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);
}

Daha sonra, bağlantının açılmasını beklersiniz. Bu işlem, ReadableStream ve WritableStream sonucunu verir. ReadableStream.getReader() yöntemini çağırarak bir ReadableStreamDefaultReader elde edersiniz. Ardından akış tamamlanana kadar read() veri elde edebilirsiniz.

Veri yazmak için WritableStream.getWriter() yöntemini çağırın. Bu yöntem, size bir WritableStreamDefaultWriter verir. Ardından write() veri yazabilirsiniz.

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

Görünüm Geçişleri özellikleriyle ilgili olarak çok heyecanlıyım. Chrome 124'te görünüm geçişlerini kolaylaştırmak için tasarlanmış iki yeni özellik var.

Bir gezinme dokümanını 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ı engelleyerek tüm tarayıcılarda tutarlı bir ilk boyama gerçekleştirmenizi sağlayan doküman oluşturma engelleme özelliği.

Diğer ölçütler

Elbette dahası var.

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

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

  • Evrensel yükleme özelliği ise geçerli PWA ölçütlerini karşılamayanlar da dahil kullanıcıların herhangi bir sayfayı yüklemesine olanak tanır.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 124'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 125 yayınlanır yayınlanmaz size Chrome'daki yenilikleri duyurmak için burada olacağız!