جدید در Chrome 137، جدید در Chrome 137

راشل اندرو

تاریخ انتشار: 27 می 2025

کروم 137 در حال حاضر منتشر می شود و این پست برخی از ویژگی های کلیدی انتشار را به اشتراک می گذارد. یادداشت‌های انتشار کامل Chrome 137 را بخوانید.

نکات برجسته این نسخه:

reading-flow و reading-order برای اطمینان از ترتیب منطقی برگه ها از طریق طرح بندی های پیچیده استفاده کنید. تابع if() CSS راهی مختصر برای بیان مقادیر شرطی ارائه می دهد. JavaScript Promise Integration (JSPI) به برنامه های WebAssembly اجازه می دهد با وعده های جاوا اسکریپت یکپارچه شوند.

CSS reading-flow و reading-order

ویژگی CSS reading-flow ترتیب قرار گرفتن عناصر در طرح‌بندی انعطاف‌پذیر، شبکه یا بلوک را در معرض ابزارهای دسترسی و نحوه تمرکز آنها با استفاده از روش‌های پیمایش متوالی خطی را کنترل می‌کند. این یک مشکل قدیمی با طرح‌بندی‌های شبکه‌ای و انعطاف‌پذیر را حل می‌کند، که در آن ترتیب برگه‌ها می‌تواند با ترتیبی که موارد چیده شده‌اند قطع شود.

یک مقدار کلمه کلیدی با پیش‌فرض normal می‌گیرد که رفتار عناصر ترتیب‌دهی را به ترتیب DOM حفظ می‌کند. برای استفاده از آن در یک ظرف انعطاف پذیر، مقدار آن را روی flex-visual یا flex-flow تنظیم کنید. برای استفاده از آن در داخل یک ظرف شبکه، مقدار آن را روی grid-rows ، grid-columns یا grid-order تنظیم کنید.

ویژگی reading-order CSS به شما این امکان را می دهد تا به صورت دستی ترتیب موارد را در یک محفظه جریان خواندن لغو کنید. برای استفاده از این ویژگی در داخل یک محفظه شبکه، انعطاف‌پذیر یا بلوک، مقدار reading-flow در ظرف را روی source-order تنظیم کنید و reading-order هر مورد را روی یک مقدار صحیح تنظیم کنید.

برای یادگیری بیشتر بخوانید از CSS reading-flow برای ناوبری فوکوس متوالی منطقی استفاده کنید .

تابع if() CSS

تابع if() CSS راهی مختصر برای بیان مقادیر شرطی ارائه می دهد. مجموعه ای از جفت های شرط-مقدار را می پذیرد که با نقطه ویرگول مشخص شده اند. تابع هر شرط را به صورت متوالی ارزیابی می کند و مقدار مربوط به اولین شرط واقعی را برمی گرداند. اگر هیچ یک از شرایط به درستی ارزیابی نشود، تابع یک جریان توکن خالی را برمی‌گرداند.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

WebAssembly JavaScript Promise Integration (JSPI)

JavaScript Promise Integration (JSPI) یک API است که به برنامه های WebAssembly اجازه می دهد با وعده های جاوا اسکریپت یکپارچه شوند.

این به یک برنامه WebAssembly اجازه می دهد تا به عنوان مولد یک وعده عمل کند و به برنامه WebAssembly اجازه می دهد تا با API های دارای وعده تعامل داشته باشد.

به طور خاص، هنگامی که یک برنامه از JSPI برای فراخوانی یک API وعده دار (جاوا اسکریپت) استفاده می کند، کد WebAssembly به حالت تعلیق در می آید. و به تماس گیرنده اصلی برنامه WebAssembly قول داده می شود که زمانی که برنامه WebAssembly در نهایت تکمیل شود محقق خواهد شد.

و بیشتر!

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

  • به عنوان ادامه پارتیشن بندی فضای ذخیره سازی، کروم پارتیشن بندی دسترسی Blob URL را توسط کلید ذخیره سازی پیاده سازی کرده است.
  • قالب‌های پیکسل نقطه شناور بوم اکنون پیاده‌سازی شده‌اند.
  • offset-path: shape() پشتیبانی می‌شود، بنابراین می‌توانید از اشکال واکنش‌گرا برای تنظیم مسیر انیمیشن استفاده کنید.

در ادامه مطلب

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

