חדש ב-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. 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.

ופעולות נוספות.

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

קריאה נוספת

המאמר הזה מתייחס רק לחלק מההדגשות העיקריות. בדקו בקישורים שבהמשך אם יש שינויים נוספים ב-Chrome 117.

להרשמה

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

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