דף זה תורגם על ידי Cloud Translation API.

חדש ב-Chrome 116

Adriana Jara

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

משתמשים ב-Document Picture in Picture API כדי לשפר את הפרודוקטיביות של המשתמשים.
עכשיו קל יותר לאתר באגים בסגנונות חסרים ב-DevTools
ויש עוד הרבה יותר.

קוראים לי אדריאנה ג'רה. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 116.

תיעוד של Picture-in-Picture API.

Document Picture-in-Picture API מאפשר לפתוח חלון שמוצג תמיד מעל שאר החלונות, ואפשר לאכלס אותו בתוכן HTML שרירותי.

חלון מסוג 'תמונה בתוך תמונה' שבו מופעל סרטון טריילר של Sintel. — חלון 'תמונה בתוך תמונה' שנוצר באמצעות Document Picture-in-Picture API (דמו).

החלון מסוג 'תמונה בתוך תמונה' ב-Document Picture-in-Picture API דומה לחלון ריק מאותו מקור שנפתח באמצעות window.open(), עם כמה הבדלים:

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

הקוד הבא ב-HTML מגדיר נגן וידאו בהתאמה אישית ורכיב לחצן כדי לפתוח את נגן הווידאו בחלון 'תמונה בתוך תמונה'.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

קוד ה-JavaScript הבא קורא ל-documentPictureInPicture.requestWindow() כשהמשתמש לוחץ על הלחצן כדי לפתוח חלון ריק של 'תמונה בתוך תמונה'. ההבטחה שמוחזרת מתקבלת עם אובייקט JavaScript של חלון 'תמונה בתוך תמונה'. נגן הווידאו מועבר לחלון הזה באמצעות append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

במאמר הזה מפורט מידע נוסף עם דוגמאות.

שיפורים ב-DevTools לחיפוש באגים בגיליונות סגנונות.

נוספו כמה שיפורים ל-DevTools כדי לזהות ולפתור באגים שקשורים לגילוי של גיליונות סגנונות חסרים.

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

בנוסף, עכשיו במקורות > עורך יש קו תחתון מתחת להצהרות עם שגיאות, והן מוצגות עם טיפים בתוך השורה לצד ההצהרות failed,‏ @import,‏ url() ו-href.

הצהרות עם קו תחתון ותיאורים קצרים בחלונית המקורות.

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

במסוף מוצגים קישורים לשורות המדויקות עם ההצהרות הבעייתיות.

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

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

חלונית הבעיות עם קישורים למקורות ולבקשות.

מה חדש בכלי הפיתוח – כאן אפשר למצוא את כל הפרטים והמידע הנוסף על כלי הפיתוח ב-Chrome 116.

ועוד.

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

נתיב תנועה מאפשר לכותבים למקם כל אובייקט גרפי ולהנפיש אותו לאורך נתיב שצוין על ידי המפתח.
עכשיו יש תמיכה במאפיינים display ו-content-visibility באנימציות של נקודות מפתח, כך שאפשר להוסיף אנימציות יציאה רק ב-CSS.
עכשיו אפשר להשתמש ב-fetch API עם קוראי Bring Your Own Buffer, כדי לצמצם את העלות הכוללת של איסוף האשפה ואת מספר העותקים, ולשפר את תגובת המערכת למשתמשים.

קריאה נוספת

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

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

קוראים לי Adriana Jara, ואחרי שגרסת Chrome 117 תושק, אספר לכם מה חדש ב-Chrome.