غالبًا ما تحتوي الأجهزة ذات الشاشات الصغيرة مثل الهواتف الجوّالة على شاشات تعمل باللمس. غالبًا ما تكون الأجهزة ذات الشاشات الكبيرة مثل أجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية مزوّدة بأجهزة مثل الماوس أو لوحة اللمس. من المغري موازنة الشاشات الصغيرة مع الشاشات التي تعمل باللمس والشاشات الكبيرة مع المؤشرات.
لكن الواقع أكثر دقة. تتضمن بعض أجهزة الكمبيوتر المحمولة إمكانيات الشاشة التي تعمل باللمس. يمكن للمستخدمين التفاعل مع شاشة تعمل باللمس أو لوحة لمس أو كليهما. وبالمثل، يمكن استخدام لوحة مفاتيح أو ماوس خارجي مع جهاز مزوّد بشاشة تعمل باللمس، مثل الجهاز اللوحي.
وبدلاً من محاولة استنتاج آلية الإدخال من حجم الشاشة، يمكنك استخدام ميزات الوسائط في CSS.
المؤشر
يمكنك اختبار ثلاث قيم محتمَلة باستخدام ميزة وسائط pointer
، وهي none
وcoarse
وfine
.
إذا أشار المتصفّح إلى أنّ قيمة pointer
تبلغ none
، من المحتمل أنّ المستخدم يستخدم لوحة مفاتيح للتفاعل مع موقعك الإلكتروني.
إذا أبلغَ المتصفِّح عن القيمة pointer
لـ coarse
، هذا يعني أن آلية الإدخال الأساسية ليست دقيقة للغاية. الإصبع على الشاشة التي تعمل باللمس هو مؤشر تقريبي.
إذا أبلغ المتصفِّح عن القيمة pointer
التي تبلغ fine
، هذا يعني أن آلية الإدخال الأساسية قادرة على التحكُّم في عناصر تحكُّم أكثر دقة. الماوس أو قلم الشاشة هو مؤشر جيد.
يمكنك تعديل حجم عناصر الواجهة لتتلاءم مع القيمة pointer
. يمكنك الانتقال إلى هذا الموقع الإلكتروني باستخدام أنواع مختلفة من الأجهزة للاطّلاع على كيفية تكيُّف الواجهة.
في هذا المثال، يتم تكبير حجم الأزرار للمؤشرات التقريبية:
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
من الممكن أيضًا جعل العناصر أصغر للحصول على مؤشرات دقيقة، ولكن كن حذرًا بشأن القيام بذلك:
@media (pointer: fine) { button { padding: 0.25em 0.5em; } }
حتى لو كان لدى شخص ما آلية إدخال أساسية قادرة على التحكم في عناصر التحكم الدقيقة، فكر مليًا قبل تقليل حجم العناصر التفاعلية. لا يزال قانون Fits ساريًا. بينما يتطلب الهدف الأصغر تركيزًا أكبر حتى مع استخدام مؤشر دقيق. وتعود المنطقة المستهدفة الأكبر بالفائدة على الجميع بغض النظر عن جهاز التأشير.
أي مؤشر
تشير ميزة وسائط pointer
إلى دقة آلية الإدخال الأساسي. ومع ذلك، تتضمّن العديد من الأجهزة أكثر من آلية إدخال واحدة. من الممكن أن يتفاعل شخص ما مع موقعك على الويب باستخدام كل من شاشة تعمل باللمس وماوس في نفس الوقت.
تختلف ميزة "any-pointer
" عن ميزة الوسائط "pointer
" في أنّها توضّح ما إذا كان أي جهاز إشارة اجتاز الاختبار.
وتشير القيمة any-pointer
التي تبلغ none
إلى أنّه لا يتوفّر جهاز تأشير.
وتشير القيمة any-pointer
التي تبلغ coarse
إلى أنّ جهاز تأشير واحد على الأقل ليس دقيقًا للغاية. ولكن قد لا تكون هذه هي آلية الإدخال الأساسية.
في حال كانت القيمة any-pointer
هي fine
، يعني ذلك أنّ جهاز تأشير واحد على الأقل يمكنه التحكّم بدقة أكبر. ولكن مرة أخرى، قد لا تكون هذه هي آلية الإدخال الأساسية.
بما أنّ الاستعلام عن الوسائط any-pointer
سيبلغ عن نتيجة إيجابية إذا اجتاز أي من آليات الإدخال الاختبار، بإمكان المتصفّح الإبلاغ عن نتيجة any-pointer: fine
أيضًا والإبلاغ عن نتيجة لـ any-pointer: coarse
. في هذه الحالة، يكون ترتيب الاستعلامات عن الوسائط مهمًا. وسيتم منح الأولوية للخيار الأخير.
في هذا المثال، إذا كان الجهاز يحتوي على آلية إدخال دقيقة وآلية إدخال تقريبية، سيتم تطبيق النمط التقريبي.
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
المرور فوق
توضِّح ميزة الوسائط hover
ما إذا كان يمكن لآلية الإدخال الأساسية التمرير فوق العناصر. يعني هذا عادةً أن هناك نوعًا من المؤشر على الشاشة يتم التحكم فيه عن طريق الماوس أو لوحة اللمس.
على عكس ميزة الوسائط pointer
التي تفرق بين المؤشرات الدقيقة والتقريبية، تُعدّ ميزة وسائط hover
ثنائية. إذا كان جهاز الإدخال الأساسي قادرًا على التمرير فوق العناصر، سيتم الإبلاغ عن القيمة hover
. وبخلاف ذلك، تكون القيمة none
.
في هذا المثال، تتوفر بعض الرموز التكميلية عند التمرير ولكن فقط إذا كان جهاز الإدخال الأساسي قادرًا على التمرير فوق أحد العناصر.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
إذا كنت تستخدم الماوس للتمرير فوق هذا الزر، سيظهر الرمز. ولكن إذا استخدمت لوحة المفاتيح للنقر على الزر، سيظل الرمز غير مرئي. عند استخدام لوحة المفاتيح، يتم التركيز بدلاً من التمرير فوقه. سيبلغ جهاز كمبيوتر مكتبي مزوّد بماوس مرفقًا بأنّ آلية الإدخال الأساسية قادرة على التمرير، وهذا صحيح. أمّا أي شخص يستخدم لوحة مفاتيح أثناء توصيل الماوس، فلن يستفيد من مزايا أنماط :hover
. لذا، من الأفضل الجمع بين نمطَي :hover
و:focus
لتغطية كلا التفاعلَين.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:is(:hover, :focus) .extra {
visibility: visible;
}
}
حتى إذا كان جهاز الإدخال الأساسي قادرًا على التمرير فوق العناصر، فكن حريصًا بشأن إخفاء المعلومات خلف تفاعل التمرير. تصبح المعلومات أقل قابلية للاكتشاف. لا تستخدم التمرير لإخفاء معلومات مهمة أو عنصر واجهة مهم.
أي تمرير
لا يضع استعلام الوسائط hover
تقاريره إلا عن آلية الإدخال الأساسي. وتتضمن بعض الأجهزة آليات إدخال متعددة: الشاشة التي تعمل باللمس والماوس ولوحة المفاتيح ولوحة اللمس.
مثلما تُبلغ ميزة any-pointer
عن أي من آليات الإدخال، سيكون any-hover
صحيحًا إذا كان بإمكان أي من آليات الإدخال المتاحة التمرير فوق العناصر.
إذا قررت عكس المنطق في المثال السابق، يمكنك جعل أنماط التمرير هي الإعدادات التلقائية، ثم إزالتها إذا كانت قيمة any-hover
تبلغ none
.
button .extra {
visibility: hidden;
}
button:hover .extra,
button:focus .extra {
visibility: visible;
}
@media (any-hover: none) {
button .extra {
visibility: visible;
}
}
أما الجهاز الذي لا يتضمن آلية إدخال قابلة للتمرير، فسيكون الرمز الإضافي مرئيًا دائمًا.
لوحات المفاتيح الافتراضية
يستخدم الأشخاص المؤشرات والأصابع لاستكشاف الواجهات، ولكن عندما يحين وقت إدخال المعلومات، يحتاجون إلى لوحة مفاتيح. لا بأس إذا كانت هناك لوحة مفاتيح فعلية متصلة بجهازهم، ولكن إذا كانوا يستخدمون جهازًا يعمل باللمس، فسيكون الأمر أكثر تعقيدًا. توفِّر هذه الأجهزة لوحات مفاتيح افتراضية على الشاشة.
أنواع الإدخال
على عكس لوحة المفاتيح الخارجية، يمكن تخصيص لوحات المفاتيح الافتراضية كي تتوافق مع الإدخال المتوقع. إذا قدمت معلومات حول الإدخال المتوقع، يمكن للأجهزة عرض لوحة المفاتيح الافتراضية الأكثر ملاءمة.
أنواع إدخال HTML5 هي طريقة رائعة لوصف عناصر input
. تقبل السمة type
قيمًا مثل email
وnumber
وtel
وurl
وغيرها.
<label for="email">Email</label>
<input type="email" id="email">
<label for="number">Number</label>
<input type="number" id="number">
<label for="tel">Tel</label>
<input type="tel" id="tel">
<label for="url">URL</label>
<input type="url" id="url">
أوضاع الإدخال
تمنحك السمة inputmode
تحكمًا أكثر دقة في لوحات المفاتيح الافتراضية. على سبيل المثال، عند وجود input
type
واحد بقيمة number
، يمكنك استخدام السمة inputmode
للتفريق بين الأعداد الصحيحة والكسور العشرية.
إذا كنت تطلب رقمًا صحيحًا، مثل عمر شخص ما، استخدِم inputmode="numeric"
.
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
إذا طلبت رقمًا يتضمن خانات عشرية، مثل السعر، استخدِم inputmode="decimal"
.
<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">
الإكمال التلقائي
لا أحد يحب ملء النماذج. كمصمم، يمكنك تحسين تجربة المستخدمين من خلال تمكينهم من ملء حقول النموذج تلقائيًا. توفّر لك السمة autocomplete
مجموعة من الخيارات لتحسين نماذج التواصل ونماذج تسجيل الدخول ونماذج الدفع.
<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">
تُعد سمات HTML هذه، type
وinputmode
وautocomplete
، إضافات صغيرة إلى حقول النموذج، ولكنها يمكن أن تُحدث فرقًا كبيرًا في تجربة المستخدم. من خلال توقع إمكانات جهاز المستخدم والاستجابة لها، فإنك بذلك تعزز قدرات المستخدمين. للحصول على معلومات أكثر تفصيلاً، تتوفّر دورة تدريبية مخصَّصة لمساعدتك في تعلُّم النماذج.
بعد ذلك في هذه الدورة التدريبية، حان الوقت لفحص بعض أنماط الواجهة الشائعة.
التحقّق من استيعابك
اختبر معلوماتك عن التفاعلات
ما الميزة التي يجب عليك استخدامها بدلاً من محاولة استنتاج نوع إدخال المستخدم من حجم الشاشة؟
@media (pointer: coarse)
" أو "@media (-any-pointer: coarse)
"prompt()
في JavaScripthandheld
ما هو الفرق بين اشتراكَي "@media (pointer)
" و@media (any-pointer)
؟
any-pointer
البحث عن جميع أنواع إدخال الأجهزة بحثًا عن أي مطابقة.ما أنواع الإدخال التي تعرض لوحة مفاتيح افتراضية أكثر ملاءمة للمستخدمين؟
type="url"
type="tel"
type="number"
type="email"