أدلة "إرشادات الويب الحديث"

تحسين مستوى رؤية شريط التمرير للمستخدمين الذين يفضّلون الواجهات العالية التباين

تطبيق تأثيرات بصرية مخصّصة باستخدام أدوات تظليل WebGL على محتوى HTML

إرشادات الألوان للويب، بما في ذلك متطلبات التباين، وأنظمة الألوان الفاتحة والداكنة، ووضع الألوان المفروضة، وإنشاء تدرجات وظلال من لون أساسي.

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

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

تخصيص لون شريط التمرير أو سُمكه

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

دمج عناصر HTML التفاعلية في مشهد ثلاثي الأبعاد

اختَر لون نص قابلاً للقراءة مع تباين كافٍ على لون خلفية ديناميكي.

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

التقاط محتوى HTML الديناميكي وتصديره كصور أو إطارات فيديو من داخل لوحة الرسم

عرض المحتوى المعروض في لوحة الرسم لميزات المتصفّح، مثل التكنولوجيات المساعِدة أو الترجمة أو وضع القراءة

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

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

يمكنك دمج أشكال متعددة لإنشاء تأثيرات مقتطعة أو "مفرغة" معقدة في العناصر، مثل إضافة نتوء إلى عنصر.

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

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

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

تأثيرات بصرية باستخدام CSS، مثل الظلال المتعدّدة الطبقات وأوضاع المزج والتدرّجات مع استكمال الألوان المتوقّعة والأنماط، مثل الخطوط ولوحات الشطرنج والنقاط والرسوم البيانية الدائرية التي تم إنشاؤها من التدرّجات وحدها

حدِّد أنماط الخطوط بحيث يظل النص قابلاً للقراءة ومتسقًا من الناحية المرئية في حال التبديل بين الخط المفضّل وأحد الخطوط الاحتياطية (أو العكس).

حدِّد أنماط الخطوط بحيث يظل النص قابلاً للقراءة ومتسقًا من الناحية المرئية في الحالات التي يتم فيها استخدام خطوط متعددة لعرض فقرة نصية واحدة.

يمكنك تطبيق أنماط واقعية من العوامل الجوية والملمس على العناصر لمنحها مظهرًا طبيعيًا أو قديمًا أو ماديًا.

أنشئ شريط تقدّم للتمرير أو أداة تتبُّع تقدّم تدريجية أو أي مؤشر مرئي يوضّح مدى تقدّم المستخدم في التمرير في الصفحة أو القسم.

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

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

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

أنشئ ميزة السحب للكشف التي من شأنها تمكين المستخدم من السحب لأسفل على الشاشة للكشف عن المزيد من المحتوى، مثل شريط البحث.

أنشئ جدول بيانات يعرض البيانات المجدولة بدلالات مناسبة للعناوين، ويظل قابلاً للقراءة والتنقّل على الشاشات الصغيرة وباستخدام التكنولوجيا المساعِدة.

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

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

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

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

يمكنك عرض وإدارة الرموز التي يمكن ضبطها وتحديد مَعلماتها من CSS، وهي سريعة التحميل وواضحة بأي دقة ويتم عرضها بشكل صحيح (أو إخفاؤها) في التكنولوجيات المساعِدة.

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

أنشئ مكوّن بطاقة يكيّف عرضه مع المساحة والمحتوى المتاحَين.

أنشئ مكوّن قائمة يعرض قائمة بالخيارات أو الإجراءات، مع إتاحة القوائم الفرعية المتداخلة.

تمييز القسم المرئي حاليًا من الصفحة في قائمة التنقل

يمكنك إنشاء شريط تقدّم منسَّق يعرض مستوى إكمال مهمة أو عملية، في كل من الحالتين المحدّدة وغير المحدّدة.

أنشئ مكوّن بطاقة منبثقة يعرض معاينة منظَّمة تفاعلية للصفحة التي سينتقل إليها نوع معيّن من الروابط (مثل ملف المستخدم الشخصي) عند تمرير مؤشر الماوس فوقه.

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

يمكنك إنشاء إشعارات منبثقة وتراكبية غير مزعجة لإرسال رسائل مستمرة وقابلة للتكديس والتواصل بشأن الحالة.

يمكنك إنشاء مكوّن تبديل الوضع الداكن الذي يسمح للمستخدمين بإلغاء الإعداد المفضّل لنظام الألوان في النظام للموقع الإلكتروني الحالي.

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

