חדש ב-Chrome 69

Pete LePage

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

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

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

ויש עוד הרבה!

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

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

צילום מסך של גלילה ב-CSS

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

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, ותקבל התראה באימייל בכל פעם שנשיק סרטון חדש.

אני פיט לעמוד, וברגע ש-Chrome 70 יושק, אני כאן כדי לספר לך מה חדש ב-Chrome!