חדש ב-Chrome 71

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

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

ויש עוד עוד המון!

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

יומן שינויים

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

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

הצגת שעות יחסיות עם Intl.RelativeTimeFormat()

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

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

ב-Chrome 71 מוצג 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'

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

ציון מיקום עם קו תחתון לטקסט אנכי

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

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

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

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

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

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

החל מגרסה Chrome 71, ה-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 71 יופיע בתוך המפרט של Shadow DOM v1, הדפדפן Chrome 71 מחשב עכשיו את הספציפיות של מחלקות הפסאודו :host() ו-:host-context(), וכן עבור הארגומנטים של ::slotted().

סרטונים של DevSummit ל-Chrome

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

אווה ופיל למדו כמה שיטות לשימוש ב-Service Worker במאמר בניית אפליקציות מהירות ועמידות יותר עם Service Workers.

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

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

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

הרשמה

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

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