كيفية التجاهل: تحويم تصميم CSS على الأجهزة التي تعمل باللمس

التحدي: التغلب على مشكلات عرض التحويم على الأجهزة التي تعمل باللمس &&&]

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

الحلول:

1. إزالة JavaScript لـ :hover Styles

باستخدام JavaScript، يمكن إزالة جميع قواعد CSS التي تحتوي على :hover، مما يؤدي إلى تعطيل هذه الخاصية بشكل فعال على الأجهزة التي تعمل باللمس. ومع ذلك، فإن هذه الطريقة لها عيوب:

تتطلب تعديلات CSS ومشكلات التوافق في المتصفحات القديمة.
تعطيل تأثيرات التمرير على أجهزة الإدخال المختلطة (مثل Surface وiPad Pro)، مما يضعف تجربة المستخدم. .

2. استعلامات الوسائط الخاصة بـ CSS فقط

التضمين: يمكن لقواعد التمرير داخل كتل @media تعطيل تأثيرات التمرير على الأجهزة التي تعمل باللمس. ومع ذلك، فإن هذا النهج:

يقتصر على نظام التشغيل iOS 9.0 والمتصفحات الحديثة على Android.
• يكسر تأثيرات التمرير في المتصفحات القديمة أو يتطلب تجاوز جميع قواعد التمرير، مما يؤثر على المرونة.

3. اكتشاف جافا سكريبت والتعليق المسبق لـ CSS

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

4. اكتشاف التحويم الديناميكي وتبديل الفئات

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