CSS कस्टम हायलाइट रेंज: प्रगत टेक्स्ट सिलेक्शन स्टायलिंग

टेक्स्ट सिलेक्शन हे वेबवरील एक मूलभूत संवाद आहे. जेव्हा एखादा वापरकर्ता वेबपेजवर टेक्स्ट निवडतो, तेव्हा ब्राउझर डिफॉल्ट हायलाइट स्टाईल लागू करतो, सामान्यतः पांढऱ्या टेक्स्टसह निळी पार्श्वभूमी. हे कार्यक्षम असले तरी, ही डिफॉल्ट स्टायलिंग अनेकदा वेबसाइटच्या डिझाइन सौंदर्याशी जुळत नाही. CSS कस्टम हायलाइट रेंज या डिफॉल्ट स्टाइल्सना ओव्हरराइड करण्याचा आणि अधिक दृष्यदृष्ट्या सुसंगत आणि आकर्षक वापरकर्ता अनुभव तयार करण्याचा एक शक्तिशाली मार्ग प्रदान करते.

टेक्स्ट सिलेक्शनच्या मूलभूत गोष्टी समजून घेणे

कस्टम हायलाइट रेंजमध्ये जाण्यापूर्वी, ब्राउझरमध्ये टेक्स्ट सिलेक्शन कसे कार्य करते हे समजून घेणे महत्त्वाचे आहे. जेव्हा एखादा वापरकर्ता माउस ड्रॅग करतो (किंवा इतर इनपुट पद्धती वापरतो) तेव्हा ब्राउझर निवडलेल्या टेक्स्टची रेंज ओळखतो आणि डिफॉल्ट हायलाइट स्टाईल लागू करतो. हे ब्राउझरच्या अंतर्गत रेंडरिंग इंजिनद्वारे हाताळले जाते आणि डिफॉल्टनुसार, CSS द्वारे थेट नियंत्रित केले जात नाही.

डिफॉल्ट सिलेक्शन स्टायलिंग

डिफॉल्ट टेक्स्ट सिलेक्शन स्टायलिंग ब्राउझरच्या यूजर एजंट स्टाईलशीटद्वारे नियंत्रित केली जाते. ही स्टाईलशीट सर्व HTML घटकांसाठी मूलभूत स्टायलिंग प्रदान करते आणि त्यात डिफॉल्ट हायलाइट स्टायलिंग समाविष्ट असते. वापरलेले विशिष्ट रंग आणि स्टाइल्स ब्राउझर आणि ऑपरेटिंग सिस्टममध्ये थोडे वेगळे असू शकतात.

::selection स्यूडो-एलिमेंटची ओळख

CSS निवडलेल्या टेक्स्टला लक्ष्य करण्यासाठी ::selection स्यूडो-एलिमेंट प्रदान करते. हे आपल्याला निवडलेल्या टेक्स्टचे background-color आणि color गुणधर्म सुधारित करण्याची परवानगी देते. तथापि, या दृष्टिकोनाला मर्यादा आहेत. हे आपल्याला फक्त पार्श्वभूमी आणि टेक्स्टचा रंग बदलण्याची परवानगी देते आणि हायलाइट रेंजवर अधिक सूक्ष्म-नियंत्रण देत नाही.

            
::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

हे सोपे CSS स्निपेट निवडलेल्या टेक्स्टचा पार्श्वभूमी रंग पिवळा आणि टेक्स्टचा रंग काळा करेल. हे उपयुक्त असले तरी, हे फक्त हिमनगाचे टोक आहे.

CSS कस्टम हायलाइट रेंज API

CSS कस्टम हायलाइट रेंज API टेक्स्ट सिलेक्शनला स्टाईल करण्यासाठी एक अधिक प्रगत आणि लवचिक मार्ग प्रदान करते. हे API आपल्याला विशिष्ट हायलाइट रेंज परिभाषित करण्याची आणि त्यांना कस्टम स्टाइल्स लागू करण्याची परवानगी देते. हे विशेषतः अधिक दृष्यदृष्ट्या आकर्षक आणि वापरकर्ता-अनुकूल इंटरफेस तयार करण्यासाठी उपयुक्त आहे.

मुख्य संकल्पना

• हायलाइट API: हे मूळ तंत्रज्ञान आहे जे कस्टम स्टायलिंग सक्षम करते.
• हायलाइट रिजन: टेक्स्टच्या विशिष्ट रेंज ज्यांना कस्टम स्टायलिंगसाठी लक्ष्य केले जाते.
• कस्टम स्टाइल्स: CSS गुणधर्म (फक्त रंग आणि पार्श्वभूमी-रंगाच्या पलीकडे) जे हायलाइट रिजनवर लागू केले जातात.

CSS कस्टम हायलाइट रेंज वापरण्याचे फायदे

