חדש ב-Chrome 115

Adriana Jara

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

  • אפשר להשתמש ב-ScrollTimeline וב-ViewTimeline כדי ליצור אנימציות המבוססות על גלילה שמשפרות את חוויית המשתמש.
  • התכונה Fenced Frame פועלת יחד עם ממשקי 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();
}

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

מסגרת ללא שיתוף נתונים

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

רבות מההצעות שלה נועדו למלא תרחישים לדוגמה בין אתרים, ללא קובצי 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 אין אפשרות ללמוד נתונים מאינטראקציה ישירה (First-Party) מ-news.example.

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

במאמרים הבאים אפשר למצוא מסמכים בנושא Fenced Frames, Protected Audience API, אחסון משותף ועוד

Topics API

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

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

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

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

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

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

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

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

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

קריאה נוספת

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

להרשמה

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

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