مشترک شوید

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

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

،

راشل اندرو

تاریخ انتشار: 27 می 2025

کروم 137 در حال حاضر منتشر می شود و این پست برخی از ویژگی های کلیدی انتشار را به اشتراک می گذارد. یادداشت‌های انتشار کامل Chrome 137 را بخوانید.

نکات برجسته این نسخه:

reading-flow و reading-order برای اطمینان از ترتیب منطقی برگه ها از طریق طرح بندی های پیچیده استفاده کنید. تابع if() CSS راهی مختصر برای بیان مقادیر شرطی ارائه می دهد. JavaScript Promise Integration (JSPI) به برنامه های WebAssembly اجازه می دهد با وعده های جاوا اسکریپت یکپارچه شوند.

CSS reading-flow و reading-order

ویژگی CSS reading-flow ترتیب قرار گرفتن عناصر در طرح‌بندی انعطاف‌پذیر، شبکه یا بلوک را در معرض ابزارهای دسترسی و نحوه تمرکز آنها با استفاده از روش‌های پیمایش متوالی خطی را کنترل می‌کند. این یک مشکل قدیمی با طرح‌بندی‌های شبکه‌ای و انعطاف‌پذیر را حل می‌کند، که در آن ترتیب برگه‌ها می‌تواند با ترتیبی که موارد چیده شده‌اند قطع شود.

یک مقدار کلمه کلیدی با پیش‌فرض normal می‌گیرد که رفتار عناصر ترتیب‌دهی را به ترتیب DOM حفظ می‌کند. برای استفاده از آن در یک ظرف انعطاف پذیر، مقدار آن را روی flex-visual یا flex-flow تنظیم کنید. برای استفاده از آن در داخل یک ظرف شبکه، مقدار آن را روی grid-rows ، grid-columns یا grid-order تنظیم کنید.

ویژگی reading-order CSS به شما این امکان را می دهد تا به صورت دستی ترتیب موارد را در یک محفظه جریان خواندن لغو کنید. برای استفاده از این ویژگی در داخل یک محفظه شبکه، انعطاف‌پذیر یا بلوک، مقدار reading-flow در ظرف را روی source-order تنظیم کنید و reading-order هر مورد را روی یک مقدار صحیح تنظیم کنید.

برای یادگیری بیشتر بخوانید از CSS reading-flow برای ناوبری فوکوس متوالی منطقی استفاده کنید .

تابع if() CSS

تابع if() CSS راهی مختصر برای بیان مقادیر شرطی ارائه می دهد. مجموعه ای از جفت های شرط-مقدار را می پذیرد که با نقطه ویرگول مشخص شده اند. تابع هر شرط را به صورت متوالی ارزیابی می کند و مقدار مربوط به اولین شرط واقعی را برمی گرداند. اگر هیچ یک از شرایط به درستی ارزیابی نشود، تابع یک جریان توکن خالی را برمی‌گرداند.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

WebAssembly JavaScript Promise Integration (JSPI)

JavaScript Promise Integration (JSPI) یک API است که به برنامه های WebAssembly اجازه می دهد با وعده های جاوا اسکریپت یکپارچه شوند.

این به یک برنامه WebAssembly اجازه می دهد تا به عنوان مولد یک وعده عمل کند و به برنامه WebAssembly اجازه می دهد تا با API های دارای وعده تعامل داشته باشد.

به طور خاص، هنگامی که یک برنامه از JSPI برای فراخوانی یک API وعده دار (جاوا اسکریپت) استفاده می کند، کد WebAssembly به حالت تعلیق در می آید. و به تماس گیرنده اصلی برنامه WebAssembly قول داده می شود که زمانی که برنامه WebAssembly در نهایت تکمیل شود محقق خواهد شد.

و بیشتر!

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

  • به عنوان ادامه پارتیشن بندی فضای ذخیره سازی، کروم پارتیشن بندی دسترسی Blob URL را توسط کلید ذخیره سازی پیاده سازی کرده است.
  • قالب‌های پیکسل نقطه شناور بوم اکنون پیاده‌سازی شده‌اند.
  • offset-path: shape() پشتیبانی می‌شود، بنابراین می‌توانید از اشکال واکنش‌گرا برای تنظیم مسیر انیمیشن استفاده کنید.

در ادامه مطلب

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

مشترک شوید

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

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