חדש ב-Chrome 65

Pete LePage

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

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

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

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

ממשק API של צבע CSS

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

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

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

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

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

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

Server Timing API

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

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

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

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

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

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, רק הילדים המיידיים של מיכל גמיש הופכים לפריטים גמישים.

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

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

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

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

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

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

אני פיט לעמוד, וברגע ש-Chrome 66 יפורסם, אני אספר לכם מה חדש ב-Chrome!