חדש ב-Chrome 69

Pete LePage

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

ב-Chrome 69, הוספנו תמיכה ב:

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

ויש עוד הרבה!

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

רוצים לראות את רשימת השינויים המלאה? אפשר לעיין ברשימת השינויים במאגר המקור של 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 פועלת היטב, גם כשמטרות ההצמדה הן בגדלים שונים או כשהן גדולות יותר מאזור הגלילה. פרטים נוספים ודוגמאות שאפשר לנסות זמינים בפוסט Well-Controlled Scrolling with CSS Scroll Snap.

מגרעות במסך

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

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

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

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

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

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

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

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

קוראים לי פיט לה-פייג', וברגע שגרסה 70 של Chrome תושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome.