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

تنطوي مقاربي الأولية على إدارة حالة JavaScript:

1. متغير حالة لتتبع وضوح مجموعة الأدوات (مرئية/مخفية). ستقوم هذه الحالة بتحديث فئة على عنصر HTML ذي الصلة.
2. مستمعي الأحداث ( mouseenter ، mouseLeave ) لإدارة انتقالات الحالة.
3. تأخير ثلاث ثوانٍ قبل تعيين الحالة على مرئي على mouseenter .
4. ستبقى سلسلة الأدوات مخفية ( mouseLeave ).

كان هذا مشروع React ، لذلك كان استخدام حالة JavaScript أمرًا طبيعيًا. ومع ذلك ، في الماضي ، أثبتت معقدة بشكل غير ضروري. شعرت أحداث mouseenter و أحداث MouseLeave غير موثوقة بعض الشيء ، وكان من الممكن تنفيذ الوظيفة بأكملها بشكل أكبر وكفاءة مع CSS وحدها.

الإدراك المحرج: لقد استفادت من مكتبة JavaScript دون داع عندما كان حل CSS متاحًا بسهولة.

احتفظت بواجهة مستخدم React لكنني أزلت إدارة حالة JavaScript. تضمن الحل خاصية CSS بسيطة خاصية الانتقال :

.thing {
  transition: 0.2s;
}
.thing:hover {
  transition-delay: 3s; /* delay hover animation only ON, not OFF */
}

يحقق هذا الأنيق الواحد تمامًا التأثير الطويل المطلوب.

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