חדש ב-Chrome 64

Pete LePage

ויש עוד הרבה!

קוראים לי Pete LePage. בואו לראות מה חדש למפתחים ב-Chrome 64!

רוצה את רשימת השינויים המלאה? תוכלו לעיין ברשימת השינויים במאגר מקורות 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.