جدید در کروم 129

پیت لی پیج

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

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 129 جدید است.

کارهای طولانی را با scheduler.yield() جدا کنید

کارهای طولانی توانایی مرورگر را برای پاسخگویی به ورودی کاربر به تاخیر می اندازد، این تصور را ایجاد می کند که سایت کند است و بر معیارهای عملکرد حیاتی مانند INP تأثیر می گذارد. با scheduler.yield() می‌توانید وظایف طولانی را به تکه‌های کوچک‌تر تقسیم کنید و با تسلیم صریح به رشته اصلی، واکنش‌پذیری را بهبود ببخشید.

این به شما امکان می دهد به مرورگر بگویید:

"هی! کاری که قرار است انجام دهم ممکن است مدتی طول بکشد، اگر لازم است یک قاب را نقاشی کنید، به ورودی کاربر پاسخ دهید یا کارهای مهم دیگری داشته باشید، اشکالی ندارد، می توانم صبر کنم."

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

خط زیر را مرتباً به کد جاوا اسکریپت خود اضافه کنید تا به مرورگر فضای تنفسی بدهید و از مشکلات INP جلوگیری کنید.

await scheduler.yield();

مهمتر از همه، این اجازه می دهد تا ادامه کد شما اولویت بندی شود تا با تسلیم شدن ضرر نکنید. ما استفاده آزادانه از scheduler.yield() را در توابع بین هر تکه بزرگ‌تری از کار توصیه می‌کنیم.

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

انیمیشن هایی با اندازه های ذاتی

انیمیشن‌های CSS بسیار شیرین هستند، اما معمولاً به اندازه‌های واضحی نیاز دارند، شما نمی‌توانید از کلمات کلیدی اندازه‌گذاری ذاتی مانند auto ، min-content یا fit-content استفاده کنید.

ویژگی CSS interpolate-size مجموعه جدیدی از انیمیشن ها را باز می کند که در هنگام استفاده از کلمات کلیدی اندازه ذاتی امکان پذیر نبودند.

بدون interpolate-size ، دکمه‌های ویدیوی زیر هیچ انتقالی ندارند.

پس از افزودن interpolate-size: allow-keywords ، دکمه‌های موجود در ویدیو جلوه انیمیشن انتقال زیبایی را دریافت می‌کنند.

تعیین interpolate-size: allow-keywords در عنصر root رفتار جدید را برای کل صفحه تنظیم می کند. پیشنهاد می‌کنیم هر زمان که سازگاری مشکلی ندارد، این کار را انجام دهید.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

برای کنترل دقیق‌تر، تابع calc-size() CSS، مشابه calc() از عملیات دقیقاً بر روی یکی از کلیدواژه‌های اندازه ذاتی پشتیبانی شده پشتیبانی می‌کند. هنگام انجام محاسبات چیدمان، کلمه کلیدی size به اندازه اصلی calc-size-basis ارزیابی می شود.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

بررسی انیمیشن به ارتفاع: خودکار. (و سایر کلمات کلیدی اندازه گیری ذاتی) در CSS برای جزئیات کامل.

تغییرات در موقعیت یابی لنگر CSS

موقعیت یابی لنگر CSS در کروم 125 فرود آمد، اما پس از بحث های بیشتر در گروه کاری CSS، چند تغییر در مشخصات و پیاده سازی وجود دارد. اگر در حال حاضر از موقعیت لنگر CSS استفاده می کنید، باید کد خود را در اسرع وقت به روز کنید.

ابتدا، inset-area به position-area تغییر نام داده است. این ترجیح داده می شود زیرا عبارت position- به شما کمک می کند به یاد داشته باشید که این ویژگی برای عنصر موقعیتی اعمال می شود، نه عنصر لنگر.

دوم، position-try-options به position-try-fallbacks تغییر نام داده است. این به شما کمک می کند به یاد داشته باشید که اینها فقط بازگشتی به موقعیت اولیه هستند که توسط سبک های پایه تعیین می شود.

در نهایت، نحو تابعی inset-area() در حال حذف از position-try است. بنابراین از position-try-fallbacks: top به جای position-try-fallbacks: inset-area(top) .

و بیشتر!

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

یک روش جدید Intl برای قالب‌بندی مدت زمان وجود دارد که از چندین منطقه پشتیبانی می‌کند.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

بوم GPU وب اکنون می تواند از طیف کامل نمایشگر برای تصاویر HDR استفاده کند.

و برخی موارد منسوخ و حذف وجود دارد که ممکن است بر برخی از توسعه دهندگان تأثیر بگذارد.

یادداشت های انتشار کامل را بخوانید .

در ادامه مطلب

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

مشترک شوید

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

در حال پر کردن آدریانا، من پیت لی پیج هستم، و به محض اینکه کروم 130 منتشر شد، ما در اینجا خواهیم بود تا به شما بگوییم چه چیزی در کروم جدید است!