در ماه مارس وارد پلتفرم وب شده است

برخی از ویژگی های جالبی را که در طول مارس 2024 در مرورگرهای وب پایدار و بتا مشاهده می شود، کشف کنید.

Rachel Andrew

نسخه های مرورگر پایدار

در مارس 2024 فایرفاکس 124 ، سافاری 17.4 و کروم 123 پایدار شدند. این پست به ویژگی های جدید اضافه شده به پلتفرم وب می پردازد.

داده‌های سازگاری مرورگر استخراج‌شده از MDN در این پست‌ها گنجانده شده‌اند و ممکن است هنوز برای نسخه‌های اخیر مرورگر به‌روزرسانی نشده باشند. این پست به محض اینکه در نسخه مرورگر-compat-data ظاهر شد، اطلاعات صحیح را نشان خواهد داد.

تطبیق طرح‌های رنگی با light-dark()

تابع رنگ light-dark() در کروم 123 قرار گرفت و تطبیق طرح‌های رنگی را با اولویت کاربر آسان‌تر می‌کند. در مثال زیر، color-scheme روی root روی light dark تنظیم شده است. ویژگی‌های سفارشی از تابع رنگ light-dark() برای تنظیم رنگ‌هایی استفاده می‌کنند که بسته به ترجیح حالت روشن یا تاریک کاربر بین آن‌ها جابه‌جا می‌شوند.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

نمونه‌ها و جزئیات بیشتری را در رنگ‌های وابسته به color-scheme CSS با light-dark() بیابید.

پشتیبانی مرورگر

• 123
• 123
• 120
• 17.5

منبع

کنترل بهتر ورودی ها با field-sizing

همچنین در کروم 123، ویژگی field-sizing فیلدهای ورودی متن را با رشد خودکار فعال می کند.

پشتیبانی مرورگر

• 123
• 123
• x
• x

منبع

Kerning برای علائم نگارشی CJK با text-spacing-trim

در Chrome 123، ویژگی text-spacing-trim برای تنظیم فاصله بیش از حد، نویسه‌های نقطه‌گذاری چینی، ژاپنی و کره‌ای (CJK) را به‌کار می‌گیرد. در معرفی چهار ویژگی بین المللی جدید برای CSS بیشتر بخوانید.

پشتیبانی مرورگر

• 123
• 123
• x
• x

منبع

@scope CSS at-rule

Safari 17.4 شامل @scope است که به شما امکان می‌دهد عناصر را در زیردرخت‌های DOM خاص انتخاب کنید، عناصر را دقیقاً بدون نوشتن انتخاب‌گرهای خیلی خاص که به سختی نادیده گرفته می‌شوند، هدف قرار دهید، و بدون اینکه انتخابگرهای خود را خیلی محکم به ساختار DOM متصل کنید.

در محدود کردن دسترسی انتخابگرهای خود با CSS @scope at-rule بیشتر بیاموزید

پشتیبانی مرورگر

• 118
• 118
• 
• 17.4

منبع

بهبود تصویر در تصویر

Chrome 123 شامل دو ویژگی برای بهبود تجربه تصویر در تصویر است. اولین مورد، حالت نمایش picture-in-picture CSS است. این به شما امکان می دهد قوانین خاص CSS را بنویسید که فقط زمانی اعمال می شوند که (بخشی از) برنامه وب در حالت تصویر در تصویر نشان داده شود.

ویژگی دوم به شما امکان می دهد از opener.focus از پنجره تصویر در تصویر سند استفاده کنید تا فوکوس سطح سیستم را به برگه ای که دارای پنجره تصویر در تصویر سند است، بیاورید.

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

پشتیبانی از align-content در طرح بندی بلوک و جدول

Chrome 123 و Safari 17.4 شامل پشتیبانی از align-content در طرح بندی بلوک و جدول هستند. درباره تغییر پشتیبانی از align-content بخوانید.

Service Worker Static Routing API

از Chrome 123، Service Worker Static Routing API در دسترس است. این API به شما این امکان را می‌دهد که به‌طور شفاف بیان کنید که چگونه مسیرهای منبع خاصی باید واکشی شوند، به این معنی که مرورگر نیازی به اجرای یک سرویس‌کار تنها برای واکشی پاسخ‌ها از حافظه پنهان یا مستقیماً از شبکه ندارد.

