- ב-Chrome 62, network information API שימושי יותר כי הוא מספק מדדי ביצועים בפועל במקום תוצאות תיאורטיות.
- הוספנו תמיכה בגופנים משתנים של OpenType.
- אפשר לתעד שידורי מדיה מרכיבי מדיה ב-HTML.
- יש לי תזכורת מיוחדת לגבי שינוי חשוב שעומד להגיע ב-Chrome 62.
ויש עוד הרבה!
אני Pete LePage. נצלול פנימה ונראה מה חדש למפתחים בגרסה 62 של Chrome.
רוצים לראות את רשימת השינויים המלאה? רשימת השינויים במאגר המקור של Chromium
אינדיקטור של איכות הרשת
Network Information API זמין ב-Chrome כבר זמן מה, אבל הוא מספק רק מהירויות רשת תיאורטיות בהתאם לחיבור של המשתמש. נניח שאתם משתמשים ב-Wi-Fi, אבל מחוברים לנקודה סלולרית לשיתוף אינטרנט (Hotspot) שכוללת רק מהירויות של 2G? ה-API ידווח על חיבור Wi-Fi!
console.log(navigator.connection.type);
> wifi
ב-Chrome 62, ה-API הורחב כדי לספק מדדי ביצועים בפועל של הרשת מהלקוח. אפשר להתאים אישית את התוכן לרשת בעזרת האותות האלה של איכות הרשת. לדוגמה, בחיבורים איטיים מאוד, אפשר לשפר את הביצועים של טעינת הדף על ידי הצגת גרסה מקוצרת.
כדי לפשט את הלוגיקה של האפליקציה, ה-API מחזיר את ביצועי הרשת שנמדדו בהשוואה לחיבור סלולרי. לדוגמה, כשמחוברים לחיבור סיבים מהיר במיוחד, ה-API ידווח על הערך 4G.
console.log(navigator.connection.effectiveType);
> 4G
האותות האלה יהיו זמינים גם ככותרות של בקשות HTTP, והם יופעלו באמצעות רמזים ללקוח. כדאי לעיין בדוגמה ובמפרט כדי לקבל מידע מפורט יותר.
גופנים של משתנים מסוג OpenType
בעבר, גופן אחד הכיל רק מופע אחד של משפחת גופנים, למשל משקל אחד או גובה אחד. אם רוצים להשתמש בגופן רגיל, מודגש ונטוי, צריך לכלול שלושה גופנים נפרדים, וכך להגדיל את עומס הדף.
גופן משתנה מסוג OpenType הוא המקבילה לכמה גופנים נפרדים שאפשר לארוז בצורה קומפקטית בקובץ גופן אחד. שינוי של מאפיין ה-CSS font-variation-settings מאפשר לשנות בקלות את המאפיינים של התמונה, כמו מתיחה, סגנון, משקל ועוד, וכך ליצור מספר אינסופי של וריאציות סגנוניות. עכשיו אפשר לשלב את שלושת הגופנים האלה בקובץ אחד קומפקטי.
.heading {
font-family: "Avenir Next Variable";
font-size: 48px;
font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
font-family: "Avenir Next Variable";
font-size: 24px;
font-variation-settings: 'wght' 400;
}
גופנים משתנים של OpenType מספקים לנו כלי חדש ויעיל ליצירת גופנים רספונסיביים ולהפחתת משקל הדף. למידע נוסף, אפשר לעיין במאמר Introducing OpenType Variable Fonts של ג'ון הודונס (John Hudson).
צילום מדיה מרכיבי DOM
עכשיו אפשר לצלם בזמן אמת תוכן ב-MediaStream ישירות מ-HTMLMediaElements, כמו אודיו ווידאו, באמצעות Media Capture from DOM Elements API.
אחרי שמפעילים את captureStream() ברכיב מדיה של HTML, אפשר לבצע פעולות שונות על התוכן שמשודר, כמו עיבוד, שליחה מרחוק או הקלטה. נסו לדמיין איך תוכלו להשתמש באודיו באינטרנט כדי ליצור איזולטור או קודק קול משלכם. או להעביר את התוכן בסטרימינג לאתר מרוחק באמצעות WebRTC. האפשרויות כמעט אינסופיות.
תוויות 'לא מאובטח' לדפים מסוימים מסוג HTTP
כפי שהודענו בעבר, החל מגרסה 62 של Chrome, כשמשתמש מזין נתונים בדף HTTP, דפדפן Chrome מסמן את הדף בתווית 'לא מאובטח' בסרגל הכתובות. התווית הזו תוצג גם במצב פרטי לכל דפי ה-HTTP.
ופעולות נוספות.
אלה רק כמה מהשינויים ב-Chrome 62 למפתחים, כמובן שיש עוד הרבה.
- Payment Request API זמין עכשיו ב-Chrome ל-iOS.
- אתם יכולים להתחיל ליצור חוויות VR ניסיוניות עשירות בגרסת המקור לניסיון של WebVR.
לאחר מכן, נרשמים לערוץ YouTube שלנו כדי לקבל התראה באימייל בכל פעם שנעלה סרטון חדש.
קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 63 תפורסם, אספר לכם מה חדש ב-Chrome.