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

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

تثبيت

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

طريقة التثبيت المُقترَحة هي من خلال 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 وفعِّل "إرشادات الويب الحديث" (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 Code ثلاث خطوات:

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

استكشاف التطبيق قبل تثبيته

يمكنك تقييم مكتبة أدلة إرشادات الويب الحديث قبل التثبيت من خلال البحث باستخدام طلب بحث أو استرداد أدلتنا حسب رقم التعريف. لإجراء ذلك، استخدِم الأمر 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 للعثور على أفضل الإرشادات واستردادها لحالة الاستخدام.

  • تجربة المستخدم: انتقالات العرض، وتنسيق scrollbar-color CSS، وحركات الدخول والخروج
  • 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...>

إرشادات الويب الحديثة والبدائل المتوافقة مع المتصفحات القديمة

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

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

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

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

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

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

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

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