تاریخ انتشار: ۱۲ نوامبر ۲۰۲۶
از یک عامل کدنویسی هوش مصنوعی بخواهید یک نکته‌ابزار یا کادر گفتگوی مدال بسازد و به کدی که می‌نویسد به‌دقت نگاه کنید. در بیشتر مواقع، عامل جاوا اسکریپت را برای بازسازی ویژگی‌هایی که در مرورگر تعبیه شده‌اند وارد می‌کند. اگر از نماینده بخواهید به‌جای آن از ویژگی‌های جدیدتر CSS یا HTML استفاده کند، اغلب از تشخیص ویژگی و بازگشت صرف‌نظر می‌کند. این حذف باعث می‌شود کاربران در مرورگرهای پشتیبانی‌نشده با صفحه‌ای خراب مواجه شوند.
راهنمای وب نوین سازگاری مرورگر را در هر توصیه لحاظ می‌کند. هر راهنما ویژگی‌های وب مدرن را با داده‌های پشتیبانی Baseline و الگوهای بازگشت تأییدشده جفت می‌کند. این پست بررسی می‌کند که عامل شما چگونه از آن داده‌ها برای نوشتن کد مدرن و سازگار با مرورگرهای مختلف استفاده می‌کند.
چرا عامل‌های کدنویسی بدون راهنمایی، پشتیبانی مرورگر را اشتباه متوجه می‌شوند
بدون راهنمایی، عامل‌های کدنویسی به‌ندرت قبل‌از نوشتن کد بررسی می‌کنند که پروژه شما باید از کدام مرورگرها پشتیبانی کند. درعوض، آن‌ها معمولاً در یکی از دو حالت افراطی قرار می‌گیرند:
- پیش‌فرض شدن کد قدیمی: داده‌های آموزشی مدل پر از الگوهای قدیمی است و ارزیابی‌های «راهنمای وب نوین» نشان می‌دهد که مدل‌ها هنوز بسیاری از این الگوها را توصیه می‌کنند. عوامل اغلب جاوا اسکریپت پیچیده می‌نویسند یا کتابخانه‌های خارجی اضافه می‌کنند، درحالی‌که یک ویژگی داخلی HTML یا CSS می‌تواند این کار را انجام دهد.
- استفاده از ویژگی‌های جدید بدون تور ایمنی: وقتی از نماینده می‌خواهید از ویژگی وب جدیدتری استفاده کند، معمولاً کدی برای مرورگرهای پشتیبانی‌کننده می‌نویسد و همان‌جا متوقف می‌شود. این روش از تشخیص ویژگی صرف‌نظر می‌کند و جایگزین‌ها را حذف می‌کند، که باعث می‌شود صفحه در مرورگرهایی که از این ویژگی پشتیبانی نمی‌کنند خراب شود.
داده‌های مجموعه ارزیابی «راهنمای وب نوین» نشان می‌دهد که این شکاف چقدر رایج است. برای ویژگی‌هایی که هنوز در همه مرورگرهای اصلی کار نمی‌کنند، مجموعه ارزیابی برای تشخیص ویژگی، قوانین @supports، جایگزین‌ها، یا شبیه‌سازهای مرورگر شرطی آزمایش می‌کند. مدل‌های بدون راهنما فقط در ۴۳٪ مواقع این بررسی‌ها را با موفقیت پشت سر می‌گذارند. با فعال کردن «راهنمای وب نوین»، نرخ قبولی به ۸۷٪ می‌رسد.
چگونه داده‌های «خط مبنا» هر توصیه را هدایت می‌کند
برای تصمیم‌گیری درباره اینکه چه زمانی یک ویژگی وب به جایگزین نیاز دارد، «راهنمای وب نوین» به Baseline متکی است. Baseline پشتیبانی را در مجموعه مرورگرهای اصلی (Chrome، Edge، Firefox، و Safari در رایانه و تلفن همراه) با سه وضعیت ردیابی می‌کند:
- به‌طور گسترده دردسترس است: این ویژگی حداقل ۳۰ ماه است که در همه مرورگرهای اصلی کار می‌کند.
- به‌تازگی دردسترس قرار گرفته است: این ویژگی در همه مرورگرهای اصلی، از تاریخی که آخرین مرورگر پشتیبانی را اضافه کرده است، کار می‌کند.
- دسترس‌پذیری محدود: این ویژگی هنوز در همه مرورگرهای اصلی پشتیبانی نمی‌شود.
هر راهنمای «راهنمای وب نوین» شامل وضعیت «خط پایه» داخلی و داده‌های نسخه مرورگر از بسته web-features است. وقتی نماینده کدنویسی شما راهنمایی را بار می‌کند، وضعیت دقیق پشتیبانی از ویژگی، تاریخ‌های انتشار، و نسخه‌های مرورگر را به‌همراه دستورالعمل‌های پیاده‌سازی دریافت می‌کند. برای مثال:
Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.
به‌طور پیش‌فرض، «راهنمای وب نوین» دو قانون را براساس آن داده‌ها دنبال می‌کند:
- ویژگی‌های پایه به‌طور گسترده دردسترس: نماینده شما از این ویژگی‌ها مستقیماً بدون تشخیص ویژگی اضافی یا کد بازگشتی استفاده می‌کند. این قانون پایگاه کد شما را ساده نگه می‌دارد و از راه‌حل‌های موقت غیرضروری جلوگیری می‌کند.
- ویژگی‌های «به‌تازگی دردسترس» و «دردسترس محدود» Baseline: راهنماهای این ویژگی‌ها شامل یک استراتژی بازگشت تأییدشده است. نماینده شما از ویژگی مدرن در جایی که پشتیبانی می‌شود استفاده می‌کند و یک بازگشت تمیز برای مرورگرهای دیگر ارائه می‌دهد.
چهار الگوی جایگزین که «راهنمای وب نوین» در عمل استفاده می‌کند
همه ویژگی‌های وب به یک نوع بازگشت نیاز ندارند. «راهنمای وب نوین» هر ویژگی را براساس نحوه رفتار آن ویژگی در مرورگرهای پشتیبانی‌نشده با یکی از چهار رویکرد جایگزین مطابقت می‌دهد:
| الگوی جایگزین | وقتی «راهنمای وب نوین» از آن استفاده می‌کند |
|---|---|
| ارتقای پیش‌رو بدون کد جایگزین | ویژگی‌های تزئینی یا افزودنی که مرورگرهای پشتیبانی‌نشده بدون به‌هم ریختن چیدمان یا رفتار، به‌طور ایمن آن‌ها را نادیده می‌گیرند. |
تشخیص ویژگی CSS با قانون @supports |
سبک‌های بصری یا چیدمان که به ویژگی CSS جدیدتری بستگی دارند و اگر به‌طور جزئی اعمال شوند ممکن است خراب به‌نظر برسند. |
| جاوا اسکریپت سفارشی سبک | مشخصه‌های HTML تعاملی یا APIهایی که برای تکرار رفتار در مرورگرهای قدیمی‌تر به اسکریپت کوچک و بدون وابستگی نیاز دارند. |
| شبیه‌سازهای مرورگر بارشده به‌صورت مشروط | ویژگی‌های بزرگ‌تر CSS یا جاوا اسکریپت که به شبیه‌ساز مرورگر بررسی‌شده‌ای نیاز دارند که فقط درصورت نبود پشتیبانی بومی به‌صورت پویا بار شود. |
ارتقای پیش‌رو بدون کد جایگزین
برخی‌از ویژگی‌های مدرن، تایپوگرافی، پویانمایی‌ها، یا سرعت بار کردن صفحه را بدون تغییر دادن نحوه عملکرد صفحه بهبود می‌بخشند. اگر مرورگری این ویژگی‌ها را تشخیص ندهد، آن‌ها را نادیده می‌گیرد و بقیه صفحه را به‌طور عادی ارائه می‌دهد.
برای مثال، اعلان CSS text-wrap: balance (به‌تازگی دردسترس در Baseline) طول خطوط را در عنوان‌ها یکسان می‌کند.
.balanced {
text-wrap: balance;
}
Speculation Rules API (دسترسی محدود) صفحه‌های آتی را پیش‌واکشی یا پیش‌پرداززنی می‌کند. مرورگرهای پشتیبانی‌نشده به‌طور ایمن بلوک‌های <script type="speculationrules"> و اعلامیه‌های CSS ناشناخته را نادیده می‌گیرند.
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
به‌دلیل این رفتار، نماینده شما می‌تواند این ویژگی‌ها را مستقیماً بدون کد بازگشت اضافی اضافه کند.
تشخیص ویژگی CSS با قانون @supports
سایر ویژگی‌های CSS نحوه قرارگیری یا سبک عنصر را در صفحه تغییر می‌دهند. اگر بخشی از سبک را بدون قیدوشرط اعمال کنید، مرورگرهای پشتیبانی‌نشده ممکن است عنصر را در مکان اشتباهی ارائه دهند.
برای مثال، پرسمان‌های محفظه لنگردار (container-type: anchored، دردسترس بودن محدود) در نکته‌ابزار موقعیت‌دار به شما امکان می‌دهد پیکان نکته‌ابزار را وقتی نزدیک لبه نمای هدف برمی‌گردد، برگردانید. در مرورگرهایی که از پُرسمان‌های محفظه لنگردار پشتیبانی نمی‌کنند، پیکان نمی‌تواند چرخش را تشخیص دهد و ممکن است به جهت اشتباه اشاره کند. «راهنمای وب نوین» به نماینده شما دستور می‌دهد سبک‌های پیکان را در قانون @supports (container-type: anchored) قرار دهد تا پیکان پیش‌فرض فقط در مرورگرهایی ظاهر شود که از قانون وارونه‌سازی @container anchored() نیز پشتیبانی می‌کنند.
@supports (container-type: anchored) {
.tooltip-content::before {
content: "▼";
position: absolute;
inset-block-end: 0;
}
}
@container anchored(fallback: flip-block) {
.tooltip-content::before {
content: "▲";
inset-block-start: 0;
inset-block-end: auto;
}
}
جاوا اسکریپت سفارشی سبک
وقتی ویژگی HTML تعاملی در همه مرورگرهای اصلی پشتیبانی نمی‌شود، ممکن است وارد کردن کتابخانه طرف سوم غیرضروری باشد. برای تعاملات مستقل، «راهنمای وب نوین» یک بازگشت جاوا اسکریپت کوتاه و بدون وابستگی را در پشت بررسی ویژگی ارائه می‌دهد.
برای مثال، مشخصه closedby="any" در عنصر <dialog> (دردسترس بودن محدود) به کاربران اجازه می‌دهد با کلیک کردن روی پس‌زمینه، کادر گفتگوی مدال را ببندند. برای مرورگرهایی که از مشخصه closedby پشتیبانی نمی‌کنند، راهنما شامل یک شنونده کلیک کوچک است که ابتدا شیء HTMLDialogElement.prototype را بررسی می‌کند:
const dialog = document.querySelector('dialog');
if (!('closedBy' in HTMLDialogElement.prototype)) {
dialog.addEventListener('click', (event) => {
if (event.target !== dialog) return;
const rect = dialog.getBoundingClientRect();
const clickedInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!clickedInDialog) {
dialog.close();
}
});
}
شبیه‌سازهای مرورگر بارشده به‌صورت مشروط
برای ویژگی‌های بزرگ‌تر پلاتفرم، مانند CSS anchor positioning (دردسترس بودن محدود) یا Temporal API (دردسترس بودن محدود)، نوشتن یک جایگزین سفارشی به‌صورت دستی عملی نیست. درعین‌حال، بسته‌بندی شبیه‌ساز مرورگر برای هر کاربر هزینه بارگیری اضافی برای مرورگرهایی که از قبل از این ویژگی پشتیبانی می‌کنند اضافه می‌کند.
در این موارد، «راهنمای وب نوین» به نماینده شما دستور می‌دهد ابتدا پشتیبانی را بررسی کند و یک شبیه‌ساز مرورگر تأییدشده را به‌طور پویا با عبارت import() از بسته‌بند شما یا CDN بار کند. مرورگرهای پشتیبانی‌کننده هیچ کد اضافه‌ای بارگیری نمی‌کنند، درحالی‌که مرورگرهای قدیمی‌تر شبیه‌ساز مرورگر را درصورت درخواست واکشی می‌کنند.
if (!CSS.supports('anchor-name: --a')) {
await import('@oddbird/css-anchor-positioning');
}
سفارشی‌سازی هدف پشتیبانی مرورگر پروژه
به‌طور پیش‌فرض، «راهنمای وب نوین» ویژگی‌های «به‌طور گسترده دردسترس» Baseline را به‌عنوان ویژگی‌های ایمن برای استفاده بدون بازگشت درنظر می‌گیرد. این ویژگی به جایگزین‌هایی برای ویژگی‌های «به‌تازگی دردسترس» و «دسترسی محدود» در Baseline نیاز دارد.
پروژه شما ممکن است الزامات مرورگر متفاوتی داشته باشد. برای مثال، ممکن است سال Baseline خاصی را هدف قرار دهید، برای برنامه Electron بسازید، یا شبیه‌سازهای مرورگر را مستثنی کنید تا بسته‌ها کوچک بمانند.
می‌توانید خط‌مشی پشتیبانی مرورگر سفارشی را در فایل AGENTS.md یا CLAUDE.md پروژه‌تان تعریف کنید:
## Browser support policy
- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.
هر راهنما شامل وضعیت «خط پایه»، تاریخ انتشار، و حداقل نسخه‌های مرورگر برای هر ویژگی است. عامل شما قبل‌از نوشتن کد، خط‌مشی شما را با این داده‌های سازگاری مقایسه می‌کند. وقتی ویژگی‌ای ازقبل با هدف شما مطابقت داشته باشد، عامل کد مدرن را می‌نویسد و از کد بازگشتی صرف‌نظر می‌کند.
هم مسیر مدرن و هم مسیر بازگشت را آزمایش کنید
نوشتن کد میان‌مرورگری فقط نیمی از کار است. همچنین باید هم مسیر کد مدرن و هم مسیر بازگشت را در مرورگرهای واقعی آزمایش کنید.
وقتی در یک مرورگر آزمایش می‌کنید، فقط یک شاخه از کدتان را درستی‌سنجی می‌کنید. برای مثال، Chrome و Firefox مشخصه closedby="any" بومی را روی عنصر <dialog> اجرا می‌کنند، درحالی‌که Safari جایگزین کلیک-خارج جاوا اسکریپت را اجرا می‌کند. اگر کادر گفت‌وگو را فقط در Chrome بازرسی کنید، آن شنونده جایگزین هرگز درطول آزمایش شما اجرا نمی‌شود.
برای درستی‌سنجی هر دو مسیر کد، عامل کدنویسی‌تان را به‌طور هم‌زمان به چند موتور مرورگر متصل کنید:
- Chrome DevTools برای عامل‌ها: عاملتان را به Chrome متصل کنید تا چیدمان، گزارش‌های کنسول، و رفتار زمان اجرا را بازرسی کنید.
- Firefox DevTools MCP: عاملتان را ازطریق WebDriver BiDi به یک نمونه Firefox زنده متصل کنید.
- سرور MCP Safari: بااستفاده از فرمان داخلی
safaridriver --mcp، نماینده‌تان را به Safari متصل کنید.
با متصل شدن هر سه ابزار، نماینده شما می‌تواند صفحه‌تان را در Chrome، Firefox، و Safari در یک گردش کار باز کند. سپس می‌تواند تأیید کند که هم ویژگی بومی و هم تجربه جایگزین طبق انتظار کار می‌کنند.
شروع به کار با «راهنمای وب نوین»
برای افزودن «راهنمای وب نوین» به پروژه‌تان، نصب‌کننده تعاملی را از فهرست راهنمای پروژه‌تان اجرا کنید:
npx modern-web-guidance@latest install
اگر نسخه قبلی را نصب کرده‌اید، فرمان به‌روزرسانی را برای ارتقا به نسخه ۱.۰ اجرا کنید:
npx modern-web-guidance@latest update
همچنین می‌توانید «راهنمای وب نوین» را ازطریق بازارهای افزایه برای Claude Code، Codex، Cursor، Antigravity، GitHub Copilot، WebStorm، Kimi Code، و Grok نصب کنید.
برای کسب اطلاعات بیشتر، این منابع را کاوش کنید: