🏜️ 🖐️ 🎳 चयन और सीएसएस ➿ 📈 🧖

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

::selectionuser-select। यह आलेख उन सभी को दिखाने का लक्ष्य रखता है जो सीएसएस को चयन के साथ काम करना चाहते हैं, और चयन के साथ काम करने के लिए विभिन्न तरीकों का उपयोग कैसे करें।

मूल बातें

पर MDN, आप जान सकते हैं कि एक छद्म तत्व ::selectionकी अनुमति देता है आप (माउस का उपयोग कर, उदाहरण के लिए) है कि उपयोगकर्ता द्वारा चयनित किया गया है एक दस्तावेज के कुछ हिस्सों के लिए शैलियाँ लागू करने।

इसका उपयोग करने के लिए ::selectionनिम्नलिखित निर्माण का उपयोग करना पर्याप्त है:

p::selection {
   color: #fff;
   background-color: #000; 
}

चयनित पाठ।

यहाँ एक उदाहरण है जिसके साथ आप प्रयोग कर सकते हैं।

गुण समर्थित :: चयन

यह ध्यान देने योग्य है कि छद्म तत्व ::selectionकेवल गुणों का समर्थन करता है color, backgroundऔर text-shadow।

अपने स्वयं के चयन प्रभाव को अनुकूलित करें

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

चयन के एक विशेष चयन का एक उदाहरण

यह संभव है, हालांकि इसके लिए कुछ प्रयास की आवश्यकता होगी। यहां बताया गया है कि ऊपर दिखाया गया चयन कैसे किया जाता है:

एक छद्म तत्व जोड़ा जाता है, उसी पाठ के साथ जिसे हम चुनते हैं। फिर छद्म तत्व एक संपत्ति height: 50%और एक सफेद पृष्ठभूमि रंग के लिए सेट है ।
छद्म तत्व स्रोत पाठ के ऊपर स्थित है।

यदि आप अब पाठ का चयन करते हैं, तो छद्म तत्व पाठ के 50% लंबवत ओवरलैप करेगा। यह हमें उस प्रभाव को अनुकरण करने की अनुमति देता है जिसकी हमें आवश्यकता है।

p {
  position: relative;
  color: #fff;
}

p:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
}

p::selection {
  background: rgba(76, 125, 225, 0.18);
}

मैंने यहां इस तकनीक के बारे में सीखा ।

इस चयन के लिए एक अन्य विकल्प नीचे प्रस्तुत किया गया है। यहां, एक ठोस चयन के बजाय, मैंने सीएसएस ग्रेडिएंट के रूप में चयन को लागू किया। यहां बिंदु 50% की ऊंचाई के साथ एक सफेद ढाल का उपयोग no-repeatकरना है और संपत्ति सेट करते समय मूल्य का उपयोग करके एक बार पृष्ठभूमि छवि के साथ तत्व को भरना है background।

h1:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}

निम्नलिखित आंकड़ा इस तकनीक को दिखाता है।

ग्रैडिएंट हाइलाइटिंग को लागू करना

उम्मीद है कि मैं इस विचार को स्पष्ट रूप से समझाने में सक्षम था। यहाँ एक कार्यशील उदाहरण है।

एनिमेटेड चयन

पिछले उदाहरण पर काम करते हुए, मैंने निम्नलिखित प्रश्न पूछा: "क्या यह चयन को चेतन करने के लिए यथार्थवादी है?"। उदाहरण के लिए, पाठ का चयन करने की प्रक्रिया में, चयन की ऊंचाई 50% है। और जब माउस पॉइंटर को किनारे पर ले जाया जाता है, तो चयन की ऊंचाई 80% तक बढ़ जाती है। यह कैसे करना है? लेकिन इस तरह:

p {
    transition: background 0.3s ease-out;
}

p:hover:after {
  background-size: 100% 80%;
}

चयन प्रक्रिया में पाठ

चयन पूरा होने के बाद पाठ

यहां एक वीडियो है जो एनिमेटेड चयन को प्रदर्शित करता है।

बहुस्तरीय पाठ

