Interop ۲۰۲۶: ۲۰ قابلیت وبی که همه مرورگرها هماهنگ می‌کنند

Interop 2026 برنامه مشترک سازندگان موتورهای مرورگر (از جمله Apple، Google، Igalia، Microsoft و Mozilla) برای یکسان‌سازی پیاده‌سازی ۲۰ حوزه قابلیت وب در همه مرورگرهاست که در ۱۲ فوریه ۲۰۲۶ اعلام شد. این حوزه‌ها شامل قابلیت‌هایی مثل Anchor Positioning، View Transitions بین صفحات، Navigation API، Container Style Queries، دیالوگ و Popover و انیمیشن‌های مبتنی بر اسکرول است؛ یعنی قابلیت‌هایی که فرانت‌اندکارها تا امروز به‌خاطر رفتار ناهمسان مرورگرها با احتیاط از آن‌ها استفاده می‌کردند.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

وضعیت تا آبان ۱۴۰۵: Interop ۲۰۲۶ در ۱۲ فوریه ۲۰۲۶ در web.dev اعلام شد و ۲۰ حوزه تمرکز و ۴ حوزه پژوهشی دارد. پیشرفت هر حوزه با درصد قبولی در تست‌های web-platform-tests روی داشبورد رسمی Interop سنجیده می‌شود. عضویت یک قابلیت در Interop یعنی مرورگرها متعهد به بهبود سازگاری آن هستند، نه اینکه همین امروز در همه مرورگرها کامل باشد.

در این مقاله هر ۲۰ حوزه را دسته‌بندی‌شده مرور می‌کنیم، برای مهم‌ترین قابلیت‌های CSS و UI مثال کد با زمینه فارسی و راست‌چین می‌آوریم و توضیح می‌دهیم فرانت‌اندکارها چطور از این فهرست برای تصمیم‌گیری در پروژه‌ها استفاده کنند.

Interop ۲۰۲۶ چیست و چرا برای فرانت‌اندکارها مهم است؟

Interop یک برنامه سالانه است که در آن نمایندگان شرکت‌های سازنده موتور مرورگر، فهرستی از قابلیت‌های وب را انتخاب می‌کنند و متعهد می‌شوند در طول سال، تست‌های مربوط به آن‌ها را در مرورگرهای خود پاس کنند. طبق اطلاعیه رسمی Interop ۲۰۲۶ در web.dev که Rachel Andrew نوشته است، تست‌های انتخاب‌شده روی زیرساخت خودکار اجرا می‌شوند و درصد قبولی روی داشبورد Interop ۲۰۲۶ منتشر می‌شود.

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

۲۰ حوزه Interop ۲۰۲۶ کدام‌اند؟

۲۰ حوزه Interop ۲۰۲۶ را می‌توان در سه گروه CSS و چیدمان، رابط کاربری و انیمیشن، و APIهای پلتفرم دسته‌بندی کرد. فهرست کامل بر اساس اطلاعیه web.dev:

گروه	حوزه	کاربرد در یک جمله
CSS و چیدمان	Anchor Positioning	قرار دادن عنصر نسبت به عنصر دیگر، مثل تولتیپ کنار دکمه (ادامه از ۲۰۲۵)
CSS و چیدمان	Container Style Queries	استایل‌دهی بر اساس مقدار custom property کانتینر با style()
CSS و چیدمان	تابع attr()	خواندن مقدار attribute با نوع و واحد در CSS
CSS و چیدمان	contrast-color()	انتخاب خودکار رنگ با کنتراست کافی
CSS و چیدمان	Custom Highlights	استایل‌دهی بازه‌های متن بدون عنصر اضافه در DOM
CSS و چیدمان	Media Pseudo-classes	شبه‌کلاس‌هایی مثل :playing و :paused برای ویدیو و صوت
CSS و چیدمان	Scroll Snap	رفتار یکسان چسبیدن اسکرول در اسلایدرها
CSS و چیدمان	تابع shape()	ساخت شکل برای clip-path و shape-outside
CSS و چیدمان	ویژگی zoom	بزرگ‌نمایی عنصر و اثر آن بر چیدمان (ادامه از ۲۰۲۵)
UI و انیمیشن	Dialogs و Popovers	attribute closedby، شبه‌کلاس :open و popover="hint"
UI و انیمیشن	Scroll-driven Animations	انیمیشن وابسته به موقعیت اسکرول با animation-timeline
UI و انیمیشن	View Transitions	بهبود انتقال درون‌صفحه‌ای و افزودن انتقال بین صفحات
APIها	Fetch: آپلود و Range	ارسال جریانی بدنه درخواست و پشتیبانی هدر Range
APIها	IndexedDB	خواندن سریع‌تر داده‌های بزرگ با getAllRecords()
APIها	JSPI برای Wasm	کار کد همگام Wasm با قابلیت‌های ناهمگام
APIها	Navigation API	مدیریت ناوبری در اپ‌های تک‌صفحه‌ای و گزینه precommitHandler
APIها	Scoped Custom Element Registries	هم‌زیستی دو تعریف از یک نام تگ سفارشی
APIها	WebRTC	رفع تست‌های باقی‌مانده ارتباط هم‌تابه‌هم (ادامه از ۲۰۲۵)
APIها	WebTransport	انتقال داده کلاینت و سرور روی HTTP/۳
سازگاری	Web Compat	بارگذاری ماژول‌های ESM، زمان‌بندی رویداد اسکرول و حذف پیشوند -webkit-user-select

