جدید در کروم 132

پیت لی پیج

در اینجا چیزی است که شما باید بدانید:

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 132 جدید است.

رویدادهای تغییر عنصر دیالوگ

عنصر <dialog> یک عنصر مفید برای نمایش هر نوع گفتگو در HTML است. این Baseline به طور گسترده در دسترس است، به این معنی که در همه مرورگرها کار می کند. متأسفانه، پیاده‌سازی اولیه راه مستقیمی برای تشخیص زمان باز یا بسته شدن یک گفتگو نداشت.

با شروع در Chrome 132، یک ToggleEvent جدید وجود دارد. این شامل همان ToggleEvent است که توسط یک popover ارسال می شود . برای عناصر <dialog> ، هنگامی که showModal یا show فراخوانی می شود، <dialog> یک ToggleEvent با newState=open ارسال می کند. هنگامی که یک <dialog> بسته می شود (با استفاده از یک فرم، دکمه یا closewatcher )، یک ToggleEvent با newState=closed ارسال می کند.

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

گرفتن عنصر

عناصر همپوشانی با ضبط عناصر.

پلتفرم وب به یک برنامه وب اجازه می‌دهد از برگه یا منطقه فعلی یک آهنگ ویدیویی بگیرد و با شروع Chrome 132، برنامه‌های وب می‌توانند یک عنصر را ضبط کنند . این به ویژه زمانی مفید است که عناصر به گونه ای قرار گیرند که ممکن است روی یکدیگر همپوشانی داشته باشند. 

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;

نسخه ی نمایشی را بررسی کنید.

API دسترسی به فایل سیستم در Android و WebView

File System Access API مدتی است که در Chrome Desktop در دسترس است و به برنامه‌های وب اجازه می‌دهد با فایل‌های موجود در سیستم فایل محلی کاربران تعامل داشته باشند. از Chrome 132، API اکنون در Android و WebViews در دسترس است.

برای خواندن یک فراخوانی فایل showOpenFilePicker() که یک انتخابگر فایل را نشان می دهد، سپس یک دسته فایل را برمی گرداند که می توانید از آن برای خواندن فایل استفاده کنید. برای ذخیره یک فایل در دیسک، می‌توانید از دسته فایلی که قبلاً دریافت کرده‌اید استفاده کنید یا با call showSaveFilePicker() یک دسته فایل جدید دریافت کنید.

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

و بیشتر!

البته چیزهای بیشتری وجود دارد.

در ادامه مطلب

این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 132 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

به محض انتشار کروم 133، ما در اینجا خواهیم بود تا به شما بگوییم چه چیزی در کروم جدید است!