تعرَّف على كيفية إنشاء مؤشر تحميل يعرض حالة الانشغال لجميع المستخدمين، ويراعي الإعدادات المفضّلة لتقليل الحركة، ويتحرك بكفاءة.

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

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

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

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

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

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

يمكنك إخفاء العناصر أو عرضها بسلاسة عند إضافتها أو إزالتها من DOM أو عند تبديل قيم العرض.

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

إتاحة السحب لنقل عنصر عائم في الصفحة

يمكنك إنشاء تأثيرات مستندة إلى الانتقال للأعلى أو للأسفل (مثل تأثير اختلاف المنظر) حيث تتحرك طبقات المقدّمة والخلفية بمعدلات مختلفة، ما يخلق شعورًا بالعمق أثناء انتقال المستخدم للأعلى أو للأسفل.

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

تأكَّد من تحميل حالة الصفحة المهمة واستقرارها قبل بدء انتقال العرض بين المستندات. وهذا يعني أنّه يتم تحميل أنماط CSS المهمة وتطبيقها، وتحميل JavaScript المهمة وتشغيلها، وتحليل رمز HTML المرئي للعرض الأولي للصفحة قبل تشغيل عملية الانتقال.

يمكنك تنظيم توقيت الحركة أو الانتقال عبر العناصر الشقيقة بحيث يبدأ كل عنصر بعد تأخير محسوب بناءً على موضعه في قائمة العناصر الشقيقة.

يمكنك إنشاء انتقالات سلسة بين عمليات التنقّل في الصفحة الكاملة، مثل التلاشي المتقاطع أو تأثيرات الكشف المخصّصة أو تحويل المحتوى من صفحة إلى أخرى.

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

يمكنك تبديل مستوى ظهور مربّع حوار أو نافذة منبثقة من زر بدون كتابة رمز JavaScript.

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

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

يمكنك تمييز نطاقات نصية عشوائية على صفحة، مثل نتائج البحث أو الأخطاء الإملائية أو مؤشرات التعديل التعاوني.

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

اعرض معاينة مباشرة لتأثير الزر عندما يشير المستخدم إلى اهتمامه (مثل التمرير فوقه أو التركيز عليه أو الضغط عليه مع الاستمرار) ولكن قبل أن يلتزم بالنقر عليه.

إنشاء مربّع حوار مشروط يمكن إغلاقه من خلال النقر خارج مربّع الحوار

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

يمكنك نقل عنصر DOM أو إعادة ربطه بدون فقدان حالة العنصر المهمة، مثل حالات التفاعل (:focus/:active) وحالة تحميل <iframe> وحالة الصور المتحركة/الانتقال وما إلى ذلك

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

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

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

منع الصفحة الأساسية من الانتقال للأعلى أو للأسفل أثناء فتح مربّع حوار مشروط

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

يمكنك تحريك تغييرات الحالة داخل مكوّن واحد (بطاقة أو قائمة أو لوحة أو شجرة فرعية أخرى) بينما تظل بقية الصفحة تفاعلية، ويتم تشغيل انتقالات أخرى في الوقت نفسه.

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

مزامنة مؤشرات التنقّل ولوحات المحتوى المرتبطة وتتبُّع الإحصاءات مع العنصر الذي تم تثبيته بشكل نشط في حاوية قابلة للتمرير

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

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

يمكنك إنشاء قائمة عناصر قابلة للتمرير (مثل لوحة عرض دوّارة للصور أو سلسلة محادثات) يمكن عرضها مع تمرير عنصر معيّن إلى العرض في العرض الأولي.

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

تنفيذ ميزة التنقّل المكاني المسهَّل باستخدام مفاتيح الأسهم التي تعمل بشكل صحيح في أوضاع التنسيق المختلفة (الشبكة وما إلى ذلك)

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

يمكنك السماح للمستخدمين بالتمرير سريعًا أفقيًا على عنصر قائمة أو لوحة محتوى للكشف عن أزرار الإجراءات المستندة إلى السياق أو قائمة جانبية بدون بدء إجراء تلقائيًا.

يمكنك تفعيل التأثيرات المرئية أو الصور المتحركة أو تغييرات التركيز على عنصر مستهدَف فقط بعد انتهاء الانتقال السلس آليًا إلى هذا العنصر.

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

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

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

يمكنك تصميم شريط تمرير نطاق أصلي باستخدام مسار مخصّص ومؤشر وملء وحالات تركيز مع الحفاظ على الوظائف الأصلية وإمكانية الوصول.

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

