التوافق مع جميع المتصفّحات تلقائيًا: آلية عمل البدائل في Baseline ضمن "إرشادات الويب الحديث"

Tara Agyemang

تاريخ النشر: 12 نوفمبر 2026

اطلب من وكيل ترميز مستند إلى الذكاء الاصطناعي إنشاء تلميح أو مربّع حوار مشروط، وانظر عن كثب إلى الرمز البرمجي الذي يكتبه. في معظم الأحيان، يستعين الوكيل بلغة JavaScript لإعادة إنشاء الميزات المضمّنة في المتصفّح. إذا طلبت من الوكيل استخدام ميزات CSS أو HTML أحدث، غالبًا ما يتخطّى عملية رصد الميزات والحلول البديلة. يؤدي هذا الإغفال إلى ترك المستخدمين على متصفحات غير متوافقة مع صفحة معطّلة.

تتضمّن إرشادات الويب الحديث التوافق مع المتصفّحات في كل اقتراح. يجمع كل دليل بين ميزات الويب الحديثة وبيانات التوافق مع Baseline وأنماط الإجراءات الاحتياطية التي تم التحقّق منها. يتناول هذا المنشور كيفية استخدام الوكيل لهذه البيانات لكتابة رمز برمجي حديث ومتوافق مع مختلف المتصفّحات.

لماذا تخطئ وكلاء الترميز في دعم المتصفّح بدون توجيه؟

بدون توجيه، نادرًا ما يتحقّق وكلاء الترميز من المتصفّحات التي يحتاج مشروعك إلى دعمها قبل كتابة الرمز البرمجي. بدلاً من ذلك، يميلون إلى الوقوع في أحد الطرفين:

  • الاعتماد على الرموز البرمجية القديمة: بيانات تدريب النماذج مليئة بالأنماط القديمة، وتُظهر تقييمات "إرشادات الويب الحديث" أنّ النماذج لا تزال تقترح العديد من هذه الأنماط. غالبًا ما يكتب الوكلاء رموز JavaScript معقّدة أو يضيفون مكتبات خارجية في حين يمكنهم استخدام ميزة HTML أو CSS مضمّنة لإنجاز المهمة.
  • استخدام ميزات جديدة بدون شبكة أمان: عندما تطلب من الوكيل استخدام ميزة ويب جديدة، يكتب عادةً رمزًا برمجيًا للمتصفّحات المتوافقة ويتوقف عند هذا الحد. فهي تتخطى رصد الميزات وتتجاهل الإجراءات الاحتياطية، ما يؤدي إلى تعطُّل الصفحة في المتصفحات التي لا تتيح الميزة.

توضّح البيانات الواردة من مجموعة تقييم إرشادات الويب الحديث مدى شيوع هذه الفجوة. بالنسبة إلى الميزات التي لا تعمل بعد على جميع المتصفّحات الرئيسية، تختبر مجموعة التقييم رصد الميزات أو قواعد @supports أو الإجراءات الاحتياطية أو polyfill الشرطية. أما النماذج غير الموجَّهة، فتجتاز هذه الاختبارات بنسبة %43 فقط. وعند تفعيل ميزة "إرشادات الويب الحديث"، ترتفع نسبة النجاح إلى %87.

كيفية توجيه بيانات "المرجع" لكل اقتراح

لتحديد متى تحتاج ميزة ويب إلى إجراء احتياطي، تعتمد ميزة "إرشادات الويب الحديث" على Baseline. يتتبّع Baseline مدى توفّر الميزات في مجموعة المتصفّحات الأساسية (Chrome وEdge وFirefox وSafari على أجهزة الكمبيوتر والأجهزة الجوّالة) من خلال ثلاث حالات:

  • متاحة على نطاق واسع في Baseline: تعمل الميزة في جميع المتصفّحات الأساسية منذ 30 شهرًا على الأقل.
  • متاحة حديثًا في Baseline: تعمل الميزة في جميع المتصفّحات الأساسية، بدءًا من تاريخ إضافة آخر متصفّح متوافق.
  • توفّر محدود: لا تتوافق هذه الميزة مع جميع المتصفّحات الأساسية بعد.

يتضمّن كل دليل من أدلة "إرشادات الويب الحديث" حالة Baseline المضمّنة وبيانات إصدار المتصفّح من حزمة 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 أحدث ويمكن أن تبدو معطّلة إذا تم تطبيقها جزئيًا
رمز JavaScript مخصّص خفيف الوزن سمات HTML التفاعلية أو واجهات برمجة التطبيقات التي تحتاج إلى نص برمجي صغير لا يعتمد على أي شيء لتكرار السلوك في المتصفّحات القديمة
ملفات polyfill التي يتم تحميلها بشكل مشروط ميزات CSS أو JavaScript الأكبر حجمًا التي تتطلّب تحميل polyfill تم التحقّق منه ديناميكيًا فقط في حال عدم توفّر دعم أصلي

التحسين التدريجي بدون رمز احتياطي

