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

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

تثبيت

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

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

npx modern-web-guidance@latest install

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

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

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

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

Antigravity

نزِّل Antigravity وفعِّل "إرشادات الويب الحديث" (modern-web-guidance) أثناء عملية التثبيت أو من صفحة الإعدادات ضِمن التخصيصات ثم إنشاء باستخدام مكوّنات 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

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

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

Grok

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

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 للعناصر المنبثقة، وpopover
  • تسهيل الاستخدام: إتاحة إعلانات الأخطاء وإدارة تركيز لوحة المفاتيح
  • الذكاء الاصطناعي المدمج: يمكنك استخدام نماذج العملاء المحلية التي تعمل على الجهاز فقط (واجهات برمجة التطبيقات الأصلية لاكتشاف اللغة والتلخيص والترجمة).
  • مفاتيح المرور: تسجيل مفاتيح المرور والمصادقة عليها وإدارتها

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

Baseline

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

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

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

This project's Baseline target is Baseline 2024.

<other project info...>

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

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

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

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

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

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

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

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

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