أنشئ نموذج دفع يجمع تفاصيل البطاقة باستخدام قيم الإكمال التلقائي الصحيحة وميزة الملء التلقائي.

أنشئ نموذج تسجيل دخول يتضمّن قيم إكمال تلقائي صحيحة ويتيح ميزة "الملء التلقائي".

أنشئ نموذج اشتراك يتضمّن قيم إكمال تلقائي صحيحة ويتيح ميزة "الملء التلقائي".

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

أنشئ نموذج عنوان يتضمّن سمات الإكمال التلقائي الصحيحة ويتيح الملء التلقائي.

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

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

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

استخدِم CSS لتمييز حقول النماذج التي تم ملؤها تلقائيًا بواسطة المتصفّح ولم يعدّلها المستخدم.

يمكنك تنفيذ ميزة "الضغط على مفتاح Enter للإرسال" في مربّعات النص وحقول الإدخال المكوّنة من سطر واحد (المحادثة والبحث وإعادة التسمية المضمّنة) بأمان لمستخدمي "محرِّر أسلوب الإدخال" (IME) لمنع إرسال نص غير مكتمل.

يجب تقديم رسالة خطأ لحقول النماذج المطلوبة التي تم تخطّيها أو تركها فارغة فقط بعد تفاعل المستخدم، وذلك لتجنُّب الأخطاء الاستباقية وضمان تقديم الملاحظات في الوقت المناسب وبما يتناسب مع سياق تجربة المستخدم.

أنشئ مكوّن اختيار مخصّصًا يمكن أن تحتوي خياراته على تنسيق HTML معقّد (مثل الصور والرموز والتنسيقات المنسّقة الأخرى) بدلاً من النص العادي فقط.

التحقّق من أنّه تم تحديد خيار غير تلقائي في قائمة اختيار فقط بعد تفاعل المستخدم مع عنصر التحكّم

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

يجب عرض ملاحظات التحقّق من صحة حقول النماذج (مثل متطلبات تعقيد كلمة المرور أو تنسيق البريد الإلكتروني) فقط بعد أن يكمل المستخدم تفاعله الأولي، وذلك لتجنُّب الأخطاء المبكرة عند تحميل الصفحة أو أثناء كتابة المستخدم.

يمكنك تسهيل استخدام العناصر المخصّصة تلقائيًا، وضبط الأدوار وحالة ARIA من خلال مزيج ElementInternals ARIA، وإدارة التركيز باستخدام delegatesFocus، والحفاظ على علاقات ARIA ضمن جذر ظل واحد.

تحديد العناصر المخصّصة المستقلة وتسجيلها وإدارة مراحل نشاطها، بما في ذلك قواعد الدالة الإنشائية والاستدعاءات في إحدى مراحل النشاط وتوقيت الترقية وانعكاس السمات/الخصائص وقواعد التسمية

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

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

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

يمكنك تغليف نموذج العناصر في المستند (DOM) وأنماط المكوّن باستخدام Shadow DOM، وإنشاء الشجرة بكفاءة باستخدام نماذج HTML، وعرض محتوى المستهلك باستخدام الخانات.

يمكنك تطبيق الأنماط على حدود الظل باستخدام أدوات الاختيار :host، والخصائص الموروثة والمخصّصة للمظاهر، و::slotted و ::part، وطبقات التتالي وطلبات البحث عن الحاويات داخل المكوّنات.

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

يمكنك تحريك المكوّنات التفاعلية بسلاسة (مثل القوائم المنسدلة والقوائم والبطاقات الموسّعة) من أبعادها الطبيعية وإليها.

يمكنك حساب حجم عنصر استنادًا إلى حجمه الأساسي، مع التأكّد من أنّه يتناسب مع قيود التصميم المحدّدة.

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

تطبيق قواعد أو تعريفات CSS معيّنة بشكل مشروط فقط إذا كان المتصفّح يتيح قاعدة معيّنة تبدأ بالرمز @.

يمكنك إنشاء مكوّن يغيّر تنسيقه استنادًا إلى ما إذا كان يحتوي على عناصر فرعية معيّنة (أو لا). على سبيل المثال، إذا كان المكوّن يحتوي على صورة، استخدِم تصميمًا متعدّد الأعمدة، وإلا استخدِم تصميمًا بعمود واحد.

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

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

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

تغيير حجم العناصر، مثل حجم الخط والتباعد وأحجام الوسائط، بسلاسة استنادًا إلى حجم الحاوية الرئيسية بدلاً من استخدام نقاط توقّف ثابتة

