به روز رسانی میان سال Interop 2024

Rachel Andrew

در حالی که به نیمه دوم سال می رویم، زمان خوبی است تا ببینیم که Interop 2024 چگونه قابلیت همکاری وب را در سال جاری بهبود بخشیده است.

از جایی که شروع کردیم

در ابتدای سال ، کروم دارای امتیاز آزمایشی پشتیبانی مرورگر 83 بود.

امروز این امتیاز 90 است و امتیاز مرورگرهای پایدار از زمان انتشار کروم 126 در ژوئن 85 است. امتیاز کلی تجربی 10 امتیاز افزایش یافته است و این پست برخی از ویژگی‌هایی را که به این امتیاز کمک کرده است به اشتراک می‌گذارد.

پاپاور

Popover در آوریل 2024 بخشی از Baseline Newly Available شد. Popover هیجان‌انگیز است زیرا بسیاری از ویژگی‌های UI که باید بسازید - به عنوان مثال، منوها، نکات ابزار، همپوشانی برای انتخاب انتخاب‌ها و آموزش رابط‌های کاربری - انواعی از popover هستند. قبل از پاپ اور، ایجاد هر یک از این ویژگی ها شامل کدهای سفارشی زیادی بود. برای اطمینان از باز نشدن چند عنصر همزمان یا فعال کردن رد نور هنگامی که کاربر در خارج از عنصر کلیک می کند کد کنید. همچنین ممکن است با z-index مشکل داشته باشید تا مطمئن شوید که یک عنصر UI در بالای بقیه رابط باقی می ماند.

همه این ویژگی‌ها و موارد دیگر در Popover API گنجانده شده است که باعث صرفه‌جویی در زمان توسعه و کمک به ایجاد رابط‌های کارآمدتر و در دسترس می‌شود. به عنوان مثال، کد زیر یک پاپاور با رد کردن نور ایجاد می کند که پس از باز شدن، پاپاورهای دیگر را به طور خودکار می بندد.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

بیشتر در Popover API lands در Baseline بیابید. بسیاری از برنامه ها در حال حاضر مزایای Popover را می بینند. توکوپدیا با استفاده از یک polyfill برای مرورگرهای غیر پشتیبانی، توانست مقدار کد React را به میزان قابل توجهی کاهش دهد .

ویژگی های سفارشی پیشرفته با @property

قانون CSS @property به شما امکان می‌دهد ویژگی‌های سفارشی پیشرفته‌ای را با جزئیات بسیار بیشتر از نام و ارزش موجود در ویژگی‌های سفارشی استاندارد ایجاد کنید. نحو مجاز را تنظیم کنید تا نوع داده ای را که این ویژگی در خود نگه می دارد را تعریف کنید - برای مثال رنگ، عدد یا طول. سپس تعیین کنید که آیا ویژگی ارث می برد یا نه، و یک مقدار اولیه.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

قانون @property در حال حاضر امتیاز آزمایشی فایرفاکس را بهبود می‌بخشد و امتیاز پایدار را در زمانی که فایرفاکس 128 در اواخر این ماه عرضه می‌شود، افزایش می‌دهد. همچنین به Baseline Newly Available می پیوندد.

در @property بیشتر بیاموزید: دادن ابرقدرت به متغیرهای CSS .

ویژگی font-size-adjust

ویژگی CSS font-size-adjust به شما امکان می دهد اندازه حروف کوچک را نسبت به اندازه حروف بزرگ تغییر دهید. این در شرایطی مفید است که ممکن است بازگشت فونت اتفاق بیفتد، زیرا کمک می کند تا اطمینان حاصل شود که فونت بازگشتی همچنان خوانا است، به ویژه در اندازه های کوچک.

ویژگی font-size-adjust در حال حاضر در امتیاز آزمایشی کروم گنجانده شده است، با این حال، هنگامی که با Chrome 127 در این ماه منتشر شود، امتیاز پایدار را افزایش می دهد. همچنین به Baseline Newly Available می پیوندد.

text-wrap: تعادل

استفاده از text-wrap: balance به مرورگر دستور می دهد تا بهترین ترکیب بندی خط متعادل را برای متن پیدا کند. به ویژه برای سرفصل ها مفید است، به عنوان مثال از پیچیدن عنوان به یک کلمه در خط دو جلوگیری می کند.

این مورد اخیراً توسط سافاری پشتیبانی شده است و سایر مرورگرها در تلاش هستند تا تست‌های ناموفق را برطرف کنند تا اطمینان حاصل کنند که این ویژگی در همه مرورگرها به خوبی کار می‌کند.

علاوه بر این که این ویژگی‌های اصلی قابل همکاری هستند، بسیاری از پیشرفت‌های دیگر نیز انجام شده است. هر آزمونی که رد می شود نشان دهنده یک مشکل قابلیت همکاری است که با آن مواجه نخواهید شد. ما هیجان زده هستیم که ببینیم تا پایان سال چقدر می توانیم به آن امتیاز 100% نزدیک شویم.