सीएसएस गाइड: टेक्स्ट

Daniel Marino

बुधवार, 5 जून 2024 को 8:31:36 pm

पाठ चयन को अक्षम करने का परिचय

एंकर के लिए जो बटन की तरह काम करते हैं, जैसे कि स्टैक ओवरफ़्लो के साइडबार पर प्रश्न, टैग और उपयोगकर्ता शीर्षक वाले बटन, टेक्स्ट चयन हाइलाइटिंग को रोकने से उपयोगकर्ता अनुभव में सुधार हो सकता है। यह सुनिश्चित करता है कि आकस्मिक पाठ चयन से उपयोगकर्ताओं का ध्यान भंग न हो।

जबकि जावास्क्रिप्ट समाधान मौजूद हैं, सीएसएस मानक विधि खोजना अक्सर बेहतर होता है। यह आलेख पता लगाता है कि क्या सीएसएस-अनुपालक दृष्टिकोण उपलब्ध है और यदि कोई मानक समाधान मौजूद नहीं है तो सर्वोत्तम अभ्यास क्या हैं।

आज्ञा	विवरण
-webkit-user-select	निर्दिष्ट करता है कि तत्व का टेक्स्ट क्रोम, सफारी और ओपेरा में चुना जा सकता है या नहीं।
-moz-user-select	निर्दिष्ट करता है कि फ़ायरफ़ॉक्स में तत्व का पाठ चुना जा सकता है या नहीं।
-ms-user-select	निर्दिष्ट करता है कि तत्व का टेक्स्ट इंटरनेट एक्सप्लोरर और एज में चुना जा सकता है या नहीं।
user-select	निर्दिष्ट करता है कि तत्व का पाठ आधुनिक ब्राउज़रों में चुना जा सकता है या नहीं।
addEventListener	किसी निर्दिष्ट श्रोता को उस इवेंटटार्गेट पर पंजीकृत करता है जिस पर उसे बुलाया जाता है।
preventDefault	ईवेंट से संबंधित डिफ़ॉल्ट कार्रवाई को रोकता है।
selectstart	जब कोई उपयोगकर्ता टेक्स्ट चयन करना शुरू करता है तो सक्रिय हो जाता है।

पाठ चयन को अक्षम करने के समाधान को समझना

सीएसएस स्क्रिप्ट पाठ चयन को अक्षम करने के लिए कई गुणों का उपयोग करती है। -webkit-user-select, -moz-user-select, और -ms-user-select गुण ब्राउज़र-विशिष्ट कमांड हैं जो क्रमशः क्रोम, सफारी, ओपेरा, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर और एज में टेक्स्ट चयन को रोकते हैं। user-select प्रॉपर्टी आधुनिक ब्राउज़र द्वारा समर्थित एक मानकीकृत संस्करण है। ये आदेश बटन के रूप में कार्य करने वाले एंकर टैग पर लागू होते हैं ताकि यह सुनिश्चित किया जा सके कि उपयोगकर्ता अनजाने में पाठ को हाइलाइट नहीं कर सकते हैं, इस प्रकार दृश्य व्यवधान के बिना बटन जैसी कार्यक्षमता को बनाए रखा जाता है।

जावास्क्रिप्ट स्क्रिप्ट इवेंट श्रोताओं को एंकर तत्वों में जोड़कर उपयोगकर्ता अनुभव को और बढ़ाती है। addEventListener विधि संलग्न है mousedown और selectstart तत्वों के लिए ईवेंट, डिफ़ॉल्ट क्रियाओं का उपयोग करने से रोकना preventDefault. यह सुनिश्चित करता है कि यदि कोई उपयोगकर्ता क्लिक करके और खींचकर पाठ का चयन करने का प्रयास करता है, तो भी पाठ चयन अवरुद्ध हो जाता है। सीएसएस और जावास्क्रिप्ट दोनों का उपयोग करने वाला यह संयुक्त दृष्टिकोण विभिन्न ब्राउज़रों और उपयोगकर्ता इंटरैक्शन में अवांछित पाठ चयन की मजबूत रोकथाम सुनिश्चित करता है।

सीएसएस के साथ एंकर बटन पर टेक्स्ट चयन को रोकना

सीएसएस समाधान

/* CSS to disable text selection */
a.button {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
}

/* Apply the class to anchor tags acting as buttons */
a.button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
}

एंकर बटन पर उपयोगकर्ता अनुभव को बढ़ाने के लिए जावास्क्रिप्ट का उपयोग करना

जावास्क्रिप्ट समाधान

<script>
// JavaScript to disable text selection for specific elements
document.querySelectorAll('a.button').forEach(function(el) {
  el.addEventListener('mousedown', function(e) {
    e.preventDefault(); // Prevents text selection on mousedown
  });
  el.addEventListener('selectstart', function(e) {
    e.preventDefault(); // Prevents text selection on drag
  });
});
</script>

ब्राउज़र संगतता और सर्वोत्तम प्रथाओं की खोज