يمكنك تحريك خصائص تحويل CSS الفردية أو إلغاؤها (مثل translate وrotate وscale) بشكل مستقل عن خصائص التحويل الأخرى في عنصر واحد.

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

يمكنك تقليل التكرار المفرط للأنماط من خلال تضمين منطق الأنماط المعقّد أو الديناميكي في دوال قابلة لإعادة الاستخدام (مثل دالة تحسب تدرجًا استنادًا إلى مجموعة من مَعلمات الإدخال).

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

يمكنك استهداف العناصر استنادًا إلى تقاطع أو اتحاد المحدّدات وقواعد @ الشرطية مع تقليل التكرار.

يمكنك إنشاء مكوّنات تكيّف المنطق المرئي استنادًا إلى السياق الدلالي باستخدام طلبات البحث عن نمط حاوية CSS.

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

تنسيق العناصر الرئيسية لحقل نموذج (مثل التصنيفات أو مجموعات الحقول) عندما يكون الحقل غير صالح

يمكنك إنشاء أطياف مرئية ديناميكية أو ترتيبات تخطيط تتكيف تلقائيًا مع عدد العناصر في المجموعة.

يمكنك حساب الوقت المنقضي أو المتبقي بين التواريخ والأوقات، وموازنة وحدات المدة، وتنسيق المدد المترجَمة التي يمكن لشخص عادي قراءتها باستخدام Temporal.Duration وIntl.DurationFormat.

يمكنك إنشاء نماذج لتواريخ التقويم غير المرتبطة بالموقع الجغرافي، وأوقات الساعة الحائطية، والتواريخ الجزئية (أعياد الميلاد المتكررة، وتواريخ انتهاء صلاحية بطاقات الائتمان)، والفترات الشهرية المتكررة بدون انحراف المنطقة الزمنية باستخدام أنواع Temporal Plain.

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

يمكنك تحليل الفواصل الزمنية وفرزها وقياسها بين الطوابع الزمنية ISO 8601 التي تقل عن الملّي ثانية أو النانو ثانية بدون حدوث تداخلات في اقتطاع التاريخ باستخدام Temporal.Instant.

عرض التواريخ وحسابها في أنظمة التقويم غير الميلادية (مثل التقويم الهجري أو العبري أو الصيني) بدقة للمستخدمين الدوليين

تجميع C/C++‎ إلى WebAssembly باستخدام Emscripten

قسِّم المعالجة المتزامنة الثقيلة (العمليات الحسابية المعقّدة و/أو التكرارات الطويلة) أو تعديلات DOM، للسماح للمتصفّح بمعالجة إدخالات المستخدم وإعادة رسم الشاشة.

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

تحميل أو إعداد التبعيات غير المتزامنة بشكل مشروط (مثل استيراد polyfills لميزات الويب غير المتوفّرة) بدون الحاجة إلى تنسيق معقّد في جميع تبعيات النصوص البرمجية للصفحة

يمكنك تجميع أحداث متعددة من الإحصاءات والقياس عن بُعد وCore Web Vitals معًا في إشارة واحدة لتقليل ازدحام الشبكة وتقليل الحمل على الخادم، مع الاستمرار في تقديم تحديثات في الوقت الفعلي.

تقليل الوقت المستغرَق للعرض في صفحات الويب التي تحتوي على الكثير من المحتوى (مثل الصفحات التي تتضمّن خلاصات طويلة أو الكثير من المقالات أو لوحات البيانات المعقّدة)، وذلك من خلال تأجيل عرض أي محتوى لا يظهر للمستخدم على الفور

أجِّل العمليات المكلفة، مثل تعديلات DOM أو جلب البيانات أو تتبُّع الإحصاءات أو إعادة احتساب التنسيق، إلى ما بعد اكتمال الانتقال للحفاظ على سلاسة الأداء.

قدِّم صورًا تزيينية محسّنة (مثل الخلفيات أو رموز واجهة المستخدم أو الأقنعة المعقّدة) من خلال توفير تنسيقات صور من الجيل التالي (مثل AVIF أو WebP) مع كثافات بكسل متعددة (مثل 1x و2x) في الوقت نفسه، ليتمكّن المتصفّح من تحديد أفضل مزيج من حجم الملف والجودة المرئية بشكل ديناميكي بما يتناسب مع إمكانيات جهاز المستخدم.

