- 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%.
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!