חדש ב-Chrome 104

Pete LePage

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

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

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

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

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

ב-Chrome 104 נוספה תמיכה בMedia Queries – רמה 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));
}

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

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

ועוד.

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

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

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפיג', ואחרי שגרסת Chrome 105 תפורסם, אספר לכם מה חדש ב-Chrome.