חדש ב-Chrome 117

Adriana Jara

דברים שעליך לדעת:

אני אדריאנה ג'ארה. אנחנו מזמינים אותך לבחון את התכונות החדשות ולראות מה חדש למפתחים ב-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.

ועוד.

כמובן שיש עוד הרבה.

קריאה נוספת

הסיכום מכסה רק חלק מהעדכונים העיקריים. בקישור הבא מפורטים שינויים נוספים בגרסה 117 של Chrome.

להרשמה

כדי להישאר מעודכנים, אפשר להירשם ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.

קוראים לי Adriana Jara, ואחרי שגרסת Chrome 117 תפורסם, אספר לכם מה חדש ב-Chrome!