חדש ב-Chrome 64

Pete LePage

ויש עוד עוד המון.

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

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

ResizeObserver

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

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

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

כמו צופים אחרים, השימוש בו פשוט למדי, יוצרים אובייקט ResizeObserver ומעבירים קריאה חוזרת (callback) ל-builder. הקריאה החוזרת (callback) תקבל מערך של 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 לרכיבים.

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

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

import.meta

כשכותבים מודולים של JavaScript, לעיתים קרובות רוצים לקבל גישה למטא-נתונים שהם ספציפיים למארח של המודול הנוכחי. Chrome 64 תומך עכשיו במאפיין import.meta במודולים, וחושף את כתובת ה-URL של המודול כ-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 שלנו, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.

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