جدید در کروم 117

آدریانا خارا

در اینجا چیزی است که شما باید بدانید:

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در 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 روزانه برای یک صفحه وب.

گروه بندی آرایه با افزودن متدهای استاتیک 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 را بررسی کنید.

و بیشتر!

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

در ادامه مطلب

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

مشترک شوید

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

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