हाल ही में, मुझे एक शर्मनाक सीएसएस ओवरसाइट का सामना करना पड़ा। मैं एक संकीर्ण साइडबार के साथ एक वेबसाइट विकसित कर रहा था जिसमें आइकन थे। वर्णनात्मक पाठ के लिए स्थान को कम करना, डिज़ाइन को सुलभ, फिर भी शुरू में छिपा हुआ, टूलटिप्स एक लंबे समय तक होवर द्वारा ट्रिगर किया गया। टूलटिप तीन-सेकंड के होवर के बाद दिखाई देगा।

मेरे प्रारंभिक दृष्टिकोण में जावास्क्रिप्ट राज्य प्रबंधन शामिल है:

1. टूलटिप दृश्यता (दृश्यमान/छिपे हुए) को ट्रैक करने के लिए एक राज्य चर। यह राज्य प्रासंगिक HTML तत्व पर एक वर्ग को अपडेट करेगा।
] ] ]
2. यह एक प्रतिक्रिया परियोजना थी, इसलिए जावास्क्रिप्ट राज्य का उपयोग स्वाभाविक लगा। हालांकि, पूर्वव्यापी में, यह अनावश्यक रूप से जटिल साबित हुआ। mousenter और mouseleave
घटनाओं को थोड़ा अविश्वसनीय लगा, और पूरी कार्यक्षमता को अकेले CSS के साथ अधिक संक्षिप्त और कुशलता से लागू किया जा सकता था।
3. ] मैंने रिएक्ट यूआई को बरकरार रखा लेकिन जावास्क्रिप्ट राज्य प्रबंधन को हटा दिया। समाधान में एक साधारण CSS संक्रमण-देरी संपत्ति शामिल थी:
।चीज़ { संक्रमण: 0.2S; } । संक्रमण-देरी: 3 एस; / * देरी होवर एनीमेशन केवल, बंद नहीं */ }
4. ] यह दृष्टिकोण, हालांकि, पूरी तरह से टच स्क्रीन एक्सेसिबिलिटी को संबोधित नहीं करता है। जबकि स्क्रीन पाठक सुलभ पाठ को संभालते हैं और डेस्कटॉप उपयोगकर्ताओं को टूलटिप्स से लाभ होता है, टच-केवल उपयोगकर्ता आइकन लेबल को याद कर सकते हैं। मेरी परियोजना ने बड़ी स्क्रीन को लक्षित किया, कर्सर की उपलब्धता को मानते हुए, लेकिन स्पर्श एक्सेसिबिलिटी एक चिंता का विषय है। यदि तत्व एक लिंक है, तो : होवर
प्रारंभिक नल पर सक्रिय हो सकता है। यदि लिंक एक स्पष्ट शीर्षक के साथ एक पृष्ठ की ओर जाता है, तो यह पर्याप्त संदर्भ प्रदान कर सकता है। अन्यथा, टच इवेंट्स के लिए जावास्क्रिप्ट इवेंट हैंडलिंग एक व्यवहार्य विकल्प बना हुआ है।