علاوه بر این‌ها، چهار حوزه پژوهشی هم تعریف شده که هدفشان ساخت زیرساخت تست است، نه یکسان‌سازی فوری: تست دسترس‌پذیری (درخت دسترس‌پذیری یکسان)، JPEG XL، تست روی موبایل (مثل تغییر پویای viewport) و WebVTT برای زیرنویس.

Anchor Positioning در Interop ۲۰۲۶ چه وضعیتی دارد؟

Anchor Positioning قابلیتی در CSS است که اجازه می‌دهد یک عنصر (مثل تولتیپ یا منوی کشویی) را نسبت به عنصر دیگری (لنگر) موقعیت‌دهی کنید، بدون اینکه با جاوااسکریپت مختصات را محاسبه کنید. طبق اطلاعیه web.dev، این حوزه ادامه Interop ۲۰۲۵ است و فقط تست‌های سال ۲۰۲۵ را شامل می‌شود؛ یعنی هدف ۲۰۲۶ تکمیل سازگاری همان مجموعه قابلیت‌هاست، نه افزودن قابلیت جدید.

/* Anchor Positioning: تولتیپ چسبیده به دکمه بدون جاوااسکریپت */
.help-btn {
  anchor-name: --help;
}

.tooltip {
  position: absolute;
  position-anchor: --help;
  position-area: block-start;   /* بالای دکمه */
  margin-block-end: 8px;
}

/* اگر جا نبود، خودکار به پایین منتقل شود */
.tooltip {
  position-try-fallbacks: flip-block;
}

در سایت‌های راست‌چین، استفاده از مقادیر منطقی مثل block-start و inline-end به جای top و left باعث می‌شود موقعیت تولتیپ با جهت صفحه هماهنگ بماند. اگر با خاصیت‌های منطقی CSS آشنا نیستید، آموزش‌های دوره HTML و CSS در کدپرس siloow از پایه شروع می‌کنند.

نکته: قبل از استفاده از Anchor Positioning در production، وضعیت پشتیبانی مرورگرهای مخاطبان خود را بررسی کنید و برای مرورگرهای قدیمی یک حالت جایگزین ساده (مثلاً نمایش تولتیپ در زیر عنصر با position معمولی) در نظر بگیرید.

View Transitions و Navigation API در Interop ۲۰۲۶ چه تغییری می‌کنند؟

View Transitions در Interop ۲۰۲۶ دو هدف دارد: بهبود انتقال‌های درون‌صفحه‌ای (same-document) که طبق اطلاعیه web.dev از طریق Interop ۲۰۲۵ به وضعیت Baseline Newly available رسید، و افزودن انتقال‌های بین صفحات (cross-document) که برای سایت‌های چندصفحه‌ای مثل سایت‌های وردپرسی اهمیت زیادی دارد. اجزای دیگر این حوزه عبارت‌اند از attribute blocking="render"، <link rel="expect"> و شبه‌کلاس :active-view-transition-type().

/* انتقال نرم بین صفحات (cross-document view transition) */
@view-transition {
  navigation: auto;
}

