חדש ב-Chrome 115

Adriana Jara

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

  • אפשר להשתמש ב-ScrollTimeline וב-ViewTimeline כדי ליצור אנימציות שמתבססות על גלילה שמשפרות את חוויית המשתמש.
  • מסגרות מגודרות פועלות לצד ממשקי API אחרים של ארגז החול לפרטיות כדי להטמיע תוכן רלוונטי ולמנוע שיתוף של הקשר מיותר.
  • באמצעות Topics API, הדפדפן יכול לשתף עם צדדים שלישיים מידע על תחומי העניין של המשתמש תוך שמירה על הפרטיות.
  • ויש עוד הרבה יותר.

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

אנימציות שמבוססות על גלילה

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

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

מדד קריאה בחלק העליון של המסמך, שמופעל על ידי גלילה.

אנימציות שמבוססות על גלילה יכולות גם ליצור רכיבים שמופיעים בהדרגה כשהם נכנסים לתצוגה:

התמונות בדף הזה מופיעות בהדרגה כשהן נכנסות לתצוגה.

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

במפרט של אנימציות מבוססות גלילה מוגדרים שני סוגים חדשים של צירי זמן שבהם אפשר להשתמש:

  • ציר זמן של התקדמות הגלילה: ציר זמן שמקושר למיקום הגלילה של מאגר גלילה בציר מסוים.
  • ציר זמן של התקדמות הצפייה: ציר זמן שמקושר למיקום היחסי של אלמנט מסוים בתוך מאגר הגלילה שלו.

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

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

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

פריימים ללא שיתוף נתונים

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

הרבה מהצעות ה-W3C נועדו לענות על תרחישי שימוש באתרים שונים ללא קובצי cookie של צד שלישי או מנגנוני מעקב אחרים. לדוגמה:

  • Protected Audience API: מאפשר להציג מודעות לפי תחומי עניין באופן שמגן על הפרטיות.
  • אחסון משותף: מאפשר גישה לנתונים מאתרים שונים ללא מחיצות בסביבה מאובטחת.

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

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

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

באופן דומה, אי אפשר לשתף עם המסגרת המגודרת נתונים מאינטראקציה ישירה (First-Party) בהקשר ההטמעה.

תכונה iframe fencedframe
הטמעת תוכן כן כן
תוכן מוטמע יכול לגשת ל-DOM של הקשר ההטמעה כן לא
הטמעה של הקשר יכולה לגשת ל-DOM של תוכן מוטמע כן לא
מאפיינים שניתנים למדידה, כמו name כן לא
כתובות URL (http://example.com) כן כן (תלוי בתרחיש לדוגמה)
מקור אטום בניהול הדפדפן (urn:uuid) לא כן
גישה לנתונים מאתרים שונים לא כן (בהתאם לתרחיש לדוגמה)

לדוגמה, נניח ש-news.example (הקשר ההטמעה) מטמיע מודעה מ-shoes.example בתוך מסגרת מוקפת. news.example לא יכול להעביר נתונים מהמודעה של shoes.example, ו-shoes.example לא יכול ללמוד נתונים מאינטראקציה ישירה מ-news.example.

השוואה בין מצב החלוקה למחיצות (partitioning) של אחסון לפני ואחרי.

במאמרים הבאים אפשר למצוא מסמכי עזרה על Fenced Frames, על Protected Audience API, על Shared Storage ועוד

Topics API

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

Topics API מאפשר לדפדפן לשתף עם צדדים שלישיים מידע על תחומי העניין של המשתמש, תוך שמירה על הפרטיות.

Topics API מאפשר פרסום מבוסס-עניין (IBA) ללא מעקב אחר האתרים שבהם משתמש מבקר. הדפדפן בוחן ומתעד נושאים שנראים מעניינים את המשתמש, על סמך פעילות הגלישה שלו. המידע הזה מתועד במכשיר של המשתמש.

לדוגמה, ה-API עשוי להציע את הנושא "Fiber & Textile Arts" למשתמש שמבקר באתר knitting.example.

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

בסקירה הכללית על ארגז החול לפרטיות מפורטים כל הפרטים על הטקסונומיה של הנושאים ועל השימוש ב-Topics API.

ועוד.

כמובן שיש עוד הרבה.

  • הגודל המקסימלי של WebAssembly.Module בשרשור הראשי גדל ל-8 מגה-בייט
  • מאפיין ה-CSS display מקבל עכשיו כמה מילות מפתח כערך, בנוסף למילות המפתח המורכבות מראש מהדור הקודם.
  • יש גרסת ניסיון במקור ל-Compute Pressure API, שמספקת מידע ברמה גבוהה על המצב הנוכחי של חומרת המכשיר.

קריאה נוספת

הסקירה הזו כוללת רק כמה נקודות עיקריות. בקישור הבא מפורטים שינויים נוספים בגרסה 115 של Chrome.

להרשמה

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

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