ویژگی‌های جدید در Chrome 117

Adriana Jara

آنچه باید بدانید:

• سه ویژگی جدید CSS اضافه کردن پویانمایی‌های ورود و خروج روان را آسان می‌کند.
• مجموعه‌های داده مرتبه بالاتر را با گروه‌بندی آرایه محاسبه کنید.
• ‫DevTools جای‌گزینی‌های محلی را آسان‌تر می‌کند.
• و بسیاری دیگر وجود دارد.

من آدریانا خارا هستم. بیایید نگاهی به ویژگی‌های جدید توسعه‌دهندگان در 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 ساده‌سازی شده است.

ویژگی ملغی کردن‌های محلی اکنون ساده‌سازی شده است، بنابراین می‌توانید به‌راحتی سرایندهای پاسخ و محتوای وب منابع راه‌دور را از پانل شبکه بدون دسترسی به آن‌ها شبیه‌سازی کنید.

برای ملغی کردن محتوای وب، پانل شبکه را باز کنید، روی درخواست کلیک راست کنید، و ملغی کردن محتوا را انتخاب کنید.

اگر جای‌گزین‌های محلی راه‌اندازی کرده‌اید اما غیرفعال است، DevTools آن‌ها را فعال می‌کند. اگر هنوز آن‌ها را راه‌اندازی نکرده‌اید، DevTools در نوار کنش در بالا از شما می‌خواهد این کار را انجام دهید. پوشه‌ای را برای ذخیره کردن ملغی‌ها انتخاب کنید و به DevTools اجازه دهید به آن دسترسی داشته باشد.

پس‌از راه‌اندازی جایگزین‌ها، DevTools شما را به منابع > جایگزین‌ها > ویرایشگر می‌برد تا به شما امکان دهد محتوای وب را جایگزین کنید.

توجه داشته باشید که منابع ملغی‌شده با در پانل شبکه نشان داده می‌شوند. نشانگر را روی نماد نگه دارید تا ببینید چه چیزی ملغی شده است.

برای جزئیات کامل و اطلاعات بیشتر درباره DevTools در Chrome 117، تازه‌های DevTools را بررسی کنید.

و موارد دیگر!

البته موارد بیشتری هم وجود دارد.

• مقدار subgrid که برای grid-template-columns و grid-template-rows بسیار موردانتظار بود اکنون در Chrome پیاده‌سازی شده است.

• یک WebSQL دوره آزمایشی ویژگی منسوخ و یک دوره آزمایشی توسعه‌دهنده برای unload منسوخ شدن رویداد وجود دارد.

مطالعه بیشتر

این فقط برخی‌از نکات کلیدی را پوشش می‌دهد. برای تغییرات بیشتر در Chrome 117، پیوندهای زیر را بررسی کنید.

• ویژگی‌های جدید در Chrome DevTools (۱۱۷)
• منسوخ شدن و برداشته شدن موارد در Chrome 117
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 117
• فهرست تغییرات مخزن منبع Chromium
• تقویم انتشار Chrome

مشترک شدن

برای به‌روز ماندن، در کانال YouTube «توسعه‌دهندگان Chrome» مشترک شوید، و هر زمان که ویدیو جدیدی راه‌اندازی کنیم، اعلان ایمیلی دریافت خواهید کرد.

من آدریانا خارا هستم و به‌محض انتشار Chrome 117، همین‌جا خواهم بود تا به شما بگویم ویژگی‌های جدید Chrome چیست!