يمكنك خفض أولوية عمليات جلب البيانات في الخلفية التي يتم إجراؤها باستخدام واجهة Fetch API لمنع حدوث تعارض في الشبكة مع الطلبات التي يبدأها المستخدم.

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

يمكنك الحفاظ على موارد النظام وعمر البطارية من خلال إيقاف تنفيذ JavaScript في الخلفية مؤقتًا (مثل صور <canvas> المتحركة أو عرض WebGL أو استطلاع بيانات WebSocket عالي التردد) عندما يكون المكوّن خارج الشاشة، ثم استئنافها في الوقت المناسب عند الانتقال مرة أخرى إلى العرض.

تتيح هذه الميزة الانتقال بشكل أسرع إلى طرق العرض التي تمت زيارتها سابقًا في تطبيق من صفحة واحدة (SPA) من خلال الحفاظ على حالة DOM الهيكلية بدلاً من تدميرها وإعادة إنشائها عند كل عملية تنقّل.

تقديم وعرض اختبارات A/B أو الاختبارات المتعددة المتغيرات أو غيرها من التجارب باستخدام JavaScript من جهة العميل لتغيير أو إدخال HTML وCSS وJavaScript بدون عرض المحتوى الأصلي أولاً قبل الوميض أو الوميض لعرض محتوى التجربة.

تحديد رموز JavaScript البطيئة التشغيل والأسباب الأخرى لضعف الاستجابة في مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)

تحديد النصوص البرمجية المسؤولة بشكل أساسي عن الصور المتحركة التي يستغرق عرضها وقتًا طويلاً

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

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

يمكنك قياس الوقت الذي تستغرقه تفاعلات المستخدمين وعمليات التنقّل من جهة العميل لعرض تعديلات جديدة على المحتوى على الشاشة.

يمكنك تحسين أولوية تحميل الصور المرشّحة لمقياس "سرعة عرض أكبر محتوى مرئي" (LCP) وخفض أولوية الصور غير المهمة لتقليل تأخير تحميل الموارد المهمة.

تحسين الأولوية النسبية للمحتوى الذي تم تحميله مسبقًا لتقليل تأخيرات تحميل الموارد المهمة

يمكنك تحسين أولوية تحميل النصوص البرمجية من خلال تعزيز النصوص البرمجية غير المتزامنة المهمة وخفض أولوية النصوص البرمجية غير الأساسية أو المتأخرة لتحسين التسلسل وتقليل التأخير.