उपरोक्त चयन समायोजन तकनीक, दुर्भाग्य से, बहु-पंक्ति पाठ के लिए उपयुक्त नहीं है। फिर भी, ऐसे पाठ के लिए कुछ समान लागू करने के लिए, आपको जावास्क्रिप्ट की क्षमताओं का सहारा लेना होगा और प्रत्येक शब्द को इनलाइन (लोअरकेस) तत्व पर रखना होगा, उदाहरण के लिए, में <span>। प्रत्येक शब्द अपने तत्व में प्रकट होने के बाद, इनमें से प्रत्येक तत्व <span>में एक छद्म तत्व जोड़ा जाना चाहिए। और उसके बाद, ऊपर वर्णित प्रभाव को बहु-पाठ पर लागू किया जा सकता है। कंटेनर

में प्रत्येक शब्द डालने के लिए एक स्क्रिप्ट इस प्रकार है <span>:

let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");

paragraph.innerHTML = "";

words.forEach(function (word) {
  let wordItem = document.createElement("span");
  wordItem.setAttribute("data-word", word);
  wordItem.innerHTML = word + " ";
  paragraph.appendChild(wordItem);
});

उसके बाद, तत्वों <span>को स्टाइल किया जाना चाहिए। फिर उनमें से प्रत्येक के लिए आपको एक छद्म तत्व जोड़ना होगा:

