חדש ב-Chrome 71

Pete LePage

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

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

ויש עוד הרבה!

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

יומן שינויים

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

• רשימת השינויים במאגר המקור של Chromium
• עדכונים ב-ChromeStatus.com לגבי Chrome 71
• תכונות שהוצאו משימוש והתכונות שהוסרו מ-Chrome 71

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

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

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

• עכשיו אפשר להתאים אישית את השיטה Element.requestFullscreen() ב-Android, ולבחור אם סרגל הניווט יהיה גלוי או אם יוצג מצב צפייה מלא שבו לא יוצגו אמצעי הבקרה של סוכן המשתמש עד שהמשתמש יבצע תנועה.
• מצב ברירת המחדל של פרטי הכניסה לבקשות של סקריפטים של מודולים השתנה מ-omit ל-same-origin.
• כדי להתאים את Chrome למפרט של Shadow DOM v1, בגרסה 71 של Chrome מחושב עכשיו הספציפיות של קטגוריות הפסאודו :host() ו-:host-context(), וגם של הארגומנטים של ::slotted().

סרטונים מ-Chrome DevSummit

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

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

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

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

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

להרשמה

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

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