اجعل التفاعلات أسرع وأكثر استجابة (من خلال تقليل نتائج "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)) عن طريق تجنُّب إعادة احتساب التنسيقات في التنسيقات المعقّدة، مثل لوحات البيانات التي تحتوي على الكثير من البيانات أو الشبكات التي تشبه جداول البيانات.

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

إرشادات قابلة للتنفيذ لتحسين تطبيقات الويب الحديثة يمكنك استخدام هذا الدليل عند تدقيق الأداء وتحسين مقاييس التحميل وإصلاح التفاعلات البطيئة وتحسين Core Web Vitals (سرعة عرض أكبر محتوى مرئي ومدى استجابة الصفحة لتفاعلات المستخدم ومتغيّرات التصميم التراكمية)

تتبَّع بشكل موثوق الإحصاءات وCore Web Vitals والأخطاء وبيانات القياس عن بُعد خلال زيارة المستخدم للصفحة بالكامل، وأجِّل إرسال البيانات إلى أن يغادر المستخدم الصفحة.

استخدِم صورًا محسّنة الدقة في عناصر CSS الزائفة (مثل ::before و::after) لتقليل عدد عُقد DOM.

يمكنك جدولة المهام حسب أولويتها لضمان تنفيذ المهام المهمة أولاً وتأجيل المهام التي تعمل في الخلفية.

إرشادات ترميز قابلة للتنفيذ لإنشاء تطبيقات ويب سهلة الاستخدام، تشمل ترميز HTML الدلالي وإدارة التركيز والنماذج والوسائط والاختبار استخدم هذه المهارة عند تدقيق أو تنفيذ ميزات تسهيل الاستخدام أو التنقل عبر لوحة المفاتيح أو ARIA.

مزامنة حالات تسهيل الاستخدام الآلية (مثل aria-invalid) مع الحالة المرئية :user-invalid لضمان تلقّي مستخدمي برامج قراءة الشاشة ملاحظات حول الأخطاء بعد التفاعل فقط، ما يعكس التجربة المرئية.

استخدِم المحتوى الذي تم إنشاؤه باستخدام CSS (::before/::after) بطرق تتيح الوصول إليه، بما في ذلك النص البديل للمحتوى الزخرفي.

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

يمكنك مقارنة عناوين الويب المصدر والمواقع الإلكترونية والتحقّق من صحتها بأمان في الرسائل وعناوين URL على مستوى المستندات المختلفة بدون تحليل السلاسل المعرّضة للأخطاء.

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

الوصول إلى الموارد على الشبكة المحلية للمستخدم أو واجهة الاسترجاع من تطبيق ويب متاح للجميع

يمكنك مصادقة مستخدم مكرّر الزيارة باستخدام مفتاح مرور لتسجيل الدخول الأساسي.

تسجيل مفتاح مرور لمستخدم حالي بدون إرسال إشعار بعد تسجيل الدخول بنجاح باستخدام كلمة المرور

السماح للمستخدمين بعرض مفاتيح المرور المسجَّلة في حساباتهم وإدارتها

التحقّق من هوية مستخدم سجّل الدخول باستخدام مفاتيح المرور الحالية قبل تنفيذ إجراء حسّاس

تسجيل مفتاح مرور لحساب مستخدم حالي

Comprehensive orientation and cross-cutting principles for implementing WebAuthn and Passkeys in web applications. يمكنك استخدام هذا الدليل عند التعامل مع تسجيل مفتاح المرور أو المصادقة أو الإدارة أو إعادة المصادقة.

يمكنك منع هجمات XSS المستنِدة إلى DOM من خلال تحديد سياسة "الأنواع الموثوق بها" لتنقية محتوى HTML غير الموثوق به، واستخدام السياسة عند الكتابة في مخازن DOM مثل innerHTML، وفرض "الأنواع الموثوق بها" من خلال "سياسة أمان المحتوى".

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

يمكنك تقييد صفحة أو عامل للتواصل فقط مع قائمة مسموح بها صريحة لنقاط نهاية الشبكة لمنع طلبات الجهات الخارجية غير المصرّح بها واستخراج البيانات من جهة العميل.

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

التحقّق من سلامة التشفير للنصوص البرمجية الخارجية وأوراق الأنماط والخطوط والصور التي يتم تحميلها من مصادر تابعة لجهات خارجية، والتحكّم في ما إذا كانت هذه الطلبات ترسل بيانات الاعتماد أو عناوين URL للمُحيل

يمكنك توقيع الرسائل أو الرموز المميّزة أو العناصر والتحقّق منها في المتصفّح باستخدام مفاتيح غير متماثلة كلاسيكية أو مقاومة للكمّ (ما بعد الكمّ) لضمان صحة البيانات وأصالتها.

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

إرشادات الأمان الوقائية لمطوّري الويب (XSS وCSP وملفات تعريف الارتباط والعزل من مصادر متعددة) استخدِم هذه المهارة لتوجيه عملية التدقيق والاختبار ونشر سياسات الأمان بأمان.

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

يمكنك نقل تطبيق ويب مثبَّت إلى مصدر جديد مع الحفاظ على إعدادات المستخدم والاختصارات على مستوى نظام التشغيل.

رصد لغة المحتوى من إنشاء المستخدمين أو محتوى الموقع الإلكتروني الحالي

يمكنك تشغيل استنتاج اللغة الطبيعية على الجهاز فقط في المتصفّح باستخدام Prompt API، مع إخراج البيانات في الوقت الفعلي، واستجابات JSON المنظَّمة، وإدارة الجلسات المتعدّدة الأدوار.

تلخيص المحتوى النصي باستخدام Summarizer API على الجهاز فقط

يمكنك ترجمة النصوص من لغة إلى أخرى باستخدام واجهة برمجة التطبيقات Translator API على الجهاز فقط.

يمكنك إتاحة وظائف جهة العميل كأدوات لوكلاء الذكاء الاصطناعي من خلال إضافة سمات WebMCP إلى نماذج HTML العادية.

تسجيل دوال JavaScript من جهة العميل آليًا كأدوات لوكلاء الذكاء الاصطناعي باستخدام واجهة WebMCP Imperative API

استخدِم هذا الدليل لتنفيذ WebMCP (بروتوكول سياق نموذج الويب) في تطبيقات المتصفّح، ما يتيح عرض وظائف جهة العميل كأدوات لوكلاء الذكاء الاصطناعي من خلال واجهات برمجة تطبيقات تعريفية أو إلزامية.