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