דברים שעליך לדעת:
- שלוש תכונות חדשות ב-CSS מאפשרות להוסיף בקלות אנימציות של כניסה ויציאה בצורה חלקה.
- מחשבים מערכי נתונים מסדר גבוה יותר באמצעות קיבוץ מערך.
- כלי הפיתוח מאפשרים לבצע בקלות שינויים מקומיים.
- ויש עוד הרבה יותר.
אני אדריאנה ג'ארה. אנחנו מזמינים אותך לבחון את התכונות החדשות ולראות מה חדש למפתחים ב-Chrome 117.
תכונות CSS חדשות לאנימציות כניסה ויציאה.
שלוש תכונות ה-CSS החדשות האלה משלימות את הסביבה ומוסיפים בקלות אנימציות של כניסה ויציאה, וליצור אנימציה חלקה אל השכבה העליונה של הרכיבים, כמו תיבות דו-שיח וחלונות קופצים, וממנה אותם.
התכונה הראשונה היא transition-behavior
. כדי להעביר מאפיינים נפרדים, כמו display
, צריך להשתמש בערך allow-discrete
של transition-behavior
.
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
לאחר מכן, הכלל @starting-style
משמש ליצירת אנימציה של אפקטים של כניסה מ-display: none
אל השכבה העליונה. משתמשים ב-@starting-style
כדי להחיל סגנון שהדפדפן יכול לחפש לפני שהרכיב נפתח בדף.
/* 0. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 1. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
לסיום, כדי לבצע יציאה הדרגתית של popover
או dialog
מהשכבה העליונה, מוסיפים את הנכס overlay
לרשימת המעברים. כדאי לכלול שכבת-על במעבר או באנימציה כדי להוסיף אנימציה לשכבת-על יחד עם שאר התכונות, ולוודא שהיא תישאר בשכבה העליונה בזמן האנימציה. התמונה תהיה חלקה יותר.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
במאמר ארבע תכונות CSS חדשות ליצירת אנימציות חלקות של כניסה ויציאה מוסבר איך להשתמש בתכונות האלה כדי לשפר את חוויית המשתמש עם תנועה.
קיבוץ של מערך
בתכנות, קיבוץ מערכי נתונים הוא פעולה נפוצה מאוד, שמופיעה לרוב כשמשתמשים בתנאי GROUP BY של SQL ובתכנות MapReduce (שעדיף לחשוב עליו כ-map-group-reduce).
היכולת לשלב נתונים בקבוצות מאפשרת למפתחים לחשב מערכי נתונים מסדר גבוה יותר. לדוגמה, הגיל הממוצע של קבוצה בעלת מאפיינים משותפים, או ערכי LCP יומיים של דף אינטרנט.
קיבוץ המערך מאפשר את התרחישים האלה על ידי הוספת השיטות הסטטיות Object.groupBy
ו-Map.groupBy
.
הפונקציה groupBy
מפעילה את פונקציית הקריאה החוזרת פעם אחת לכל רכיב שאפשר לבצע איטרציה. פונקציית הקריאה החוזרת צריכה להחזיר מחרוזת או סמל שמציין את הקבוצה של הרכיב המשויך.
בדוגמה הבאה, מתוך מסמכי התיעוד של MDN, מוצגת מערך של מוצרים עם השיטה groupBy
שמשמשת להחזרתם מקובצים לפי סוג.
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
פרטים נוספים זמינים במסמכי התיעוד של groupBy
.
שינוי ערכים מקומיים פשוט יותר ב-DevTools.
התכונה שינויים מקומיים עברה אופטימיזציה, כך שאפשר לדמות בקלות כותרות תגובה ותוכן אינטרנט של משאבים מרוחקים מהחלונית רשת בלי לגשת אליהם.
כדי לשנות את תוכן האינטרנט, פותחים את החלונית Network, לוחצים לחיצה ימנית על בקשה ובוחרים באפשרות Override content.
אם הגדרתם שינויים מקומיים מברירת המחדל אבל השבתתם אותם, כלי הפיתוח מפעילים אותם. אם עדיין לא הגדרתם אותם, תופיע בקשה לעשות זאת בסרגל הפעולות בחלק העליון. צריך לבחור תיקייה כדי לשמור בה את השינויים מברירת המחדל ולאפשר לכלי הפיתוח לגשת אליה.
אחרי שמגדירים את ההחרגות, תועברו ל-DevTools בקטע מקורות > החרגות > עריכה כדי לשנות את תוכן האינטרנט.
שימו לב שהמשאבים ששונו מסומנים ב- בחלונית Network. מעבירים את העכבר מעל הסמל כדי לראות מה בוטל.
במאמר מה חדש בכלי הפיתוח מפורטים כל הפרטים ומידע נוסף על כלי הפיתוח ב-Chrome 117.
ועוד.
כמובן שיש עוד הרבה.
הערך
subgrid
שכולנו חיכינו לו עבורgrid-template-columns
ו-grid-template-rows
מוטמע עכשיו ב-Chrome.יש תקופת ניסיון של
WebSQL
להוצאה משימוש ותקופת ניסיון למפתחים עבור ההוצאה משימוש של אירועunload
.
קריאה נוספת
הסיכום מכסה רק חלק מהעדכונים העיקריים. בקישור הבא מפורטים שינויים נוספים בגרסה 117 של Chrome.
- מה חדש בכלי הפיתוח ל-Chrome (117)
- תכונות שהוצאו משימוש והוסרו ב-Chrome 117
- עדכונים ב-ChromeStatus.com לגבי Chrome 117
- רשימת השינויים במאגר המקור של Chromium
- יומן הגרסאות של Chrome
להרשמה
כדי להישאר מעודכנים, אפשר להירשם ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.
קוראים לי Adriana Jara, ואחרי שגרסת Chrome 117 תפורסם, אספר לכם מה חדש ב-Chrome!