• वर्धित कस्टमायझेशन: ग्रेडियंट, बॉर्डर्स, शॅडो आणि बरेच काही यासह CSS गुणधर्मांची विस्तृत श्रेणी लागू करा.
• सुधारित वापरकर्ता अनुभव: आपल्या वेबसाइटच्या डिझाइननुसार अधिक दृष्यदृष्ट्या आकर्षक आणि सुसंगत टेक्स्ट सिलेक्शन स्टाइल्स तयार करा.
• अक्सेसिबिलिटी: आपल्या कस्टम हायलाइट स्टाइल्स कमी दृष्टी असलेल्या वापरकर्त्यांसाठी पुरेसा कॉन्ट्रास्ट आणि स्पष्ट व्हिज्युअल संकेत देऊन प्रवेशयोग्य असल्याची खात्री करा.
• सूक्ष्म-नियंत्रण: कस्टम स्टायलिंगसाठी टेक्स्टच्या विशिष्ट रेंजना लक्ष्य करा, ज्यामुळे अधिक अचूक आणि संदर्भ-जागरूक हायलाइटिंग शक्य होते.

CSS कस्टम हायलाइट रेंज लागू करणे

CSS कस्टम हायलाइट रेंज लागू करण्यासाठी जावास्क्रिप्टचा वापर करून तुम्हाला स्टाईल करायच्या असलेल्या टेक्स्ट रेंज ओळखणे आणि नंतर त्या रेंजवर इच्छित CSS गुणधर्म लागू करणे समाविष्ट आहे.

पायरी १: टेक्स्ट रेंज निवडणे

पहिली पायरी म्हणजे आपल्याला स्टाईल करायची असलेली टेक्स्ट रेंज ओळखणे. हे विविध जावास्क्रिप्ट तंत्रांचा वापर करून केले जाऊ शकते, जसे की:

• document.getSelection(): ही पद्धत वापरकर्त्याने निवडलेल्या टेक्स्टची रेंज दर्शवणारा Selection ऑब्जेक्ट परत करते.
• Range API: हे API आपल्याला प्रोग्रामॅटिकरित्या टेक्स्ट रेंज तयार आणि हाताळण्याची परवानगी देते.

document.getSelection() वापरून उदाहरण:

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Now you have the range object to work with
}

            

              
                Copy
              
            
          

Range API वापरून उदाहरण:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Now you have a range that selects all content inside element

            

              
                Copy
              
            
          

पायरी २: हायलाइट ऑब्जेक्ट तयार करणे

एकदा आपल्याकडे Range ऑब्जेक्ट आला की, आपल्याला एक हायलाइट ऑब्जेक्ट तयार करणे आवश्यक आहे. हा ऑब्जेक्ट कस्टम हायलाइटचे प्रतिनिधित्व करेल आणि इच्छित स्टाइल्स लागू करण्यासाठी वापरला जाईल.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

पायरी ३: हायलाइटची नोंदणी करणे

हायलाइट दृश्यमान करण्यासाठी, आपल्याला त्याची CSS.highlights ऑब्जेक्टसह नोंदणी करणे आवश्यक आहे. हा एक ग्लोबल ऑब्जेक्ट आहे जो पेजवरील सर्व कस्टम हायलाइट्स व्यवस्थापित करतो.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API is not supported in this browser.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

येथे, 'my-custom-highlight' हे आपण आपल्या हायलाइटला ओळखण्यासाठी निवडलेले एक अनियंत्रित नाव आहे.

पायरी ४: CSS सह कस्टम स्टाइल्स लागू करणे

