דברים שעליך לדעת:
- משתמשים ב-Document Picture in Picture API כדי להגביר את הפרודוקטיביות של המשתמשים.
- מעכשיו קל יותר לנפות באגים לגבי גיליונות סגנונות חסרים בכלי הפיתוח
- ויש הרבה עוד.
שמי אדריאנה ג'ארה. בואו נראה מה חדש למפתחים ב-Chrome 116.
Document Picture-in-Picture API (ממשק API של Document Picture-in-Picture).
ממשק ה-API מסוג Document Picture-in-Picture API מאפשר לפתוח חלון עם תצוגה תמידית שאפשר לאכלס בתוכן HTML שרירותי.
חלון 'תמונה בתוך תמונה' ב-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);
});
בקטע תמונה בתוך תמונה של כל רכיב תוכלו למצוא פרטים נוספים ודוגמאות.
בכלי הפיתוח חסרים שיפורים בניפוי באגים בגיליון סגנונות.
כלי הפיתוח כוללים מספר שיפורים לזיהוי ולניפוי באגים של בעיות עם גיליונות סגנונות חסרים.
ראשית: בעץ מקורות > דף מוצגים עכשיו רק גיליונות הסגנונות שנפרסו ונטענו, כדי לצמצם את הבלבול.
כמו כן, הקטע מקורות > עורך מסמן עכשיו בקו תחתון ומציג הסברים קצרים בתוך השורה לצד הצהרות שנכשלו,@import, url() ו-href.
- המסוף, בנוסף לקישורים לבקשות שנכשלו, מספק עכשיו קישורים לשורה המדויקת שמפנה לגיליון סגנונות שלא נטען.
החלונית 'רשת' מאכלסת באופן עקבי את העמודה יוזם קישורים לשורה המדויקת שמפנה לגיליון סגנונות שטעינתו נכשלה.
חלונית הבעיות מפרטת את כל הבעיות בטעינה של גיליונות סגנונות, כולל כתובות URL לא תקינות, בקשות שנכשלו והצהרות @import שגויות.
כדאי לעיין במאמר מה חדש בכלי הפיתוח כדי לקבל את כל הפרטים ומידע נוסף על כלי הפיתוח ב-Chrome 116.
ופעולות נוספות.
כמובן שיש עוד המון אפשרויות.
- נתיב תנועה מאפשר למחברים למקם כל אובייקט גרפי ולהנפיש אותו בנתיב שצוין על ידי המפתח.
- המאפיינים
displayו-content-visibilityנתמכים עכשיו באנימציות של תמונות מפתח, שמאפשרות הוספה של אנימציות יציאה רק ב-CSS. - כעת ניתן להשתמש בממשק ה-API לאחזור עם Bring Your Own Buffer הקוראים, ובכך לצמצם את התקורה ואת העותקים של איסוף אשפה ולשפר את הרספונסיביות של המשתמשים.
קריאה נוספת
המאמר הזה מתייחס רק לחלק מההדגשות העיקריות. בקישורים שבהמשך תוכלו למצוא שינויים נוספים ב-Chrome 116.
- מה חדש בכלי הפיתוח ל-Chrome (116)
- הוצאה משימוש והסרות של Chrome 116
- עדכונים ל-ChromeStatus.com ל-Chrome 116
- רשימת שינויים במאגרי מקורות של Chromium
- יומן ההפצה של Chrome
להרשמה
כדי להתעדכן, הירשמו לערוץ YouTube של מפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.
יו סויה אדריאנה ג'ארה, ומיד כש-Chrome 117 יושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome!