در اینجا چیزی است که شما باید بدانید:
- سه ویژگی جدید 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 استفاده می کنیم (که بهتر است به عنوان نقشه-گروه-کاهش در نظر گرفته شود).
توانایی ترکیب داده ها در گروه ها به توسعه دهندگان این امکان را می دهد که مجموعه داده های مرتبه بالاتر را محاسبه کنند. به عنوان مثال، میانگین سنی یک گروه یا مقادیر 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 وجود دارد!