חדש ב-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 החיצוני.

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

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

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

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

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

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

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

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

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