חדש ב-Chrome 117

Adriana Jara

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

• שלוש תכונות חדשות ב-CSS מאפשרות להוסיף בקלות אנימציות של כניסה ויציאה בצורה חלקה.
• מחשבים מערכי נתונים מסדר גבוה יותר באמצעות קיבוץ מערך.
• כלי הפיתוח מאפשרים לבצע שינויים מקומיים בקלות רבה יותר.
• ויש עוד הרבה עוד.

אני אדריאנה ג'ארה. אנחנו מזמינים אותך לבחון מה חדש אצל המפתחים בגרסה 117 של Chrome.

תכונות 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;
}

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

קיבוץ מערך

בתכנות, קיבוץ מערכים הוא פעולה נפוצה מאוד, ובדרך כלל אנחנו משתמשים במשפט GROUP BY ובתכנות MapReduce של SQL (שעדיף להתייחס אליו כאל הפחתה של קבוצת מיפויים).

היכולת לשלב נתונים בקבוצות מאפשרת למפתחים לחשב מערכי נתונים מסדר גבוה יותר. לדוגמה, הגיל הממוצע של קבוצה בעלת מאפיינים משותפים, או ערכי 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.

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

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

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

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

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

שימו לב שהמשאבים שבוטלו מסומנים באמצעות בחלונית רשת. מעבירים את העכבר מעל הסמל כדי לראות מה השתנה.

כל הפרטים ומידע נוסף על כלי הפיתוח ב-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, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.

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