Chrome 132'de yenilikler

Pete LePage

Şunları bilmeniz gerekir:

• İletişim öğesi ToggleEvent, bir <dialog>'in ne zaman açıldığını veya kapandığını size bildirir.
• Video paylaşımı için belirli öğeleri yakalayabilirsiniz.
• File System Access API artık Android ve WebView'lerde kullanılabilir
• Bunun gibi çok daha fazla özellik var.

Adım Pete LePage. Chrome 132'de geliştiriciler için neler yeni olduğuna göz atalım.

İletişim öğesi açma/kapatma etkinlikleri

<dialog> öğesi, HTML'de her türlü iletişim kutusunu temsil etmek için kullanışlı bir öğedir. Geniş kapsamlı temel sürümdür. Yani tüm tarayıcılarda çalışır. Maalesef ilk uygulamada, bir iletişim kutusunun ne zaman açıldığını veya kapandığını algılamanın doğrudan bir yolu yoktu.

Chrome 132'den itibaren yeni bir ToggleEvent var. popover tarafından gönderilen ToggleEvent ile aynıdır. <dialog> öğelerinde, showModal veya show çağrıldığında <dialog>, newState=open ile bir ToggleEvent gönderir. Bir <dialog> kapatıldığında (form, düğme veya closewatcher kullanılarak), newState=closed ile bir ToggleEvent gönderilir.

const dialog = document.getElementById("myDialog");

// Fired just before dialog is shown/hidden
dialog.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is about to be shown");
  } else {
    console.log("Dialog is about to be hidden");
  }
});

// Fired just after dialog is shown/hidden
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is now visible");
  } else {
    console.log("Dialog is now hidden");
  }
});

Öğe yakalama

Web platformu, web uygulamalarının mevcut sekmenin veya bölgenin video kaydını almasına olanak tanır. Chrome 132'den itibaren web uygulamaları bir öğeyi yakalayabilir. Bu özellik, öğeler birbirinin üzerine binecek şekilde yerleştirildiğinde özellikle yararlıdır.

const myElem = document.getElementById('elementToShare');

// Request screen sharing
const stream = await navigator.mediaDevices
  .getDisplayMedia({preferCurrentTab: true});
const [videoTrack] = stream.getVideoTracks();

// Restrict the video stream to myElem and its subtree
const restrictionTarget = await RestrictionTarget.fromElement(myElem);
await videoTrack.restrictTo(restrictionTarget);

// Set the video source to my newly restricted stream
video.srcObject = stream;

Demoya göz atın.

Android ve WebView'de File System Access API

Dosya Sistemi Erişimi API'si, Chrome Masaüstü'nde bir süredir kullanılabiliyor ve web uygulamalarının kullanıcıların yerel dosya sistemindeki dosyalarla etkileşim kurmasına olanak tanıyor. Chrome 132'den itibaren API, Android'de ve WebView'lerde kullanılabilir.

Bir dosyayı okumak için showOpenFilePicker() çağrısı yapın. Bu çağrı, bir dosya seçici gösterir ve ardından dosyayı okumak için kullanabileceğiniz bir dosya tutamacını döndürür. Bir dosyayı diske kaydetmek için daha önce aldığınız dosya adını kullanabilir veya yeni bir dosya adı almak için showSaveFilePicker() işlevini çağırabilirsiniz.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

Diğer özellikler

Elbette daha birçok özellik var.

• writing-mode CSS mülkü için sideways-rl ve sideways-lr anahtar kelimeleri desteği.
• Klavyeyle odaklanılabilir kaydırma kapsayıcılarının kullanıma sunulması devam etti.
• Request ve Response arayüzlerine, Uint8Array ile çözülen bir promise döndüren bir bytes() yöntemi ekleyin.

Daha fazla bilgi

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

• Chrome 132 sürüm notları.
• Chrome Geliştirici Araçları'ndaki yenilikler (132).
• Chrome 132 için ChromeStatus.com güncellemeleri.
• 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.

Chrome 133 sürümü kullanıma sunulduğunda Chrome'daki yenilikleri buradan size bildireceğiz.