در حالی که به نیمه دوم سال می رویم، زمان خوبی است تا ببینیم که Interop 2024 چگونه قابلیت همکاری وب را در سال جاری بهبود بخشیده است.
از جایی که شروع کردیم
در ابتدای سال ، کروم دارای امتیاز آزمایشی پشتیبانی مرورگر 83 بود.
![داشبورد با امتیازات-Interop: 65، بررسی ها: 0، Chrome Canary: 83، Edge Dev: 82، Firefox Nightly: 80، پیش نمایش فناوری Safari: 79.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-feb.png?hl=fa)
![داشبورد با امتیازات-Interop: 75، بررسی ها: 5، Chrome Canary: 90، Edge Dev: 89، Firefox Nightly: 87، Safari Technology Preview: 88.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-june.png?hl=fa)
امروز این امتیاز 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% نزدیک شویم.