חדש ב-Chrome 110

Adriana Jara

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

  • מוסיפים סגנון מותאם אישית לאלמנטים של תמונה בתוך תמונה באמצעות פסאודו כיתה החדשה :picture-in-picture.
  • יש להגדיר את התנהגות ההפעלה של אפליקציית האינטרנט באמצעות launch_handler במניפסט.
  • להשתמש במאפיין credentialless ב-iframes כדי להטמיע תוכן של צד שלישי שלא מגדיר מדיניות הטמעה ממקורות שונים
  • ויש הרבה עוד.

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

:שיעור פסאודו-תמונה בתוך תמונה

בעזרת Picture-in-Picture API, אתרים יכולים ליצור חלון וידאו צף, שתמיד פתוח, כדי שהמשתמשים ימשיכו לצרוך מדיה תוך כדי אינטראקציה עם תוכן אחר.

עכשיו, באמצעות סיווג פסאודו-סיווג של :picture-in-picture CSS, אפשר להוסיף סגנונות לרכיבים כדי לשפר את חוויית השימוש.

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

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

השתמשו שוב בפסאודו-סיווג ברכיב הווידאו, כדי שהרכיב יהיה שקוף כך שההודעה תוצג כראוי.

כאן אפשר להיעזר בדוגמה כדי לשפר את חוויית השימוש בווידאו בתוך תמונה.

חבר מניפסט ב-launch_handler.

Launch Handler API: מאפשר לכם לשלוט באופן ההשקה של אפליקציית האינטרנט. לדוגמה, אם נעשה בה שימוש בחלון קיים או בחלון חדש, והאם החלון שנבחר יועבר לכתובת ה-URL להשקה.

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

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

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

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless מסגרות iframe.

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

המאפיין credentialless עוזר להטמיע מסגרות iframe של צד שלישי שלא מגדירות את הכותרות האלה.

באמצעות credentialless, ה-iframe נטען מהקשר ריק אחר. באופן ספציפי, הוא נטען ללא קובצי cookie. ה-iframe מתחיל עם צנצנת ריקה של קובצי cookie.

באופן דומה, ממשקי API לאחסון כמו LocalStorage , CacheStorage וכו' טוענים ומאחסנים נתונים במחיצה הזמנית החדשה. כל נפח האחסון הזה מתפנה אחרי הסרת המסמך ברמה העליונה. כך ניתן להסיר את הגבלת ה-COEP.

במאמר הזה מוסבר איך להשתמש באופן מאובטח ב-credentialless כדי לטעון תוכן של צד שלישי ב-iframes.

ופעולות נוספות.

וכמובן, יש עוד הרבה אפשרויות.

עכשיו Web SQL הוסר בהקשרים לא מאובטחים.

מאפיין ה-CSS initial-letter מאפשר להגדיר את מספר השורות שאות ראשונה תשקע בשורות הבאות של הטקסט.

FileSystemHandle כולל עכשיו שיטת remove().

קריאה נוספת

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

להרשמה

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

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