/* احترام به کاربرانی که حرکت کمتر را ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

View Transitions بین صفحات یعنی سایت معمولی (بدون SPA) می‌تواند هنگام رفتن از یک صفحه به صفحه دیگر، انیمیشن نرم داشته باشد. این قابلیت برای سایت‌های فروشگاهی و محتوایی جذاب است، اما باید با prefers-reduced-motion محدود شود. در اپ‌های React هم کامپوننت جدید ViewTransition روی همین API بنا شده است؛ جزئیات را در مقاله React ۱۹.۳؛ View Transitions و Fragment Refs ببینید.

Navigation API هم در Interop ۲۰۲۶ قرار دارد. هدف اعلام‌شده، ادامه بهبود سازگاری این API و افزودن گزینه precommitHandler به navigateEvent.intercept() است که اجازه می‌دهد commit ناوبری تا آماده شدن یک handler به تأخیر بیفتد. برای روترهای اپ‌های تک‌صفحه‌ای، Navigation API جایگزین تمیزتری برای الگوهای قدیمی مبتنی بر History API است.

دیالوگ و Popover بومی در Interop ۲۰۲۶ چه چیزی اضافه می‌کنند؟

حوزه Dialogs و Popovers در Interop ۲۰۲۶ سه قابلیت را یکسان‌سازی می‌کند: attribute closedby روی <dialog> برای تعیین روش بستن (مثلاً با کلیک بیرون)، شبه‌کلاس :open و popover="hint". این‌ها در کنار API پایه Popover، ساخت منو، مودال و تولتیپ دسترس‌پذیر را بدون کتابخانه جاوااسکریپت ممکن می‌کنند.

<!-- Popover بومی و دیالوگ با بسته شدن ساده -->
<button popovertarget="menu">منوی کاربر</button>
<div id="menu" popover>
  <a href="/profile">پروفایل</a>
  <a href="/orders">سفارش‌ها</a>
</div>

<dialog id="confirm" closedby="any">
  <p>آیا از حذف این سفارش مطمئن هستید؟</p>
  <form method="dialog">
    <button value="no">انصراف</button>
    <button value="yes">حذف</button>
  </form>
</dialog>

مزیت مهم دیالوگ و Popover بومی، دسترس‌پذیری پیش‌فرض است: مدیریت فوکوس، بستن با کلید Escape و قرار گرفتن در لایه بالا (top layer) را مرورگر انجام می‌دهد. این همان چیزی است که کتابخانه‌های مودال سال‌ها با کد اضافه شبیه‌سازی می‌کردند.

فرانت‌اندکارها چطور از فهرست Interop ۲۰۲۶ استفاده کنند؟

فهرست Interop ۲۰۲۶ یک نقشه راه برای تصمیم‌گیری است، نه مجوز استفاده بی‌قیدوشرط. پیشنهاد ما برای استفاده عملی:

1. قابلیت را با Baseline بسنجید: وضعیت Baseline هر قابلیت (Newly یا Widely available) در MDN و web.dev نشان می‌دهد امروز در کدام مرورگرها قابل اتکاست.
2. داشبورد Interop را ببینید: درصد قبولی تست‌ها در هر مرورگر نشان می‌دهد کدام حوزه به سازگاری نزدیک‌تر است.
3. بهبود تدریجی را رعایت کنید: قابلیت جدید را طوری پیاده کنید که در مرورگر بدون پشتیبانی، تجربه پایه همچنان کار کند؛ مثلاً با @supports.
4. مخاطبان خود را بشناسید: آمار مرورگر کاربران سایت (به‌ویژه سهم سافاری iOS) را از ابزار تحلیل بازدید بگیرید.
5. ابزار build را هماهنگ کنید: مرورگر هدف پیش‌فرض ابزارهایی مثل Vite ۸ به Chrome ۱۱۱ و Safari ۱۶.۴ رسیده است؛ جزئیات را در مقاله Vite ۸ و Rolldown نوشته‌ایم.

کدام قابلیت جایگزین کدام کتابخانه می‌شود؟

بخشی از ارزش عملی Interop ۲۰۲۶ این است که چند قابلیت آن می‌توانند به‌تدریج جایگزین کتابخانه‌های جاوااسکریپتی شوند که امروز حجم صفحه را بالا می‌برند. جدول زیر یک نگاه کاربردی است؛ تصمیم نهایی به وضعیت پشتیبانی در مرورگرهای مخاطبان شما بستگی دارد:

قابلیت Interop ۲۰۲۶	راه‌حل رایج قبلی	مناسب برای
Anchor Positioning	کتابخانه‌های موقعیت‌دهی تولتیپ و منو با جاوااسکریپت	تولتیپ، منوی کشویی، راهنمای فرم
Dialogs و Popovers	کتابخانه مودال و مدیریت دستی فوکوس	مودال تأیید، منوی کاربر، پنجره‌های اطلاع‌رسانی
View Transitions بین صفحات	تبدیل سایت به SPA فقط برای انیمیشن صفحه	سایت‌های وردپرسی، فروشگاهی و محتوایی
Scroll-driven Animations	شنونده رویداد scroll و کتابخانه پارالاکس	نوار پیشرفت مطالعه، انیمیشن ورود بخش‌ها
Navigation API	روترهای مبتنی بر History API	اپ‌های تک‌صفحه‌ای و پنل‌های مدیریتی
Container Style Queries	کلاس‌های متعدد برای حالت‌های مختلف کامپوننت	سیستم‌های طراحی و کامپوننت‌های قابل استفاده دوباره

اگر سایت شما روی وردپرس است، بلاک‌ها و قالب‌ها هم می‌توانند از این قابلیت‌های بومی بهره ببرند؛ فقط به یاد داشته باشید که ویرایشگر وردپرس از نسخه ۷.۱ همیشه داخل iframe اجرا می‌شود و کد تعاملی بلاک‌ها باید با آن سازگار باشد. جزئیات را در راهنمای Block API v3 نوشته‌ایم.

محدودیت‌ها: Interop ۲۰۲۶ چه چیزی را تضمین نمی‌کند؟

• Interop تعهد به بهبود سازگاری است، نه تضمین پشتیبانی کامل تا تاریخ مشخص؛ اطلاعیه web.dev تاریخ پایانی صریح برای هر حوزه اعلام نکرده است.
• کاربرانی که مرورگر خود را به‌روز نمی‌کنند (به‌ویژه روی دستگاه‌های قدیمی iOS که آپدیت سیستم‌عامل نمی‌گیرند) از این بهبودها بی‌بهره می‌مانند.
• حوزه‌های «ادامه از ۲۰۲۵» مثل Anchor Positioning فقط تست‌های همان سال را شامل می‌شوند و قابلیت‌های جدیدتر آن‌ها لزوماً پوشش داده نمی‌شوند.
• عبور از تست‌های web-platform-tests به معنی نبود هیچ باگی در موارد خاص نیست؛ تست واقعی روی دستگاه همچنان لازم است.

از تجربه تیم siloow

تیم siloow در قالب‌های اختصاصی وردپرس و وب‌اپ‌های React سال‌ها برای تولتیپ، منوی کشویی و مودال از کتابخانه‌های جاوااسکریپت استفاده کرده است. تجربه ما این است که در سایت‌های فارسی، بیشترین مشکل این کتابخانه‌ها جهت راست‌به‌چپ بود: محاسبه موقعیت با left و right که در RTL برعکس می‌شد. ترکیب Popover بومی، دیالوگ و Anchor Positioning با خاصیت‌های منطقی CSS این مشکل را از ریشه کم می‌کند. ما این قابلیت‌ها را با رویکرد بهبود تدریجی وارد پروژه‌ها می‌کنیم: نسخه پایه بدون قابلیت جدید کار می‌کند و مرورگرهای پشتیبان تجربه بهتری می‌گیرند.

جمع‌بندی

• Interop ۲۰۲۶ در ۱۲ فوریه ۲۰۲۶ با ۲۰ حوزه تمرکز و ۴ حوزه پژوهشی اعلام شد.
• Anchor Positioning، Container Style Queries، attr()، دیالوگ و Popover، View Transitions و Navigation API از مهم‌ترین حوزه‌ها هستند.
• View Transitions درون‌صفحه‌ای از طریق Interop ۲۰۲۵ به Baseline رسید و انتقال بین صفحات هدف ۲۰۲۶ است.
• Interop تعهد به یکسان‌سازی است؛ قبل از استفاده، Baseline و داشبورد Interop را بررسی کنید.
• با بهبود تدریجی و خاصیت‌های منطقی CSS، این قابلیت‌ها را از همین امروز در سایت‌های فارسی به کار ببرید.

اگر می‌خواهید سایت یا وب‌اپلیکیشن شما از قابلیت‌های مدرن وب با رعایت سازگاری مرورگرها و طراحی راست‌چین استفاده کند، خدمات طراحی و توسعه وب siloow را ببینید. برای اصول کلی، مقاله طراحی سایت چیست را بخوانید و خبرهای بعدی دنیای وب را در مگ siloow دنبال کنید.

منابع

• Interop 2026 — web.dev
• View Transition API — MDN
• CSS Anchor Positioning — MDN

سوالات متداول درباره Interop ۲۰۲۶