חדש ב-Chrome 62

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

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

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

רוצה לקבל את רשימת השינויים המלאה? כדאי לעיין ברשימת השינויים במאגרי המקור ב-Chromium.

אינדיקטור של איכות הרשת

Network Information API זמין ב-Chrome כבר זמן מה, אבל הוא מספק רק מהירויות רשת תיאורטיות, בהתאם לחיבור של המשתמש. נניח שאתם משתמשים ב-Wi-Fi, אבל מחוברים לנקודה סלולרית לשיתוף אינטרנט עם מהירויות של 2G בלבד? ה-API ידווח על Wi-Fi!

console.log(navigator.connection.type);
> wifi

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

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

console.log(navigator.connection.effectiveType);
> 4G

האותות יהיו זמינים גם ככותרות של בקשות HTTP ויופעלו דרך רמזים ללקוחות. את הדוגמה תוכלו לקרוא בspec כדי להבין את הנתונים יותר לעומק.

גופנים של משתנים מסוג OpenType

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

גופן משתנה מסוג OpenType מקביל למספר גופנים נפרדים שניתן לארוז קומפקטים בקובץ גופן יחיד. בעזרת שינויים במאפיין font-variation-settings, ניתן לשנות בקלות את מאפיין ה-CSS, מתיחה, סגנון, משקל ועוד, וכך יש מספר אינסופי של וריאציות עיצוביות. עכשיו אפשר לשלב את שלושת הגופנים האלה לקובץ קומפקטי אחד.

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

תיעוד מדיה מרכיבי DOM

עכשיו תוכלו לצלם תוכן ב-MediaStream ישירות מ-HTMLMediaElements, כמו אודיו ווידאו, באמצעות Media Capture מ-DOM Elements API.

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

תוויות לא מאובטחות בחלק מדפי ה-HTTP

כפי שהודענו בעבר, החל מגרסה 62 של Chrome, כשמשתמש יזין נתונים בדף HTTP, Chrome יסמן את הדף כ "לא מאובטח" באמצעות תווית בסרגל הכתובות. התווית הזו תוצג גם במצב פרטי בכל דפי ה-HTTP.

ועוד!

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

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

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