חדש ב-Chrome 110

Adriana Jara

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

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

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

פסאודו-כיתה ‎:picture-in-picture

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

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

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

#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 iframes.

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

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

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

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

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

ועוד.

ויש עוד הרבה דברים.

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

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

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

קריאה נוספת

הסיכום מכסה רק חלק מהעדכונים העיקריים. בקישורים שבהמשך מפורטים שינויים נוספים בגרסה 110 של Chrome.

להרשמה

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

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