חדש ב-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 נוספה תמיכה בשאילתות מדיה – רמה 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, כך שתוכלו לשנות את האפקט מ'הבהרה' ל'החלקה' או לכל אפקט אחר שתרצו.

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

ועוד.

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

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

קריאה נוספת

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

להרשמה

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

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