Interop 2023: ادامه بهبود وب برای توسعه دهندگان

مجدداً در سال 2023، همه فروشندگان بزرگ مرورگرها و سایر ذینفعان با هم همکاری می کنند تا مشکلات سازگاری با مرورگرهای برتر را حل کنند.

در سال 2023، همه فروشندگان بزرگ مرورگرها و سایر ذینفعان دوباره با هم کار می کنند تا مشکلات برتر سازگاری مرورگر را حل کنند. تلاش در این مقیاس با Interop 2022 آغاز شد، و شما می‌توانید آنچه را که با هم به دست آوردیم در پست پایان سال بیاموزید. همه افراد درگیر معتقدند که این به بهبود تجربه برای توسعه دهندگان وب در همه جا کمک می کند. امسال، برای اولین بار، فرآیند پیشنهاد را به صورت عمومی اعلام کردیم و پیشنهادات بسیار خوبی از چارچوب ها، شرکت های بزرگ، فروشندگان مرورگرها و توسعه دهندگان در همه جا دریافت کردیم.

مناطق تمرکز Interop 2023

این بار، ما کمتر از 26 حوزه تمرکز داریم که به طور مفصل در سند پروژه ما مشخص شده است. آنها به ترتیب حروف الفبا عبارتند از:

می‌توانید جزئیات کامل همه حوزه‌های تمرکز را در تست‌های پلتفرم وب مبتنی بر اسناد وب MDN بیابید، اما در اینجا چند مورد وجود دارد که فکر می‌کنیم ممکن است واقعاً از آنها هیجان‌زده شوید.

پرس و جوهای کانتینر

درخواست‌های کانتینر برای سال‌ها یکی از درخواست‌های اصلی توسعه‌دهندگان بوده است و در سال ۲۰۲۲ کروم و سافاری آن را ارسال کردند. فایرفاکس انتظار دارد درخواست‌های کانتینر را در فایرفاکس 110 ارسال کند، و آزمایش‌های مربوط به این ناحیه تمرکز کمک می‌کند تا اطمینان حاصل شود که کوئری‌های کانتینر به‌طور قابل‌اطمینانی در بین مرورگرها و مطابق با مشخصات کار می‌کنند.

: دارد (…)

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

ویژگی های سفارشی

ویژگی‌های سفارشی CSS، که به عنوان متغیرهای CSS نیز شناخته می‌شوند، امکان تعریف یک مقدار را در یک stylesheet و استفاده مجدد از آن در بسیاری از مکان‌ها، کاهش تکرار را ممکن می‌سازند. به عنوان مثال، می توانید یک بار در یک stylesheet یک رنگ یا اندازه فونت مشترک تعریف کنید و از آن در بین اجزا استفاده کنید. پشتیبانی اولیه از ویژگی های سفارشی برای مدت طولانی در مرورگرها وجود داشته است. Interop 2023 بر روی @property at-rule تمرکز دارد. @property یک ثبت ویژگی سفارشی در یک stylesheet را نشان می‌دهد که امکان بررسی نوع ویژگی، تنظیم مقادیر پیش‌فرض و اینکه آیا ویژگی باید مقادیر را به ارث ببرد یا خیر را نشان می‌دهد. در @property بیشتر بیاموزید: دادن ابرقدرت به متغیرهای CSS .

پوشش CSS

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

خارج از صفحه بوم

عنصر <canvas> و Canvas API روشی قابل اسکریپت برای ترسیم گرافیک روی صفحه ارائه می دهند. با این حال، این می تواند مشکلات عملکردی ایجاد کند زیرا کار در همان رشته ای که تعامل کاربر تکمیل می شود. OffscreenCanvas به توسعه دهندگان یک بوم ارائه می دهد که از DOM و Canvas API جدا شده است. توسعه دهندگان همچنین می توانند وظایف رندرینگ را در Web Worker جدا از رشته اصلی اجرا کنند. درباره مزایای عملکرد OffscreenCanvas بیشتر بدانید.

رویدادهای اشاره گر و ماوس

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

وب کدک ها

WebCodecs API روش هایی را برای توسعه دهندگان فراهم می کند تا به فریم های جداگانه ویدیو و تکه های صوتی دسترسی داشته باشند. این امکان دسترسی به کدک هایی را که از قبل در مرورگر موجود است و رابط های مختلف برای تعامل با آنها را ارائه می دهد. مقاله پردازش ویدیو با WebCodecs نحوه استفاده از API را برای رمزگشایی و رندر کردن فریم‌های فردی به بوم نشان می‌دهد.

اجزای وب

Web Components یک اصطلاح کلی برای تعدادی از فناوری‌هایی است که برای ایجاد اجزای قابل استفاده مجدد مانند Custom Elements و Shadow DOM استفاده می‌شوند. Interop 2023 بر بهبود قابلیت همکاری این فناوری های اساسی تمرکز خواهد کرد.

داشبورد

پیشرفت را در طول سال در داشبورد Interop 2023 دنبال کنید، جایی که می‌توانید امتیازات فعلی و وضعیت پرداختن به این مناطق تمرکز را در تمام موتورهای مرورگر اصلی مشاهده کنید.

امتیازات برای Interop به طور کلی: 62، بررسی ها: 0، و امتیازات هر مرورگر - 86 برای Chrome و Edge، 74 برای فایرفاکس، 86 برای پیش نمایش فناوری Safari.
داشبورد Interop 2023 (عکس از 31 ژانویه 2023 گرفته شده است).

نمرات منطقه تمرکز بر اساس نرخ قبولی آزمون محاسبه می شود. اگر بازخورد دارید یا می‌خواهید به بهبود WPT کمک کنید، لطفاً برای درخواست به‌روزرسانی مجموعه آزمایش‌های مورد استفاده برای امتیازدهی، مشکلی را ثبت کنید.

فهرستی از تمام مناطق فوکوس فعال همراه با نمرات مرورگر و امتیاز کلی Interop
همه مناطق تمرکز فعال و امتیاز کلی آنها.

اطلاعات بیشتر درباره Interop 2023