در استفاده از Service Worker Static Routing API برای دور زدن سرویس کار برای مسیرهای خاص بیشتر بیاموزید.

Long Animation Frames API

Chrome 123 همچنین دارای The Long Animation Frames API است که به‌روزرسانی Long Tasks API است تا درک بهتری از به‌روزرسانی‌های رابط کاربری آهسته (UI) ارائه دهد. این می‌تواند برای شناسایی فریم‌های انیمیشن آهسته که احتمالاً بر معیار Interaction to Next Paint (INP) Core Web Vital که میزان پاسخ‌دهی را اندازه‌گیری می‌کند، تأثیر می‌گذارد، یا برای شناسایی سایر جابه‌جایی‌های رابط کاربری که بر صافی تأثیر می‌گذارند، مفید باشد.

پشتیبانی مرورگر

• 123
• 123
• x
• x

منبع

خاصیت content-visibility

فایرفاکس 124 شامل پشتیبانی از ویژگی CSS content-visibility است. این ویژگی کنترل می‌کند که آیا یک عنصر اصلاً محتوای خود را ارائه می‌کند یا خیر، به مرورگرها اجازه می‌دهد تا محتوا را تا زمانی که نیاز باشد حذف کنند.

پشتیبانی مرورگر

• 85
• 85
• 125
• 18

منبع

موارد اضافه شده به ArrayBuffer و گروه بندی آرایه

در Safari 17.4 جاوا اسکریپت با پشتیبانی از ویژگی detached و متدهای transfer() و transferToFixedLength() ArrayBuffer ویژگی های جدیدی دریافت می کند.

پشتیبانی مرورگر

• 114
• 114
• 122
• 17.4

منبع

Safari 17.4 همچنین شامل روش های گروه بندی آرایه Object.groupBy و Map.groupBy می باشد. برای کسب اطلاعات بیشتر در مورد گروه بندی آرایه، بخوانید جاوا اسکریپت در حال دریافت روش های گروه بندی آرایه است .

پشتیبانی مرورگر

• 117
• 117
• 119
• 17.4

منبع

این ویژگی‌ها اکنون قابلیت همکاری دارند و بنابراین به Baseline Newly Available می‌پیوندند.

setHTMLUnsafe و parseHTMLUnsafe

روش‌های setHTMLUnsafe و parseHTMLUnsafe که در Safari 17.4 ارسال می‌شوند، امکان استفاده از DOM Shadow Declarative را از جاوا اسکریپت فراهم می‌کنند. این روش‌ها همچنین در مقایسه با innerHTML یا DOMParser ، راه آسان‌تری برای تجزیه ضروری HTML به DOM ارائه می‌دهند.

مرورگر بتا منتشر شد

نسخه های مرورگر بتا پیش نمایشی از مواردی را که در نسخه پایدار بعدی مرورگر وجود خواهند داشت، به شما ارائه می دهند. زمان بسیار خوبی برای آزمایش ویژگی‌های جدید یا حذف‌هایی است که می‌تواند بر سایت شما تأثیر بگذارد، قبل از اینکه جهان آن نسخه را دریافت کند. نسخه های بتا جدید فایرفاکس 125 و کروم 124 هستند. این نسخه ها ویژگی های بسیار خوبی را برای پلتفرم به ارمغان می آورند. برای همه جزئیات، یادداشت های انتشار را بررسی کنید. در اینجا فقط چند نکته برجسته وجود دارد.

فایرفاکس 125 در حال شکل گیری یک نسخه هیجان انگیز است. این شامل align-content روی بلوک‌ها می‌شود که این ویژگی را قابل اجرا می‌کند. همچنین Popover API شامل، و بنابراین تبدیل شدن به بخشی از Baseline Newly Available است. ویژگی transition-behavior نیز پشتیبانی خواهد شد. Popover و transition-behavior بخشی از Interop 2024 هستند.

Chrome 124 شامل متدهای setHTMLUnsafe و parseHTMLUnsafe است تا امکان استفاده از DOM Shadow Declarative از جاوا اسکریپت را فراهم می‌کند و این ویژگی‌ها را با هم سازگار می‌کند. همچنین شامل WebSocketStream API و ویژگی writingsuggestions است.