span {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  span::after {
    content: attr(data-word);
    position: absolute;
    left: 0;
    right: 0;
    top: -0.28em;
    height: 75%;
    padding-top: 0.14em;
    background: #fff;
    pointer-events: none;
  }

  span::selection {
    background: rgba(#4C7DE1, 0.18);
  }

यदि आप व्यवहार में इस डिजाइन को देखते हैं, तो यह पता चलता है कि यह काम करता है, लेकिन जैसा कि आप उम्मीद कर सकते हैं, वैसा नहीं है। मल्टी-लाइन टेक्स्ट हाइलाइटिंग का एक उदाहरण नीचे दिखाया गया है। आप देख सकते हैं कि चयन पेचीदा लग रहा है।

अमानवीय चयन

मैं कहूंगा कि इस तरह की बहु-पंक्ति का चयन बहुत अच्छा नहीं है, और इसका उपयोग वैश्विक स्तर पर नहीं किया जाना चाहिए। शायद इसका इस्तेमाल केवल एक विशेष पैराग्राफ के चयन को व्यवस्थित करने के लिए किया जाना चाहिए।

यहां, इस तरह के चयन के साथ, आप प्रयोग कर सकते हैं।

रचनात्मक उपयोग :: चयन और पाठ-छाया

चूंकि छद्म तत्व का समर्थन करने वाले गुणों में से एक यह ::selectionहै text-shadowकि हम पाठ की कई छायाओं का उपयोग करके कुछ दिलचस्प प्रभाव प्राप्त करने की कोशिश कर सकते हैं। हम उन संभावनाओं को तलाश रहे हैं जो यह विचार हमारे सामने खुलता है।

▍ लंबी छाया के साथ हाइलाइट करें

चयनित पाठ लंबी छाया देता है।

इस प्रभाव को कैसे लागू किया जाए:

p::selection {
    color: #444444;
    background: #ffffff;
    text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}

▍ रूपरेखा पाठ प्रभाव

चयनित पाठ समोच्च हो जाता है

यह विचार मुझे इस लेखमें मिला। हम इस तथ्य के बारे में बात कर रहे हैं कि संपत्ति का उपयोग करकेtext-shadowआप रूपरेखा पाठ के प्रभाव को अनुकरण कर सकते हैं।

p::selection {
    color: #fff;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

Effect धुंधला प्रभाव

चयनित पाठ धुंधला दिखता है। चयनित पाठ पर

लागू होने वाला एक और दिलचस्प प्रभाव पाठ को धुंधला करना है। पाठ की रंग सेट करते समय संपत्ति का उपयोग करने के लिए नीचे की रेखा हैcolor: transparent। मददtext-shadowसेसेट की गई छायाकहीं भी गायब नहीं होगी, जो वांछित प्रभाव देगी।

p::selection {
  color: transparent;
  text-shadow: 0 0 3px #fff;
}

मुझे यकीन है कि आप स्वयं text-shadowस्टाइल चयन के कई और उदाहरणों के साथ आ सकेंगे । यह संपत्ति हमें असीमित संभावनाएं देती है।

▍Shadow ग्रंथों और प्रदर्शन

अनुकूलित करते समय बहुत जटिल शैलियों का उपयोग करने की अनुशंसा नहीं की जाती है text-shadow। तथ्य यह है कि इस संपत्ति के लिए अत्यधिक उत्साह प्रदर्शन समस्याओं की ओर जाता है। ऐसे मुद्दों का एक उदाहरण दिखाने वाला एक वीडियो यहां दिया गया है ।

पाठ चयन को अनुकूलित करने के लिए बहुत परिष्कृत शैलियों का उपयोग करना

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

क्या फार्म तत्व बाहर खड़े हैं?

इस खंड के शीर्षक में सवाल का एक छोटा सा जवाब "हाँ" होगा। यह मुझे लगता है कि यह गलत है: आप पृष्ठ का चयन करते हैं, लेकिन यह पता चला है कि इनपुट फ़ील्ड के अंदर की सामग्री भी हाइलाइट की गई है। यहाँ है कि यह कैसा दिखता है।

इनपुट फ़ील्ड के अंदर की सामग्री को हाइलाइट किया गया है।

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

यहाँ एक उदाहरण है।

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

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

यह गुण निम्न मान ले जा सकते हैं: none, auto, text, contain, all।

उपयोगकर्ता-चुनिंदा उपयोग के मामले

▍Text और आइकन

यदि तत्व में पाठ और एक आइकन है - कुछ फ़ॉन्ट से लिए गए प्रतीक या आइकन के रूप में, तो यह आइकन पाठ चयनित होने पर हाइलाइट हो जाएगा। निम्नलिखित आकृति में दिखाए गए उदाहरण पर विचार करें।

टेक्स्ट और आइकन वाला बटन

यहां इस बटन का कोड है:

<button>Our Services<span aria-hidden="true">▼</span></button>

जब आप इस आइटम का चयन करते हैं, तो यह नीचे दिखाए गए जैसा दिखता है।

समर्पित बटन

यह पूरी तरह से अनावश्यक है। कृपया ध्यान दें कि मार्कअप एक विशेषता का उपयोग करता है जोaria-hiddenस्क्रीन पाठकों से आइकन छुपाता है। हाइलाइटिंग की समस्या को हल करने के लिए आपको क्या हाइलाइट करने की आवश्यकता नहीं है, हम निम्नलिखित शैली का उपयोग कर सकते हैं:

button span[aria-hidden="true"] {
    user-select: none;
}

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

▍ झंडे

झंडे का यह व्यवहार मुझे गुस्सा दिलाता है, जब एक झंडे को सेट या अनचेक करके, मैं गलती से इसके विवरण के पाठ का चयन करता हूं। यहाँ है कि यह कैसा दिखता है।

ध्वज विवरण का पाठ अनियमित रूप से चुना गया है। आप

इस समस्या को तत्व<label>कोस्टाइल करके हल कर सकते हैं:

label {
    user-select: none;
}

Text सभी पाठ हाइलाइट करें

वह मूल्य allजो एक संपत्ति ले सकता है, user-selectआपको एक दिलचस्प प्रभाव प्राप्त करने की अनुमति देता है। यदि मूल तत्व में इस तरह के मूल्य के साथ संपत्ति है, तो ऐसे तत्व में निहित सभी पाठ को एक क्लिक के साथ चुना जा सकता है। यह पाठ सामग्री के साथ काम करने के लिए उपयोगी हो सकता है, जिसे इसकी संपूर्णता पर प्रकाश डाला जाना चाहिए। उदाहरण के लिए, पृष्ठ पर उपलब्ध कोड अंशों को उजागर करना:

.embed-code {
    user-select: all;
}

इस तरह की शैली में डिज़ाइन किए गए पाठ का एक टुकड़ा उस पर एक क्लिक के साथ चुना जा सकता है।

वेब अनुप्रयोग

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

जीवन से कुछ उदाहरणों पर विचार करें।

▍Slack

स्लैक में, आप लेबल और इनपुट फ़ील्ड को हाइलाइट कर सकते हैं। हालांकि, बटन ग्रंथों को उजागर नहीं किया गया है।

बटन कैप्शन हाइलाइट नहीं किए गए हैं।

यहां एक और उदाहरण है।

मोडल विंडो के टाइटल बार में हस्ताक्षर को हाइलाइट

किया गया है। चैट की तारीख को हाइलाइट नहीं किया जा सकता है।

तिथि को आवंटित नहीं किया जा सकता है

- सामान्य रूप से मुझे यह अजीब लगता है कि आवेदन में आप कुछ ग्रंथों का चयन कर सकते हैं जो, ऐसा प्रतीत होता है, चयन का समर्थन नहीं करना चाहिए। स्लैक इंटरफ़ेस में ऐसे स्थान हैं जहाँ इसका उपयोग किया जाता हैuser-select: none, लेकिन ऐसी कम जगह हैंजहाँआप अपेक्षा कर सकते हैं। उदाहरण के लिए, मेरे लिए, एक उपयोगकर्ता के रूप में, एक मोडल विंडो के शीर्षक को उजागर करने से कोई लाभ नहीं है।

▍Notion

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

जो खड़ा नहीं होना चाहिए वह बाहर नहीं खड़ा है।

इस चित्र से पाठ का एक भी टुकड़ा उजागर नहीं हुआ है। यह वही है जो आप एक आवेदन से उम्मीद कर सकते हैं।

वैश्विक चयन अक्षमता का उपयोग न करें

यह विश्व स्तर पर चयन को अक्षम करने के लिए अनुशंसित नहीं है। जब आप चयन अक्षम करने का उपयोग करते हैं, तो इसे केवल उन तत्वों के लिए अक्षम करने का प्रयास करें जिनके लिए इसका कोई मतलब नहीं है। ऐसा करने के लिए, आप एक सहायक वर्ग बना सकते हैं। उदाहरण के लिए - यह:

.disable-selection {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

खराब पैटर्न

एक UX पैटर्न है जो मुझे वास्तव में नापसंद है। इसमें टेक्स्ट को हाइलाइट करने का प्रयास करते समय एक चेतावनी दिखाना शामिल है। यह सत्यानाश करता है और उपयोगकर्ता को ऐसा लगता है जैसे वे साइट के साथ अपनी बातचीत को नियंत्रित करने की कोशिश कर रहे हैं। इस पैटर्न का एक उदाहरण नीचे दिखाया गया है।

अधिसूचना प्रदर्शन के साथ हाइलाइटिंग अक्षम करें

कृपया ऐसा न करें।

मोबाइल उपकरणों पर हाइलाइट करें

-webkit-touch-calloutआईओएस सफारी के लिए एक संपत्ति है जो पाठ का चयन करते समय प्रदर्शित होने वाले मानक टूलटिप के प्रदर्शन को बंद कर देना चाहिए। मैंने इस संपत्ति का उपयोग करने की कोशिश की, लेकिन यह काम नहीं करता है।

p {
    -webkit-touch-callout: none;
}

शैलियाँ ::selectionया तो काम नहीं करती हैं।

और संपत्ति user-select: noneउम्मीद के मुताबिक काम करती है।

मैंने इस समस्या को दर्शाते हुए एक वास्तविक उदाहरण खोजने की कोशिश की। मैंने विकिपीडिया से पाठ का एक टुकड़ा कॉपी किया। उसी समय, पाठ जो मेरे लिए पूरी तरह से अनावश्यक था, नकल किया गया था (listen)। यह कष्टप्रद है।

एक साथ उपयोगी पाठ के साथ, इसे कॉपी किया जाता है और (सुनो)

उपयोगकर्ता को इस "सुनने" को कॉपी करने की अनुमति देने के बजाय, इस तत्व में एक शैली जोड़ना बेहतर होगाuser-select: none। नतीजतन, जब इस तत्व वाले पाठ की प्रतिलिपि बनाई जाती है, तो इसकी प्रतिलिपि नहीं बनाई जाएगी।

सारांश

यहां हमने CSS का उपयोग करके वेब पेज तत्वों के हाइलाइटिंग को अनुकूलित करने के तरीकों पर ध्यान दिया। इस सामग्री को देखने में आपकी रुचि हो सकती है ।

प्रिय पाठकों! आप अपनी परियोजनाओं में पाठ चयन कैसे सेट करते हैं?

चयन और सीएसएस