חדש ב-Chrome 69

Pete LePage

עברו עשר שנים מאז ההשקה הראשונה של Chrome. הרבה השתנה מאז, אבל המטרה שלנו – ליצור בסיס יציב לאפליקציות אינטרנט מודרניות – לא השתנתה.

ב-Chrome 69 הוספנו תמיכה באפשרויות הבאות:

  • CSS Scroll Snap מאפשר ליצור חוויית גלילה חלקה וחלקלקה.
  • חתימות במסך מאפשרות לכם להשתמש באזור המלא של המסך, כולל כל המרחב שמאחורי חתימת המסך, שנקראת לפעמים חריץ.
  • Web Locks API מאפשר לקבל אסינכרונית את המנעול, להחזיק אותו בזמן ביצוע העבודה ולאחר מכן לשחרר אותו.

ויש עוד הרבה!

קוראים לי Pete LePage. נצלול פנימה ונראה מה חדש למפתחים בגרסה 69 של Chrome.

רוצים לראות את רשימת השינויים המלאה? רשימת השינויים במאגר המקור של Chromium

CSS Scroll Snap

לצפייה בדמו | מקור

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

בקרוסלה של תמונות, מוסיפים את scroll-snap-type: x mandatory; לקונטיינר הגלילה ואת scroll-snap-align: center; לכל תמונה. לאחר מכן, כשהמשתמש גולל בקרוסלה, כל תמונה תגלול בצורה חלקה למיקום המושלם.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

התכונה CSS Scroll Snapping פועלת היטב גם כשיעדי הצמדת הסמן ב-CSS הם בגדלים שונים או כשהם גדולים יותר מחלונית הגלילה. במאמר גלילה מבוקרת באמצעות CSS Scroll Snap מפורט מידע נוסף ומופיעות דוגמאות שאפשר לנסות.

מגרעות במסך (נקראות גם 'חריצים')

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

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

מה קורה אם רוצים להשתמש במרחב המשותף הזה?

עכשיו אפשר לעשות זאת באמצעות משתני סביבה של CSS והמטא תג viewport-fit. לדוגמה, כדי להורות לדפדפן להרחיב את התצוגה לאזור החתוך, מגדירים את הערך cover לנכס viewport-fit במטא תג viewport.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

לאחר מכן תוכלו להשתמש במשתני הסביבה של CSS ב-safe-area-inset-* כדי ליצור את הפריסה של התוכן.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

בבלוג של WebKit יש פוסט מעולה בנושא עיצוב אתרים ל-iPhone X, או אפשר לעיין בהסבר לפרטים נוספים.

Web Locks API

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

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

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

הכרטיסייה הראשונה שתקבל את הנעילה תבצע את סינכרון הנתונים עם הרשת. אם כרטיסייה אחרת תנסה להוסיף את אותה נעילה, היא תתווסף לתור. אחרי שהנעילה תשתחרר, הבקשה הבאה בתור תקבל את הנעילה ותתבצע.

ב-MDN יש חומר עזר מעולה בנושא Web Locks, שכולל הסבר מעמיק יותר והרבה דוגמאות. אפשר גם להיכנס לעומק ולעיין במפרט.

ועוד.

אלה רק כמה מהשינויים ב-Chrome 69 למפתחים, כמובן שיש עוד הרבה.

שינוי הדרגתי חרוט

  • בעזרת מפרט CSS4, עכשיו אפשר ליצור מעברים בין צבעים סביב ההיקף של עיגול באמצעות שעונים קוניים. Lea Verou יצרה CSS conic-gradient() polyfill שאפשר להשתמש בו, והדף כולל המון דוגמאות מגניבות שנשלחו על ידי חברי הקהילה.
  • יש שיטה חדשה toggleAttribute() לאלמנטים שמפעילה או משביתה את קיומו של מאפיין, בדומה ל-classList.toggle().
  • מערכי JavaScript מקבלים שתי שיטות חדשות: flat() ו-flatMap(). הן מחזירות מערך חדש שבו כל הרכיבים של מערכי המשנה מודבקים יחד.
  • ו-OffscreenCanvas מעביר את העבודה מה-thread הראשי ל-worker, וכך עוזר למנוע צווארי בקבוק בביצועים.

ביצי הפתעה

מצאת את כל ביצת הפסחא בסרטון?

תודה מיוחדת לכל האנשים שעזרו לנו ליצור את 28 הפרקים של 'חדש ב-Chrome'. כל אחד מהאנשים האלה מדהים!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

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

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

תודה שצפית!

מה חדש ב-Chrome Bloopers

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

  • כשאני מגמגם, אני משמיע רעשים מוזרים.
  • אני עושה פרצופים ומוציאה לשון.
  • אני זז, הרבה.

להרשמה

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 70 תפורסם, אספר לכם מה חדש ב-Chrome.