उपयोगकर्ता-चयन - सीएसएस-ट्रिक्स

Anonim

user-selectसीएसएस में संपत्ति कैसे एक तत्व में पाठ का चयन किया जा करने की अनुमति है नियंत्रित करता है। उदाहरण के लिए, इसका उपयोग पाठ को अचयनित बनाने के लिए किया जा सकता है।

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

यह उन स्थितियों में उपयोगी है, जहां आप उपयोगकर्ताओं के लिए एक आसान / क्लीनर कॉपी-पेस्ट अनुभव प्रदान करना चाहते हैं (उनके पास गलती से पाठ-चयन बेकार चीजें नहीं हैं, जैसे आइकन या चित्र)। हालाँकि यह थोड़ा छोटा है। फ़ायरफ़ॉक्स इस तथ्य को लागू करता है कि चयनकर्ता को कॉपी नहीं किया जा सकता है कि किसी भी पाठ मिलान। यदि आप इसके चारों ओर तत्वों का चयन करते हैं, तो WebKit अभी भी पाठ को कॉपी करने की अनुमति देता है।

आप इसका उपयोग यह लागू करने के लिए भी कर सकते हैं कि एक संपूर्ण तत्व का चयन हो जाता है:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

यहाँ उन में से कुछ डेमो है:

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन उपयोगकर्ता-चयन डेमो देखें।

इस संपत्ति के लिए काफी समय से कोई युक्ति नहीं थी, लेकिन अब CSS बेसिक यूजर इंटरफेस मॉड्यूल लेवल 4 के अंतर्गत आता है।

डिफ़ॉल्ट मान है auto, जो सामान्य रूप से आपकी अपेक्षा के अनुसार चयन होता है। "सामान्य रूप से" थोड़ा जटिल है। यह यहाँ से कल्पना के लायक है:

  • छद्म तत्वों के बाद :: पहले और बाद में, गणना मूल्य है none
  • यदि तत्व एक संपादन योग्य तत्व है , तो गणना मूल्य हैcontain
  • अन्यथा, यदि इस तत्व के माता-पिता पर उपयोगकर्ता-चयनित allका गणना मूल्य है, तो गणना मूल्य हैall
  • अन्यथा, यदि इस तत्व के माता-पिता पर उपयोगकर्ता-चयनित noneका गणना मूल्य है, तो गणना मूल्य हैnone
  • अन्यथा, गणना मूल्य है text

दूसरे शब्दों में, यह समझदारी से एक कामुक अवस्था में रहता है। ऐसा लगता है कि शायद इस सुविधा का उपयोग छद्म तत्वों को चयन करने के लिए किया जा सकता है, लेकिन अभी तक कोई अंतिम शब्द नहीं है।

पुराना / मालिकाना

फ़ायरफ़ॉक्स का समर्थन करता है -moz-none, जो सिवाय इसके कि कोई भी नहीं है इसका मतलब है कि उप-तत्व कैस्केड को ओवरराइड कर सकते हैं और ऐस -moz-user-select: text;फ़ायरफ़ॉक्स 21 के साथ फिर से चयन योग्य बन सकते हैं , कोई भी व्यवहार नहीं करता है -moz-none।

इंटरनेट एक्सप्लोरर एक तथाकथित-दूर के मालिकाना मूल्य का भी समर्थन करता है element, जिसमें आप तत्व के अंदर पाठ का चयन कर सकते हैं लेकिन चयन उस तत्व की सीमा पर रुक जाएगा।

अधिक जानकारी

  • एमडीएन डॉक्स
  • उपयोगकर्ता चयन अंतर

ब्राउज़र का समर्थन

यह विशेष रूप से के लिए है -*-user-select: none;

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
4 * 2 * 10 * 12 * 3.1 *

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ २.१ * 3.2 *