חדש ב-Chrome 115

Adriana Jara

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

במאמרים הבאים מפורט מידע על 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 מקבל עכשיו כמה מילות מפתח כערך, בנוסף למילות המפתח הקודמות שהורכבו מראש.
  • יש גרסת ניסיון ל-origin של Compute Pressure API, שמספקת מידע ברמה גבוהה על המצב הנוכחי של חומרת המכשיר.

קריאה נוספת

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

להרשמה

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

קוראים לי Adriana Jara, ואחרי שגרסת Chrome 116 תפורסם, אספר לכם מה חדש ב-Chrome.