تعمل بعض الميزات الحديثة على تحسين أسلوب الخط أو الصور المتحركة أو سرعة تحميل الصفحة بدون تغيير طريقة عمل الصفحة. وإذا لم يتعرّف المتصفّح على هذه الميزات، سيتجاهلها ويعرض بقية الصفحة بشكل طبيعي.

على سبيل المثال، يتيح تعريف 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;
  }
}

رمز JavaScript مخصّص خفيف الوزن

عندما لا تكون ميزة HTML تفاعلية متوافقة مع جميع المتصفّحات الأساسية، قد لا يكون من الضروري استخدام مكتبة تابعة لجهة خارجية. بالنسبة إلى التفاعلات المستقلة، توفّر ميزة "إرشادات الويب الحديث" بديلاً قصيرًا لـ JavaScript لا يعتمد على أي ميزات أخرى، وذلك بعد إجراء فحص للميزات.

على سبيل المثال، تتيح السمة 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();
    }
  });
}

ملفات polyfill التي يتم تحميلها بشكل مشروط

بالنسبة إلى ميزات المنصة الأكبر حجمًا، مثل تحديد موضع الارتساء في CSS (توفّر محدود) أو واجهة برمجة التطبيقات Temporal (توفّر محدود)، لا يمكن كتابة عنصر احتياطي مخصّص يدويًا. وفي الوقت نفسه، يؤدي تجميع polyfill لكل مستخدم إلى زيادة تكلفة التنزيل للمتصفحات التي تتيح الميزة حاليًا.

في هذه الحالات، توجّه مهارة "إرشادات الويب الحديث" الوكيل للتحقّق من توفّر الدعم أولاً وتحميل polyfill تم التحقّق منه ديناميكيًا باستخدام تعبير import() من حزمة الرموز أو شبكة توصيل المحتوى (CDN). تنزّل المتصفّحات المتوافقة رمزًا إضافيًا صفرًا، بينما تجلب المتصفّحات القديمة رمز polyfill عند الطلب.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

تخصيص المتصفّحات المستهدَفة في مشروعك

تتعامل ميزة "إرشادات الويب الحديث" تلقائيًا مع الميزات المتاحة على نطاق واسع في Baseline على أنّها آمنة للاستخدام بدون بدائل. وتتطلّب هذه الميزات بدائل للميزات "المتوفّرة حديثًا" و"المتوفّرة بشكل محدود" في Baseline.

قد يتطلّب مشروعك متصفّحات مختلفة. على سبيل المثال، يمكنك استهداف سنة معيّنة من Baseline، أو إنشاء تطبيق Electron، أو استبعاد polyfills للحفاظ على صغر حجم الحِزم.

يمكنك تحديد سياسة مخصّصة للتوافق مع المتصفّحات في ملف 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.

يتضمّن كل دليل حالة Baseline وتاريخ الإصدار والحدّ الأدنى لإصدارات المتصفّح لكل ميزة. يقارن الوكيل سياستك ببيانات التوافق هذه قبل كتابة الرمز البرمجي. عندما تستوفي ميزة معيّنة هدفك، يكتب الوكيل الرمز الحديث ويتخطّى الرمز الاحتياطي.

اختبار كل من المسار الحديث والمسار الاحتياطي

كتابة رمز متوافق مع جميع المتصفحات هي نصف المهمة فقط. تحتاج أيضًا إلى اختبار كل من مسار الرمز الحديث ومسار الاحتياطي في المتصفحات الحقيقية.

عند الاختبار في متصفح واحد، فإنك تتحقق من فرع واحد فقط من التعليمات البرمجية الخاصة بك. على سبيل المثال، يشغّل Chrome وFirefox السمة closedby="any" الأصلية على عنصر <dialog>، بينما يشغّل Safari الإجراء الاحتياطي للنقر خارج العنصر في JavaScript. إذا فحصت مربّع الحوار في Chrome وحده، لن يتم تشغيل أداة الاستماع الاحتياطية هذه أثناء الاختبار.

للتحقّق من كلا المسارَين البرمجيَين، اربط وكيل الترميز بمحرّكات متصفّحات متعدّدة في الوقت نفسه:

عند ربط الأدوات الثلاث، يمكن لوكيلك فتح صفحتك في Chrome وFirefox وSafari في سير عمل واحد. ويمكنه بعد ذلك التأكّد من أنّ الميزة الأصلية وتجربة الاحتياط تعملان على النحو المتوقّع.

بدء استخدام ميزة "إرشادات الويب الحديث"

لإضافة إرشادات الويب الحديث إلى مشروعك، شغِّل أداة التثبيت التفاعلية من دليل مشروعك:

npx modern-web-guidance@latest install

إذا كان لديك إصدار سابق مثبَّت، شغِّل أمر التحديث للترقية إلى الإصدار 1.0:

npx modern-web-guidance@latest update

يمكنك أيضًا تثبيت إرشادات الويب الحديث من خلال أسواق المكوّنات الإضافية لكل من Claude Code وCodex وCursor وAntigravity وGitHub Copilot وWebStorm وKimi Code وGrok.

لمزيد من المعلومات، يمكنك الاطّلاع على المراجع التالية: