חדש ב-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 (שעדיף לחשוב עליה כמיפוי-קיבוץ-צמצום).

היכולת לשלב נתונים בקבוצות מאפשרת למפתחים לחשב מערכי נתונים מסדר גבוה יותר. לדוגמה, הגיל הממוצע של קבוצת משתמשים או ערכי LCP יומיים לדף אינטרנט.

האפשרות 'קיבוץ מערכים' מאפשרת את התרחישים האלה על ידי הוספת ה-methods הסטטיות Object.groupBy ו-Map.groupBy.

‫groupBy קוראת לפונקציית קריאה חוזרת שסופקה פעם אחת לכל רכיב בפריט שניתן לחזרה. פונקציית הקריאה החוזרת צריכה להחזיר מחרוזת או סמל שמציינים את הקבוצה של הרכיב המשויך.

בדוגמה הבאה, מתוך התיעוד של MDN, יש מערך של מוצרים עם ה-method‏ 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.

שיפרנו את השימוש בשינויים מקומיים מברירת המחדל בכלי הפיתוח.

התכונה local overrides עברה שיפורים, ועכשיו אפשר לדמות בקלות כותרות תגובה ותוכן אינטרנט של משאבים מרוחקים מהחלונית Network בלי לגשת אליהם.

כדי לשנות תוכן אינטרנט, פותחים את החלונית Network (רשת), לוחצים לחיצה ימנית על בקשה ובוחרים באפשרות Override content (שינוי תוכן).

אפשרויות הביטול בתפריט הנפתח של בקשה.

אם הגדרתם שינויים מקומיים אבל השבתתם אותם, כלי הפיתוח יפעיל אותם. אם עדיין לא הגדרתם אותם, תוצג לכם הנחיה בסרגל הפעולות בחלק העליון של DevTools. בוחרים תיקייה שבה יישמרו השינויים מברירת המחדל ומאפשרים ל-DevTools גישה אליה.

בוחרים תיקייה ומאשרים גישה אליה בסרגל הפעולות בחלק העליון.

אחרי שמגדירים את ההחלפות, כלי הפיתוח מעבירים אתכם אל מקורות > החלפות > עורך כדי לאפשר לכם להחליף תוכן אינטרנט.

שימו לב: המשאבים שהוגדרו מחדש מסומנים בסימן נשמרו. בחלונית Network. כדי לראות מה בוטל, מעבירים את העכבר מעל הסמל.

סמל של שינוי ברירת מחדל לצד בקשה בחלונית 'רשת'.

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

ועוד!

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

קריאה נוספת

המידע הזה כולל רק נקודות עיקריות. בקישורים שלמטה מפורטים שינויים נוספים ב-Chrome 117.

הרשמה

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

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