חדש ב-Chrome 104

Pete LePage

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

שמי Pete LePage. בואו נראה מה חדש למפתחים ב-Chrome 104.

ציון אזור חיתוך באמצעות לכידת אזור

getDisplayMedia() מאפשר ליצור וידאו בסטרימינג מהכרטיסייה הנוכחית. אבל לפעמים לא רוצים להשתמש בכל הכרטיסייה, אלא רק בחלק קטן ממנה. עד עכשיו, הדרך היחידה לעשות זאת הייתה לחתוך באופן ידני כל פריים של סרטון.

באמצעות 'צילום אזור', אפליקציית אינטרנט יכולה להגדיר את האזור הספציפי במסך שהיא רוצה לשתף. לדוגמה, ב-Google Slides תוכלו להישאר בתצוגת העריכה הרגילה ולשתף את השקף הנוכחי.

צילום מסך של חלון דפדפן עם אפליקציית אינטרנט שמדגישה את אזור התוכן הראשי ו-iframe ממקורות שונים.
אזור התוכן הראשי מופיע בכחול וה-iframe ממקורות שונים מופיע באדום.

כדי להשתמש בו, צריך לבחור את הרכיב לשיתוף וליצור CropTarget חדש שמבוסס על האלמנט הזה. אחר כך, צריך להתקשר למספר getDisplayMedia() כדי להתחיל בשיתוף המסך. במקרה כזה, תוצג למשתמש בקשה לתת הרשאה לשתף את המסך. לאחר מכן, מתקשרים אל track.cropTo() ומעבירים את ה-cropTarget שנוצר קודם לכן.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

למידע נוסף, ראו שיתוף כרטיסיות טוב יותר באמצעות 'צילום אזור'.

שאילתות מדיה קלות יותר עם תחביר והערכה ברמה 4

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

בגרסה 104 של Chrome יש תמיכה ב-שאילתות מדיה – רמה 4 – תחביר והערכה, וכך אפשר לכתוב שאילתות מדיה באמצעות אופרטורים רגילים להשוואות מתמטיות.

כך שבמקום להשתמש בערך כזה כדי לציין אזור תצוגה בין 400 ל-600 פיקסלים:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

אפשר לכתוב כך:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

בנוסף לכך ששאילתות מדיה יהיו פחות גסות, התחביר החדש יכול להיות מדויק יותר. השאילתות min- ו-max- כוללות את כל האפשרויות, לדוגמה: min-width: 400px בדיקות של רוחב של 400px או יותר. התחביר החדש מאפשר לכם להתבטא בצורה מפורשת יותר.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

הוא כבר נתמך ב-Firefox, ויש פלאגין של PostCSS שיכתוב את התחביר החדש לתחביר הישן, ויבטיח תאימות של הדפדפן.

לפרטים נוספים, קראו את המאמר של רייצ'ל תחביר חדש לשאילתות מדיה של טווחים ב-Chrome 104.

מעברים משותפים של רכיבים מתחילים תקופת מקור חדשה לניסיון

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

מעברים משותפים בין רכיבים, החל מגרסת מקור חדשה לניסיון ב-Chrome 104, מאפשרת להעביר מעברים בצורה חלקה, בין אם המעברים הם מסמכים שונים (למשל באפליקציה מרובת דפים) או בתוך המסמך (למשל באפליקציה בדף יחיד).

הנה דוגמה כללית לאופן שבו מעברים פועלים באפליקציה בדף יחיד. בפונקציית הניווט, משיגים את תוכן הדף החדש ובודקים אם יש תמיכה במעברים, ואם לא, עדכנו את הדף ללא מעבר. במקרה שכן, צריך ליצור transition() ולהפעיל בו קריאה ל-start(), כדי להודיע ל-API כששינוי ה-DOM הושלם.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

מאחורי הקלעים, Shared Element Transits משתמש באנימציות CSS, כך שתוכלו להחליף אפקטים הדרגתיים, להסיט פנימה או מה שתרצו.

חרטתי את ממש, אז כדאי לצפות בסרטון של ג'ייק Bringing Page Transitions to the Web, או לקרוא את ההסבר.

ופעולות נוספות.

כמובן שיש עוד המון אפשרויות.

  • כשקובצי cookie מוגדרים עם מאפיין Expires או Max-Age מפורש, הערך יהיה מוגבל עכשיו ל-400 ימים לכל היותר.
  • בוצעו שיפורים בממשק ה-API של מיקום חלונות מרובים למסכים.
  • ומאפיין ה-CSS overflow-clip-margin מציין את המרחק שמותר לצבוע תוכן של אלמנט לפני שחותכים אותו.

קריאה נוספת

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

להרשמה

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

אני פיט לה פייג', וברגע ש-Chrome 105 יושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome!