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

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

تثبيت

يمكن تثبيت إرشادات الويب الحديث واستخدامها مع أيّ وكيل ترميز يتيح استخدام المهارات.

الطريقة المُقترَحة للتثبيت هي من خلال واجهة سطر الأوامر modern-web-guidance التي أنشأها فريق Chrome. سيؤدي تثبيت إرشادات الويب الحديث من خلال واجهة سطر الأوامر modern-web-guidance إلى تفعيل التحديثات التلقائية. يمكنك التثبيت من واجهة سطر الأوامر modern-web-guidance على النحو التالي:

npx modern-web-guidance@latest install

إذا كنت تطوّر إضافات Chrome، ننصحك باستخدام الأمر التالي (اختياري):

npx modern-web-guidance@latest install --choose

يؤدي هذا الأمر إلى تشغيل معالج تفاعلي لتثبيت المهارات حسب تفضيلاتك.

إذا كنت تفضّل تثبيت إرشادات الويب الحديث بدون استخدام واجهة سطر الأوامر modern-web-guidance، يُرجى الرجوع إلى التعليمات الخاصة بالوكيل أدناه. يُرجى العِلم أنّ معظم هذه الخيارات لا تتيح التحديثات التلقائية.

Antigravity

نزِّل Antigravity وفعِّل "إرشادات الويب الحديث" أثناء عملية التثبيت أو من صفحة الإعدادات ضِمن التخصيصات ثم الإنشاء باستخدام مكوّنات Google الإضافية.

Antigravity CLI

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Gemini CLI

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

JetBrains WebStorm

يمكنك العثور على إرشادات الويب الحديث في مدير المهارات، المتوفر ضمن الإعدادات > المساعد المستند إلى الذكاء الاصطناعي > المهارات. انقر على مهارة لفتح صفحة التفاصيل. لتثبيت المهارة، انقر على الزر تثبيت لتطبيقها على بيئة التطوير المتكاملة الحالية.

GitHub CLI

gh skill install GoogleChrome/modern-web-guidance

npx skills

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

Claude Code CLI

يتطلّب تثبيت إرشادات الويب الحديث لاستخدامها مع Claude Code CLI ثلاث خطوات:

1. إضافة السوق:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. تثبيت المكوّن الإضافي من السوق:

/plugin install modern-web-guidance@googlechrome

3. إعادة تحميل المكوّنات الإضافية:

/reload-plugins

Copilot CLI

يتطلّب تثبيت إرشادات الويب الحديث لاستخدامها مع Copilot خطوتَين:

1. إضافة السوق:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. تثبيت المكوّن الإضافي من السوق:

/plugin install modern-web-guidance@googlechrome

إوزّة

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

استكشاف الإرشادات قبل التثبيت

يمكنك تقييم مكتبة أدلة إرشادات الويب الحديث قبل التثبيت من خلال البحث باستخدام طلب بحث أو استرداد أدلتنا حسب المعرّف. لإجراء ذلك، استخدِم الأمر search في واجهة سطر الأوامر للعثور على معرّف حالة الاستخدام باستخدام طلب:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

سيؤدي هذا إلى عرض كائن JSON في المحطة الطرفية:

[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]

من خلال قراءة قيم description، يمكنك بعد ذلك اختيار id الذي يعكس هدفك على أفضل وجه، واستخدام الأمر retrieve:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

في هذه الحالة، سيظهر في المحطة الطرفية دليل Markdown لحالة الاستخدام animate-to-from-top-layer. بالنسبة إلى حالات الاستخدام الأخرى، استبدِل animate-to-from-top-layer بـ أي معرّف صالح لحالة استخدام.

ما هي مزايا استخدام إرشادات الويب الحديث؟

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

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

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

ما هي محتويات إرشادات الويب الحديث؟

تتضمّن إرشادات الويب الحديث أفضل الممارسات لأكثر من 100 حالة استخدام لتطوير الويب في عدة مجالات أساسية. في الخلفية، تكون هذه الإرشادات مهارة وكيل تُعلِم وكيل الترميز كيفية استدعاء واجهة سطر الأوامر modern-web-guidance للعثور على أفضل الإرشادات واستردادها لحالة الاستخدام.

  • تجربة المستخدم: انتقالات صفحة العرض، وتنسيق CSS scrollbar-color، والرسوم المتحركة للدخول والخروج
  • CSS: طلبات البحث عن الحاويات، ومساحات الألوان الحديثة مثل oklch، وتنسيق الشبكة الفرعية CSS، وtext-wrap، واقتصاص ارتفاع سطر الطباعة
  • الأداء: أدوات تشخيص "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)، وscheduler.yield لتقسيم المهام الطويلة، وجدولة المهام في الخلفية، وتحديد أولوية تحميل الصور
  • النماذج: حقول الإدخال ذات الحجم التلقائي (field-sizing: content)، وأنماط التحقق الدقيقة باستخدام :user-invalid
  • مكوّنات واجهة المستخدم المضمّنة: التحكّم المباشر في مربّعات الحوار، وCSS Anchor Positioning لتلميحات الأدوات، وpopover
  • تسهيل الاستخدام: إعلانات الأخطاء التي يمكن الوصول إليها، وإدارة تركيز لوحة المفاتيح
  • الذكاء الاصطناعي المضمّن: استخدام نماذج العملاء المحلية على الجهاز فقط (واجهات برمجة التطبيقات الأصلية لاكتشاف اللغة والتلخيص والترجمة).
  • مفاتيح المرور: تسجيل مفتاح المرور والمصادقة عليه وإدارته

هذه بعض حالات الاستخدام من كل مجال. للاطّلاع على جميع حالات الاستخدام، يمكنك عرض الـ قائمة الكاملة لحالات الاستخدام.

Baseline

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

  • التوفّر المحدود يعني أنّ الميزة غير متوافقة.
  • المتاحة حديثًا تعني أنّ الميزة أصبحت متوافقة مؤخرًا خلال آخر 30 شهرًا.
  • المتاحة على نطاق واسع تعني أنّ الميزة متوافقة منذ 30 شهرًا على الأقل.

في حين أنّ Baseline هي تعريف لتوافق ميزات الويب، فهي أيضًا جانب قابل للإعداد في مشروعك. يمكنك اختيار هدف Baseline، ثم ضبط مشروعك لاستخدامه من خلال إضافته إلى ملف AGENTS.md أو CLAUDE.md، على سبيل المثال:

This project's Baseline target is Baseline 2024.

<other project info...>

إرشادات الويب الحديث والحلول الاحتياطية للميزات

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

كيف يتم ضمان الدقة؟

تحتوي كل حالة استخدام في إرشادات الويب الحديث على مجموعة من التقييمات التي تتم معايرتها باستمرار لضمان جودة النتائج.

تُشغّل تقييمات حالات الاستخدام أداة ضمان الجودة المبرمَجة لاختبار السلوك الصحيح للوكيل، مع دور مركزي لـ Playwright:

  1. لكل دليل، يتم تطوير نص برمجي في Playwright لاختبار ما إذا تم اتّباع تفاصيل التنفيذ في الدليل، على سبيل المثال، ما إذا تم الالتزام بـ @media (prefers-reduced-motion: reduce) عندما يكون ذلك مطلوبًا.
  2. تتم معايرة نصوص Playwright البرمجية هذه باستمرار استنادًا إلى نموذج مرجعي "صحيح" يتوقّع تحقيق معدّل نجاح بنسبة% 100. من ناحية أخرى، تتحقّق النصوص البرمجية من نموذج تم تنفيذه بشكل خاطئ عمدًا ويتوقّع تحقيق معدّل نجاح بنسبة% 0.
  3. إذا لم يحقّق أحد النموذجين "الصحيح" والمنفّذ بشكل خاطئ عمدًا معدّلَي نجاح بنسبة% 100 و% 0 على التوالي، يعيد مولّد المحتوى المحاولة تلقائيًا باستخدام السياق إلى أن يتم تحقيق معايرة بنسبة% 100.
  4. أخيرًا، يتم تطبيق التقييمات الشاملة على تطبيق أساسي. أحد هذه التقييمات غير موجّه، وهو عنصر تحكّم، باستخدام بيانات التدريب التلقائية بدون استدعاء إرشادات الويب الحديث لإكمال مهمة. يتناول تقييم آخر (التجربة) المهمة نفسها باستخدام إرشادات الويب الحديث.

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

الخطوات التالية

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