एंकर तत्वों के लिए टेक्स्ट चयन हाइलाइटिंग को अक्षम करते समय विचार करने के लिए एक और महत्वपूर्ण पहलू ब्राउज़र संगतता और फ़ॉलबैक समाधान है। जब user-select प्रॉपर्टी आधुनिक ब्राउज़रों में व्यापक रूप से समर्थित है, सभी संस्करणों और प्लेटफार्मों पर अनुकूलता सुनिश्चित करना चुनौतीपूर्ण हो सकता है। पुराने ब्राउज़रों या विशिष्ट संस्करणों में, कुछ गुणों को पहचाना नहीं जा सकता है, जिससे असंगत व्यवहार हो सकता है। यह सुनिश्चित करने के लिए कि इच्छित कार्यक्षमता लगातार हासिल की जाती है, विभिन्न ब्राउज़रों में व्यापक परीक्षण लागू करना महत्वपूर्ण है।

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

पाठ चयन को अक्षम करने पर अक्सर पूछे जाने वाले प्रश्न

मैं Chrome में पाठ चयन को कैसे अक्षम करूँ?
उपयोग -webkit-user-select क्रोम में पाठ चयन को अक्षम करने की संपत्ति।
क्या पाठ चयन को अक्षम करने के लिए कोई सार्वभौमिक सीएसएस संपत्ति है?
हां user-select प्रॉपर्टी अधिकांश आधुनिक ब्राउज़रों द्वारा समर्थित एक सार्वभौमिक विधि है।
क्या मैं जावास्क्रिप्ट का उपयोग करके पाठ चयन को अक्षम कर सकता हूँ?
हाँ, प्रयोग करके addEventListener और preventDefault पाठ चयन घटनाओं को अवरुद्ध करने की विधियाँ।
विभिन्न ब्राउज़रों के लिए विशिष्ट गुण क्या हैं?
उपयोग -webkit-user-select क्रोम, सफारी, ओपेरा के लिए, -moz-user-select फ़ायरफ़ॉक्स के लिए, और -ms-user-select इंटरनेट एक्सप्लोरर और एज के लिए।
क्या पाठ चयन को अक्षम करने से पहुंच प्रभावित होती है?
ऐसा हो सकता है, इसलिए यह सुनिश्चित करना महत्वपूर्ण है कि कार्यक्षमता कीबोर्ड नेविगेशन या स्क्रीन रीडर में हस्तक्षेप न करे।
क्या मैं सभी तत्वों पर पाठ चयन अक्षम कर सकता हूँ?
हां, आप इसे लागू कर सकते हैं user-select आपके सीएसएस में किसी भी तत्व के लिए संपत्ति।
यदि किसी उपयोगकर्ता को टेक्स्ट कॉपी करने की आवश्यकता हो तो क्या होगा?
सुनिश्चित करें कि जिस पाठ को कॉपी करने की आवश्यकता है वह पाठ चयन को अक्षम करने वाले गुणों से प्रभावित नहीं है।
क्या सीएसएस के अतिरिक्त जावास्क्रिप्ट का उपयोग करना आवश्यक है?
जावास्क्रिप्ट का उपयोग अतिरिक्त मजबूती प्रदान कर सकता है और अकेले सीएसएस द्वारा कवर नहीं किए गए किनारे के मामलों को संभाल सकता है।
मैं क्रॉस-ब्राउज़र अनुकूलता कैसे सुनिश्चित कर सकता हूँ?
विभिन्न ब्राउज़रों में अपने कार्यान्वयन का परीक्षण करें और सार्वभौमिक के साथ-साथ ब्राउज़र-विशिष्ट गुणों का उपयोग करें user-select संपत्ति।

टेक्स्ट चयन हाइलाइटिंग को अक्षम करने पर अंतिम विचार

अंत में, बटन के रूप में कार्य करने वाले एंकर तत्वों के लिए टेक्स्ट चयन हाइलाइटिंग को अक्षम करने से अवांछित टेक्स्ट चयन को रोककर उपयोगकर्ता अनुभव में काफी सुधार हो सकता है। जैसे सीएसएस गुणों के संयोजन का उपयोग करना user-select और जावास्क्रिप्ट इवेंट श्रोता व्यापक क्रॉस-ब्राउज़र संगतता सुनिश्चित करते हैं।

जबकि सीएसएस गुण अधिकांश आधुनिक ब्राउज़रों को संभालते हैं, जावास्क्रिप्ट पुराने या कम अनुपालन वाले ब्राउज़रों के लिए अतिरिक्त मजबूती प्रदान करता है। यह संयुक्त दृष्टिकोण यह सुनिश्चित करता है कि उपयोगकर्ताओं को आकस्मिक पाठ चयन की गड़बड़ी के बिना निर्बाध बातचीत का अनुभव हो, जिससे एक स्वच्छ और अधिक पेशेवर वेब डिज़ाइन तैयार हो सके।

सीएसएस गाइड: टेक्स्ट चयन हाइलाइटिंग अक्षम करें