חדש ב-Chrome 71

Pete LePage

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

ויש עוד הרבה!

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

יומן שינויים

זהו רק חלק מהשינויים העיקריים. בקישורים שבהמשך מפורטים שינויים נוספים ב-Chrome 71.

הצגת זמנים יחסיים עם Intl.RelativeTimeFormat()

Twitter מראה זמן יחסי לפרסום האחרון

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

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

בגרסה 71 של Chrome הוספנו את Intl.RelativeTimeFormat(), שמעבירה את העבודה למנוע JavaScript ומאפשרת עיצוב מקומי של זמני יחסיים. זה נותן לנו שיפור קטן בביצועים, וכתוצאה מכך אנחנו צריכים את הספריות האלה רק כ-polyfill אם הדפדפן עדיין לא תומך בממשקי ה-API החדשים.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

השימוש בו פשוט: יוצרים מכונה חדשה ומציינים את האזור, ואז פשוט קוראים ל-format עם הזמן היחסי. פרטים מלאים זמינים במאמר של Mathias, The Intl.RelativeTimeFormat API.

ציון מיקום הקו התחתון בטקסט אנכי

טקסט אנכי עם קווים תחתונים לא עקביים

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

ב-Chrome 71, המאפיין text-underline-position מקבל עכשיו את הערכים left או right כחלק מהמפרט של CSS3 לקישוט טקסט. במפרט של CSS3 לקישוט טקסט נוספו כמה מאפיינים חדשים שמאפשרים לציין פרטים כמו סוג הקו, הסגנון, הצבע והמיקום.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

כדי להשתמש בסינתזת דיבור נדרשת הפעלה של המשתמש

כולנו הופתענו כשנכנסנו לאתר והוא התחיל לדבר אלינו. מדיניות ההפעלה האוטומטית מונעת מאתרים להפעיל באופן אוטומטי קבצי אודיו או קבצי וידאו עם אודיו. בחלק מהאתרים ניסו לעקוף את הבעיה הזו באמצעות שימוש ב-Speech Synthesis API במקום זאת.

החל מגרסה 71 של Chrome, כדי ש-Speech Synthesis API יפעל, צריך לבצע פעולה כלשהי של המשתמש בדף. כך הוא עומד בדרישות של מדיניות ההפעלה האוטומטית. אם תנסו להשתמש בו לפני שהמשתמש יצר אינטראקציה עם הדף, תוצג הודעת שגיאה.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

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

ועוד.

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

סרטונים מ-Chrome DevSummit

אם לא הגעתם למפגש הפסגה של מפתחי Chrome, או שאולי כן הגעתם אליו, אבל לא צפיתם בכל הדיונים, מומלץ לצפות בפלייליסט של Chrome Dev Summit לשנת 2018 בערוץ שלנו ב-YouTube.

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

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

קייטי והוסיין דיברו על כמה טכניקות מעולות שיעזרו לכם למקסם את ביצועי האתר במאמר Essentials Essentials: טכניקות מרכזיות לאתרים מהירים.

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

להרשמה

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

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