חדש ב-Chrome 110

Adriana Jara

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

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

קוראים לי אדריאנה ג'רה. נצלול פנימה ונראה מה חדש למפתחים ב-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!