- 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
עכשיו למאפיין color תואמים ל- המפרט של CSS Color 4. - יש מדיניות חדשה בנושא תכונות שמאפשרת
לשלוט ב-XHR סינכרוניים באמצעות כותרת HTTP או
מאפיין
allow
ב-iframe.
כדאי לעיין בכלי פיתוח חדשים ל-Chrome, לומדים מה חדש בכלי הפיתוח ב-Chrome 65. ואם רוצים Progressive Web Apps, כדאי לבדוק את הגרסה החדשה סדרת סרטונים של PWA של Roadshow. לאחר מכן לחצו על הלחצן הרשמה ערוץ YouTube, וגם אתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.
אני פיט לעמוד, וברגע ש-Chrome 66 יפורסם, אני כדי לספר לך – מה חדש ב-Chrome!