חדש ב-Chrome 64

Pete LePage

ויש עוד הרבה!

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

רוצים לראות את רשימת השינויים המלאה? רשימת השינויים במאגר המקור של Chromium

ResizeObserver

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

מה קורה אם חלון הדפדפן לא השתנה בגודל, אבל נוסף אלמנט חדש למסמך? או הוספת את display: none לרכיב? שני הגורמים האלה יכולים לשנות את הגודל של רכיבים אחרים בדף.

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

כמו ב-Observers אחרים, השימוש בו פשוט למדי: יוצרים אובייקט ResizeObserver ומעבירים פונקציית קריאה חוזרת (callback) למבנה ה-constructor. בקריאה החוזרת יועבר מערך של ResizeOberverEntries – רשומה אחת לכל אלמנט שנצפה – שמכיל את המאפיינים החדשים של האלמנט.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

בקישור הבא אפשר למצוא פרטים נוספים ודוגמאות לשימוש ב-ResizeObserver: זה כמו document.onresize ל-Elements.

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

החל מגרסה 64 של Chrome, תנועות מסוג כזה ייחסמו, ו-Chrome יציג למשתמש ממשק משתמש מקורי מסוים – שיאפשר לו להמשיך להפניה האוטומטית אם הוא רוצה.

import.meta

כשכותבים מודולים של JavaScript, בדרך כלל רוצים גישה למטא-נתונים ספציפיים למארח לגבי המודול הנוכחי. מעכשיו, ב-Chrome 64 יש תמיכה בנכס import.meta בתוך מודולים, והכתובת של המודולים מוצגת כ-import.meta.url.

האפשרות הזו שימושית מאוד כשרוצים לפתור משאבים ביחס לקובץ המודול, ולא למסמך ה-HTML הנוכחי.

ועוד.

אלה רק כמה מהשינויים ב-Chrome 64 למפתחים, כמובן שיש עוד הרבה.

  • עכשיו יש ב-Chrome תמיכה בתפיסות בעלות שם ובבריחה מנכסי Unicode בביטויים רגולריים.
  • ערך ברירת המחדל של preload לרכיבי <audio> ו-<video> הוא עכשיו metadata. כך Chrome תואם לדפדפנים אחרים, ועוזר לצמצם את רוחב הפס ואת השימוש במשאבים על ידי טעינת המטא-נתונים בלבד ולא המדיה עצמה.
  • עכשיו אפשר להשתמש ב-Request.prototype.cache כדי להציג את מצב המטמון של Request ולקבוע אם בקשה היא בקשה לטעינה מחדש.
  • בעזרת Focus Management API, עכשיו אפשר להתמקד באובייקט בלי לגלול אליו באמצעות המאפיין preventScroll.

window.alert()

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

לא תהיה יותר מעבר אקראי לכרטיסיות כי משהו הפעיל עלי window.alert. אני מדבר על יומן Google הישן.

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 65 תפורסם, אספר לכם מה חדש ב-Chrome.