शेवटी, आपण आपल्या CSS मध्ये ::highlight() स्यूडो-एलिमेंट वापरून हायलाइटला कस्टम स्टाइल्स लागू करू शकता.

            
::highlight(my-custom-highlight) {
  background-color: rgba(255, 200, 0, 0.5);
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

हे CSS स्निपेट 'my-custom-highlight' रेंजमधील टेक्स्टवर अर्ध-पारदर्शक पिवळी पार्श्वभूमी, गडद राखाडी टेक्स्ट, बोल्ड फॉन्ट वेट आणि एक सूक्ष्म टेक्स्ट शॅडो लागू करेल.

पूर्ण उदाहरण

CSS कस्टम हायलाइट रेंज कसे वापरावे हे दाखवणारे एक संपूर्ण उदाहरण येथे आहे:

HTML:

            
This is some text that can be selected.  We will customize the highlight styling using CSS Custom Highlight Range.

            

              
                Copy
              
            
          

JavaScript:

            
const textElement = document.getElementById('myText');

textElement.addEventListener('mouseup', () => {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const highlight = new Highlight(range);

    if (!window.CSS.highlights) {
      console.error('CSS Custom Highlight API is not supported in this browser.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

            
::highlight(custom-selection) {
  background-color: lightgreen;
  color: darkgreen;
  font-style: italic;
}

            

              
                Copy
              
            
          

या उदाहरणात, जेव्हा वापरकर्ता पॅराग्राफमधील टेक्स्ट निवडल्यानंतर माउसचे बटण सोडतो, तेव्हा जावास्क्रिप्ट कोड एक हायलाइट तयार करतो आणि त्याची नोंदणी करतो. त्यानंतर CSS निवडलेल्या टेक्स्टवर हलका हिरवा पार्श्वभूमी रंग, गडद हिरवा टेक्स्ट रंग आणि इटालिक फॉन्ट स्टाईल लागू करते.

प्रगत कस्टमायझेशन तंत्र

CSS कस्टम हायलाइट रेंज आणखी प्रगत कस्टमायझेशन तंत्रांना परवानगी देते, ज्यामध्ये खालील गोष्टी समाविष्ट आहेत:

ग्रेडियंट्स वापरणे

आपण दृष्यदृष्ट्या आकर्षक हायलाइट इफेक्ट्स तयार करण्यासाठी CSS ग्रेडियंट्स वापरू शकता.

            
::highlight(gradient-highlight) {
  background-image: linear-gradient(to right, #f00, #ff0);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

बॉर्डर्स आणि शॅडो जोडणे

हायलाइटला आणखी वेगळे दिसण्यासाठी आपण त्यात बॉर्डर्स आणि शॅडो जोडू शकता.

            
::highlight(border-highlight) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 2px solid blue;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: black;
}

            

              
                Copy
              
            
          

शर्तपूर्ण हायलाइटिंग

आपण विशिष्ट परिस्थितींवर आधारित हायलाइट स्टाइल्स गतिशीलपणे बदलण्यासाठी जावास्क्रिप्ट वापरू शकता. उदाहरणार्थ, आपण वेगवेगळ्या प्रकारच्या टेक्स्टला वेगवेगळ्या रंगांनी हायलाइट करू शकता.

            
// Example: Highlight keywords in a different color
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Implementation for finding keywords and creating ranges would go here)

// Then, in CSS:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

अक्सेसिबिलिटी संबंधित विचार

कस्टम हायलाइट स्टाइल्स लागू करताना, अक्सेसिबिलिटीचा विचार करणे अत्यंत महत्त्वाचे आहे. आपल्या हायलाइट स्टाइल्स कमी दृष्टी असलेल्या वापरकर्त्यांसाठी पुरेसा कॉन्ट्रास्ट आणि स्पष्ट व्हिज्युअल संकेत देतात याची खात्री करा.

कॉन्ट्रास्ट रेशो

आपल्या हायलाइट स्टाइल्सच्या पार्श्वभूमी रंग आणि टेक्स्ट रंगांमधील कॉन्ट्रास्ट रेशो WCAG (वेब कंटेंट अक्सेसिबिलिटी गाइडलाइन्स) च्या आवश्यकता पूर्ण करतो याची खात्री करा. सामान्य टेक्स्टसाठी किमान ४.५:१ आणि मोठ्या टेक्स्टसाठी ३:१ चा कॉन्ट्रास्ट रेशो शिफारसीय आहे.

व्हिज्युअल संकेत

टेक्स्ट निवडले गेले आहे हे दर्शविण्यासाठी स्पष्ट व्हिज्युअल संकेत द्या. हे वेगळे रंग, बॉर्डर्स किंवा शॅडो वापरून केले जाऊ शकते.

सहाय्यक तंत्रज्ञानासह चाचणी

आपल्या कस्टम हायलाइट स्टाइल्सची स्क्रीन रीडर्ससारख्या सहाय्यक तंत्रज्ञानासह चाचणी करा, जेणेकरून ते सर्व वापरकर्त्यांसाठी प्रवेशयोग्य असल्याची खात्री होईल.

ब्राउझर सुसंगतता

CSS कस्टम हायलाइट रेंज API हे तुलनेने नवीन तंत्रज्ञान आहे, आणि ब्राउझर समर्थन बदलू शकते. २०२३ च्या उत्तरार्धात, हे क्रोमियम-आधारित ब्राउझर (Chrome, Edge, Brave) आणि सफारी (टेक्नॉलॉजी प्रिव्ह्यू) मध्ये समर्थित आहे. फायरफॉक्सने स्वारस्य दर्शवले आहे, परंतु अद्याप समर्थन लागू केलेले नाही.

हे API प्रोडक्शनमध्ये वापरण्यापूर्वी नवीनतम ब्राउझर सुसंगतता माहिती तपासणे महत्त्वाचे आहे. CSS कस्टम हायलाइट रेंजसाठी ब्राउझर समर्थन ट्रॅक करण्यासाठी आपण "Can I use..." सारख्या वेबसाइट्स वापरू शकता.

जे ब्राउझर API ला समर्थन देत नाहीत, त्यांच्यासाठी आपण फॉलबॅक म्हणून ::selection स्यूडो-एलिमेंट वापरू शकता.

वापराची प्रकरणे आणि उदाहरणे

CSS कस्टम हायलाइट रेंज कसे वापरले जाऊ शकते याची काही व्यावहारिक प्रकरणे आणि उदाहरणे येथे आहेत:

कोड एडिटर्स

कोड एडिटरमध्ये निवडलेल्या कोडसाठी हायलाइट स्टाइल्स सानुकूलित करा जेणेकरून वाचनीयता आणि व्हिज्युअल अपील सुधारेल. वेगवेगळ्या प्रोग्रामिंग भाषांसाठी वेगवेगळ्या हायलाइट स्कीम्स असू शकतात.

डॉक्युमेंट व्ह्यूअर्स

डॉक्युमेंटच्या डिझाइनशी जुळणाऱ्या कस्टम हायलाइट स्टाइल्स देऊन डॉक्युमेंट व्ह्यूअर्सचा वापरकर्ता अनुभव वाढवा.

ई-लर्निंग प्लॅटफॉर्म्स

मुख्य संकल्पना किंवा महत्त्वाची माहिती कस्टम स्टाईलमध्ये हायलाइट करून संवादात्मक शिक्षण अनुभव तयार करा.

शोध परिणामांचे हायलाइटिंग

मिळणाऱ्या शब्दांना एका वेगळ्या कस्टम स्टाईलने हायलाइट करून शोध परिणामांची दृश्यमानता सुधारा. बहुभाषिक शोधात हे कसे दिसेल याचा विचार करा, जिथे हायलाइट रंग जुळलेल्या शब्दाची भाषा सूक्ष्मपणे सूचित करू शकतात.

एनोटेशन साधने

वापरकर्त्यांना महत्त्वाचे परिच्छेद चिन्हांकित करण्यासाठी किंवा नोट्स जोडण्यासाठी कस्टम हायलाइट स्टाइल्ससह टेक्स्ट एनोटेट करण्याची परवानगी द्या. सहयोगी एनोटेशनसाठी वेगवेगळ्या वापरकर्त्यांना वेगवेगळे हायलाइट रंग दिले जाऊ शकतात.

सर्वोत्तम पद्धती

• सिमँटिक HTML वापरा: आपली सामग्री संरचित करण्यासाठी सिमँटिक HTML घटकांचा वापर करा. यामुळे आपल्याला स्टाईल करायच्या असलेल्या टेक्स्ट रेंज ओळखणे सोपे होईल.
• साधे ठेवा: जास्त क्लिष्ट किंवा विचलित करणाऱ्या हायलाइट स्टाइल्स वापरणे टाळा. वापरकर्त्याचा अनुभव वाढवणे हे ध्येय आहे, वापरकर्त्याला गोंधळात टाकणे नाही.
• पूर्णपणे चाचणी करा: आपल्या कस्टम हायलाइट स्टाइल्स वेगवेगळ्या ब्राउझर आणि डिव्हाइसेसवर तपासा जेणेकरून ते अपेक्षेप्रमाणे कार्य करत आहेत याची खात्री होईल.
• कार्यक्षमतेचा विचार करा: खूप जास्त हायलाइट रेंज तयार करणे टाळा, कारण यामुळे कार्यक्षमतेवर परिणाम होऊ शकतो. टेक्स्ट रेंज कार्यक्षमतेने ओळखण्यासाठी आणि स्टाईल करण्यासाठी आपला जावास्क्रिप्ट कोड ऑप्टिमाइझ करा.

निष्कर्ष

CSS कस्टम हायलाइट रेंज वेबवर टेक्स्ट सिलेक्शनला स्टाईल करण्याचा एक शक्तिशाली आणि लवचिक मार्ग प्रदान करते. या API चा वापर करून, आपण अधिक दृष्यदृष्ट्या आकर्षक आणि वापरकर्ता-अनुकूल इंटरफेस तयार करू शकता जे वापरकर्त्याचा अनुभव वाढवतात आणि आपल्या वेबसाइटच्या डिझाइनशी जुळतात. जरी ब्राउझर समर्थन अजूनही विकसित होत असले तरी, या तंत्रज्ञानाचे संभाव्य फायदे वेब डेव्हलपर्स आणि डिझाइनर्ससाठी एक मौल्यवान साधन बनवतात. कस्टम हायलाइट स्टाइल्स लागू करताना अक्सेसिबिलिटी आणि कार्यक्षमतेला प्राधान्य देण्याचे लक्षात ठेवा. जसजसे वेब विकसित होत राहील, तसतसे CSS कस्टम हायलाइट रेंजसारखी वैशिष्ट्ये वापरकर्त्याचा अनुभव घडविण्यात अधिकाधिक महत्त्वाची भूमिका बजावतील.