עברו עשר שנים מאז שהושק לראשונה. הרבה השתנה מאז, אבל המטרה שלנו היא לבנות בסיס איתן ליישומי אינטרנט מודרניים!
ב-Chrome 69 הוספנו תמיכה עבור:
- התכונה CSS Scroll Snap מאפשרת ליצור חוויית גלילה חלקה, חלקה.
- בעזרת חיתוך התצוגה תוכלו להשתמש בכל השטח של המסך, כולל חריץ מאחורי החיתוך במסך.
- ה-Web Locks API מאפשר לקבל נעילה באופן אסינכרוני, להחזיק אותה בזמן ביצוע העבודה ולשחרר אותה.
ויש עוד עוד המון!
שמי Pete LePage. בואו נראה מה חדש למפתחים ב-Chrome 69.
רוצה לקבל את רשימת השינויים המלאה? כדאי לעיין ברשימת השינויים במאגרי המקור ב-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' פועלת היטב, גם כשליעדי Snap יש גדלים שונים או כשהם גדולים יותר מלחצן הגלילה! קראו את הפוסט גלילה מבוקרת עם CSS Scroll Snap כדי לקבל עוד פרטים ודוגמאות שתוכלו לנסות!
גזירי תצוגה (שנקראים גם חריצים)
יש יותר ויותר מכשירים ניידים שמשתחררים עם חיתוך תצוגה, שנקרא לפעמים חריץ. כדי להתמודד עם זה, הדפדפנים מוסיפים שוליים נוספים לדף כדי שהתוכן לא יוסתר על ידי החריץ.
אבל מה עושים אם רוצים להשתמש בשטח הזה?
עכשיו אפשר להשתמש במשתני הסביבה של CSS ובמטא תג 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 על עיצוב אתרים ל-iPhone X, או לקרוא את המסביר כדי לקבל פרטים נוספים.
ממשק API של Web Locks
ה-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 יש תיאור מפורט של מנעולי אינטרנט, והוא כולל הסבר מפורט יותר והרבה דוגמאות. אפשר גם להתעמק בנתונים ולבדוק את spec.
ועוד!
אלה רק כמה מהשינויים שב-Chrome 69 למפתחים, כמובן, ויש עוד הרבה יותר.
- במפרט CSS4, באמצעות הדרגתיות של צבעי היסוד תוכלו ליצור מעברי צבעים סביב היקף המעגל.
Lea Verou כולל פוליפיל של CSS
conic-gradient()שתוכלו להשתמש בו, והדף כולל כמה דוגמאות ממש מגניבות שנשלחו על ידי הקהילה. - קיימת שיטה חדשה
toggleAttribute()לרכיבים שמשנה את הקיום של מאפיין, בדומה ל-classList.toggle(). - למערכי JavaScript יש שתי שיטות חדשות:
flat()ו-flatMap(). הן מחזירות מערך חדש שכל רכיבי מערך המשנה מוחלקים אליו. - ו-
OffscreenCanvasמעביר את העבודה מה-thread הראשי לעובד, כדי למנוע צווארי בקבוק בביצועים.
ביצי הפתעה
האם מצאת את כל ביצי ההפתעה בסרטון?
- חוברת הקומיקס של Chrome
- רצועות כרום
- תותח תפוחי אדמה
- מפלצת פטה
- דינוזאור עץ מ-CDS 2017
תודה מיוחדת לכל האנשים שעזרו ליצור את 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!