מה חדש בגרסה 132 של Chrome

Pete LePage

דברים שעליך לדעת:

קוראים לי פיט לייפאג (Pete LePage). נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 132.

אירועי החלפת מצב של אלמנט תיבת דו-שיח

הרכיב <dialog> הוא רכיב שימושי שמייצג כל סוג של תיבת דו-שיח ב-HTML. האפשרות הזו זמינה ב-Baseline Widely, כלומר היא פועלת בכל הדפדפנים. לצערנו, ההטמעה הראשונית לא כללה דרך ישירה לזהות מתי תיבת דו-שיח נפתחת או נסגרת.

החל מגרסה 132 של Chrome, יש 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");
  }
});

צילום רכיבים

אלמנטים חופפים עם צילום אלמנטים.

פלטפורמת האינטרנט מאפשרת לאפליקציית אינטרנט לצלם טראק וידאו של הכרטיסייה הנוכחית או של האזור הנוכחי. החל מגרסה 132 של Chrome, אפליקציות אינטרנט יכולות לצלם רכיב. האפשרות הזו שימושית במיוחד כשהרכיבים ממוקמים בצורה שעלולה לגרום לחפיפה ביניהם.

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;

הדגמה

File System Access API ב-Android וב-WebView

File System Access API זמין ב-Chrome למחשב כבר זמן מה, ומאפשר לאפליקציות אינטרנט לקיים אינטראקציה עם קבצים במערכת הקבצים המקומית של המשתמשים. החל מגרסה 132 של Chrome, ה-API זמין עכשיו ב-Android וב-WebViews.

כדי לקרוא קובץ, קוראים לפונקציה showOpenFilePicker(), שמציגה בורר קבצים ומחזירה מאגר קובץ שאפשר להשתמש בו כדי לקרוא את הקובץ. כדי לשמור קובץ בדיסק, אפשר להשתמש במזהה הקובץ שקיבלת מקודם או לבצע קריאה ל-showSaveFilePicker() כדי לקבל מזהה קובץ חדש.

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

ועוד.

כמובן שיש עוד הרבה דברים.

קריאה נוספת

הרשימה הזו כוללת רק כמה נקודות עיקריות. בקישורים הבאים מפורטים שינויים נוספים בגרסה 132 של Chrome.

להרשמה

כדי להתעדכן, כדאי להירשם לערוץ YouTube למפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.

ברגע שגרסת Chrome 133 תפורסם, נעדכן אתכם כאן לגבי החידושים ב-Chrome.