דברים שעליך לדעת:
- שלוש תכונות 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. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. 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;
}
/* 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 ובתכנות MapDecrease (שכדאי לחשוב עליו בתור 'צנזור קבוצת-מפה').
היכולת לשלב נתונים בקבוצות מאפשרת למפתחים לחשב מערכי נתונים מסדר גבוה יותר. לדוגמה, הגיל הממוצע של קבוצה בעלת מאפיינים משותפים או ערכי 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
.
השינויים המקומיים עוברים אופטימיזציה בכלי הפיתוח.
התכונה שינויים מקומיים יעילה עכשיו, כך שאפשר לדמות בקלות כותרות תגובות ותוכן אינטרנט של משאבים מרוחקים מהחלונית רשת ללא גישה אליהם.
כדי לשנות תוכן מהאינטרנט, פותחים את החלונית רשת, לוחצים לחיצה ימנית על בקשה ובוחרים באפשרות שינוי תוכן.
אם הגדרתם שינויים מקומיים, אבל הם מושבתים, כלי הפיתוח מפעילים אותם. אם עדיין לא הגדרתם, תופיע הצגת בקשה בכלי הפיתוח בסרגל הפעולות שבחלק העליון. צריך לבחור תיקייה שבה יישמרו השינויים מברירת המחדל ולאפשר לכלי הפיתוח לגשת אליה.
אחרי שמגדירים את השינויים מברירת המחדל, כלי הפיתוח מעבירים אתכם אל מקורות > שינויים מברירת המחדל > עורך כדי לבצע עקיפה של תוכן מהאינטרנט.
חשוב לשים לב שהמשאבים שבוטלו מסומנים ב- בחלונית רשת. מעבירים את העכבר מעל לסמל כדי לראות את השינויים שבוצעו.
כדאי לעיין במאמר מה חדש בכלי הפיתוח כדי לקבל את כל הפרטים ומידע נוסף על כלי הפיתוח ב-Chrome 117.
ופעולות נוספות.
כמובן שיש עוד המון אפשרויות.
הערך הצפוי של
subgrid
עבורgrid-template-columns
ו-grid-template-rows
מוטמע עכשיו ב-Chrome.יש תקופת ניסיון להוצאה משימוש של
WebSQL
ותקופת ניסיון למפתחים עבור ההוצאה משימוש של האירועunload
.ה-API של
notRestoredReasons
למטמון לדף הקודם/הבא, שהוזכר בסרטון לגבי Chrome 116, אמור לפעול בגרסה הזו.
קריאה נוספת
המאמר הזה מתייחס רק לחלק מההדגשות העיקריות. בדקו בקישורים שבהמשך אם יש שינויים נוספים ב-Chrome 117.
- מה חדש בכלי הפיתוח ל-Chrome (117)
- מוציאים משימוש והסרות של Chrome 117
- עדכונים ל-ChromeStatus.com בגרסה 117 של Chrome
- רשימת שינויים במאגרי מקורות של Chromium
- יומן ההפצה של Chrome
להרשמה
כדי להתעדכן, הירשמו לערוץ YouTube של מפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.
יו סויה אדריאנה ג'ארה, ומיד כש-Chrome 117 יושק, אהיה כאן כדי לספר לך מה חדש ב-Chrome!