חדש ב-Chrome 65

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

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

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

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

API ל-CSS Paint

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 שעדיין לא נתמכות בדפדפן.

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

ממשק API לתזמון שרת

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

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

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

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

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


display: contents

הנכס החדש display: contents ב-CSS פשוט יפה!

כשמוסיפים אותו לרכיב קונטיינר, כל צאצאים תופסים מקום ב-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!