جدید در کروم 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. 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 و برنامه نویسی MapReduce استفاده می کنیم (که بهتر است به عنوان نقشه-گروه-کاهش در نظر گرفته شود).

توانایی ترکیب داده ها در گروه ها به توسعه دهندگان این امکان را می دهد که مجموعه داده های مرتبه بالاتر را محاسبه کنند. به عنوان مثال، میانگین سنی یک گروه یا مقادیر LCP روزانه برای یک صفحه وب.

گروه بندی آرایه با افزودن متدهای استاتیک Object.groupBy و Map.groupBy این سناریوها را فعال می کند.

groupBy یک تابع برگشتی ارائه شده را یک بار برای هر عنصر در یک تکرار فراخوانی می کند. تابع callback باید رشته یا نمادی را برگرداند که گروه عنصر مرتبط را نشان می دهد.

در مثال زیر، از مستندات 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 ساده شده است.

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

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

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

پس از تنظیم موارد لغو، DevTools شما را به Sources > Overrides > Editor می برد تا به شما امکان می دهد محتوای وب را لغو کنید .

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

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

و بیشتر!

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

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

• یک آزمایش انحرافی WebSQL و یک آزمایش توسعه‌دهنده برای حذف رویداد unload وجود دارد.

بیشتر خواندن

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

• موارد جدید در Chrome DevTools (117)
• لغو و حذف Chrome 117
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 117
• فهرست تغییر مخزن منبع Chromium
• تقویم انتشار کروم

اشتراک در

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

Yo soy Adriana Jara، و به محض اینکه Chrome 117 منتشر شد، من اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!