חדש ב-Chrome 65

Pete LePage

• באמצעות CSS Paint API אפשר ליצור תמונה באופן פרוגרמטי.
• Server Timing API מאפשר לשרתים של אתרים לספק מידע על תזמון הביצועים באמצעות כותרות HTTP.
• מאפיין display: contents של שירות ה-CSS החדש יכול לגרום לתיבות להיעלם.

ויש עוד הרבה!

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

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

CSS Paint API

באמצעות CSS Paint API אפשר ליצור באופן פרוגרמטי תמונה לנכסי CSS כמו background-image או border-image.

במקום להפנות לתמונה, אפשר להשתמש בפונקציית הציור החדשה כדי לצייר את התמונה – בדומה לרכיב בד.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

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

זוהי גם שיטה יעילה למילוי פוליגונים של תכונות CSS שעדיין לא נתמכות בדפדפן.

בפוסט ההסבר של Surma יש כמה הדגמות.

Server Timing API

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

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

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

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

הם מוצגים ב-Chrome DevTools, או שאפשר לחלץ אותם מכותרת התגובה ולשמור אותם עם שאר ניתוחי הביצועים.

display: contents

נכס ה-CSS החדש display: contents מגניב למדי!

כשהאלמנט מתווסף לאלמנט מאגר, כל הצאצאים תופסים את מקומו ב-DOM, והוא למעשה נעלם. נניח שיש לי שני נכסים של div, אחד בתוך השני. ל-div החיצוני יש גבול אדום, רקע אפור והגדרתי לו רוחב של 200 פיקסלים. ל-div הפנימי יש מסגרת כחולה ורקע כחול בהיר.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

כברירת מחדל, ה-div הפנימי נכלל ב-div החיצוני.

אני ה-<div> הפנימי

הוספה של display: contents ל-div החיצוני, גורמת ל-div החיצוני להיעלם והמגבלות שלו לא חלות יותר על div הפנימי. div הפנימי הוא עכשיו ברוחב 100%.

משתמשים בכלי הפיתוח כדי לבדוק את ה-DOM, ומבחינים ש-div החיצוני עדיין קיים.

יש הרבה מקרים שבהם האפשרות הזו יכולה להיות שימושית, אבל המקרה הנפוץ ביותר הוא עם flexbox. ב-Flexbox, רק הצאצאים המיידיים של קונטיינר Flex הופכים לפריטי Flex.

עם זאת, אחרי שמחילים את display: contents על רכיב צאצא, רכיבי הצאצא הופכים לפריטים גמישים והפריסה שלהם מתבצעת לפי אותם כללים שחלים על ההורה.

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

ופעולות נוספות.

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

• התחביר לציון הערכים HSL ו-HSLA, והקואורדינטות RGB ו-RGBA של מאפיין הצבע תואמים עכשיו למפרט CSS Color 4.
• יש מדיניות תכונה חדשה שמאפשרת לשלוט בבקשות XHR סינכרוניות באמצעות כותרת HTTP או באמצעות המאפיין allow של iframe.

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

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