المؤشرات

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

المؤشرات

تتعامل المتصفّحات تلقائيًا مع بعض حالات الاستخدام الشائعة للمؤشرات.

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

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

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

إذا لم يوضّح أي من المؤشرات المتوافقة تفاعلات أحد العناصر، يمكنك أيضًا تقديم صورة بتنسيق SVG أو PNG لاستخدامها كمؤشر.

علامات الإقحام

يتم استخدام علامة الإدراج لإظهار موضعك في النص القابل للتعديل. يختلف هذا المؤشر عن مؤشر الماوس، لأنّه لا يتتبّع حركة الماوس. يمكنك تغيير اللون باستخدام caret-color.

الاستجابة لإدخالات المؤشر التي يقدّمها المستخدم

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

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

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

تشير ميزة pointer للوسائط إلى جهاز الإدخال الأساسي للمستخدم، بينما يشير any-pointer إلى جميع أجهزة الإدخال. يمكنك ربط أجهزة مثل الماوس برمز fine وأجهزة مثل الشاشات التي تعمل باللمس برمز coarse. تشير القيمة none إلى أنّ المستخدم لا يستعمل جهاز إدخال مزوّدًا بمؤشر.

أحداث المؤشر واللمس

إيقاف إيماءات معيّنة على الشاشة التي تعمل باللمس

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

لإيقاف معالجة المتصفّح لبعض الإجراءات، أدرِج الإجراءات التي تريد أن يعالجها العنصر. تتيح pan-x وpan-y إيماءات التحريك بإصبع واحد. يمكن تفعيلها مع pinch-zoom الذي يتيح التكبير والتصغير والتنقل باستخدام عدة أصابع.

الكلمة الرئيسية manipulation تعادل pan-x pan-y pinch-zoom. يستبعد manipulation سلوكيات اللمس الأخرى التي تتطلّب لمسات متعدّدة في وقت قصير، مثل النقر مرّتين للتكبير.

بعد إيقاف معالجة المتصفّح لإجراء معيّن من خلال استبعاده من touch-action، يمكنك إعداد أحداث المؤشر لهذا الإجراء.

إيقاف جميع الأحداث والإجراءات

في بعض الحالات، قد تحتاج إلى تحديد أنّ أحد العناصر غير تفاعلي. من خلال ضبط pointer-events: none على زر، على سبيل المثال، لن تتمكّن من النقر على الزر أو حتى تفعيل حالة التمرير.

التحقّق من فهمك