CSS कस्टम हायलाइट इव्हेंट हँडलिंग: टेक्स्ट सिलेक्शन इंटरॅक्शन्सचा दर्जा वाढवणे

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

डिफॉल्ट टेक्स्ट सिलेक्शन वर्तनाची समज

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

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

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

CSS कस्टम हायलाइट API ची ओळख

CSS कस्टम हायलाइट API टेक्स्ट सिलेक्शन्स व्यवस्थापित करण्यासाठी अधिक मजबूत आणि लवचिक दृष्टिकोन प्रदान करते. हे नवीन CSS प्रॉपर्टीज आणि जावास्क्रिप्ट APIs सादर करते जे तुम्हाला विशिष्ट परिस्थिती आणि इंटरॅक्शन्सवर आधारित कस्टम हायलाइट्स परिभाषित आणि स्टाइल करण्याची परवानगी देतात.

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

• हायलाइट इनहेरिटन्स: हायलाइट्स इतर CSS प्रॉपर्टीजप्रमाणेच कॅस्केड आणि इनहेरिटन्स मेकॅनिझमद्वारे स्टाइल केले जातात. याचा अर्थ असा की तुम्ही रूट लेव्हलवर डिफॉल्ट हायलाइट स्टाइल्स परिभाषित करू शकता आणि विशिष्ट एलिमेंट्स किंवा संदर्भांसाठी त्यांना ओव्हरराइड करू शकता.
• हायलाइट स्यूडो: ::highlight() स्यूडो-एलिमेंट नावाच्या हायलाइट्सवर स्टाइल्स लागू करण्यासाठी वापरले जाते.
• जावास्क्रिप्ट API: getSelection() आणि Highlight ऑब्जेक्ट्ससारखे जावास्क्रिप्ट APIs तुम्हाला प्रोग्रॅमॅटिकली हायलाइट्स तयार करण्यास, व्यवस्थापित करण्यास आणि त्यांच्याशी संवाद साधण्यास परवानगी देतात.
• अ‍ॅक्सेसिबिलिटी: हे API ARIA अ‍ॅट्रिब्यूट्स आणि अ‍ॅक्सेसिबिलिटी विचारांना समर्थन देते, ज्यामुळे कस्टम हायलाइट्स दिव्यांग युझर्ससाठी समजण्यायोग्य आणि सुलभ आहेत याची खात्री होते.

कस्टम हायलाइट्सची अंमलबजावणी: एक स्टेप-बाय-स्टेप मार्गदर्शक

CSS कस्टम हायलाइट API वापरून कस्टम हायलाइट्सची अंमलबजावणी करण्यासाठी येथे एक व्यावहारिक मार्गदर्शक आहे:

स्टेप १: नावाचे हायलाइट्स परिभाषित करणे

प्रथम, तुम्हाला CSS वापरून एक नावाचा हायलाइट परिभाषित करणे आवश्यक आहे. हे नाव विशिष्ट सिलेक्शन्ससोबत स्टाइल्स जोडण्यासाठी वापरले जाईल.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

या उदाहरणात, आम्ही `custom-highlight` नावाचा एक हायलाइट परिभाषित केला आहे, ज्यामध्ये अर्ध-पारदर्शक लाल बॅकग्राउंड आणि काळा टेक्स्ट रंग आहे. तुम्ही बॅकग्राउंड आणि टेक्स्टसाठी कोणतीही वैध CSS कलर व्हॅल्यू निवडू शकता.

स्टेप २: जावास्क्रिप्टमध्ये हायलाइट्स तयार करणे

पुढे, हायलाइट तयार करण्यासाठी आणि लागू करण्यासाठी जावास्क्रिप्ट वापरा. यामध्ये निवडलेल्या टेक्स्टची रेंज मिळवणे आणि एक `Highlight` ऑब्जेक्ट तयार करणे समाविष्ट आहे.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // No selection
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Empty selection
  }

  const highlight = new Highlight(range);

  // Register the highlight with the document. It's experimental and may need polyfill or browser flag
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implement a fallback mechanism here, e.g., wrapping the selected text in a  with a class
    // For example:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Optional: Clear the selection after highlighting
}

            

              
                Copy
              
            
          

स्पष्टीकरण:

• window.getSelection(): वर्तमान सिलेक्शन ऑब्जेक्ट मिळवते.
• selection.rangeCount: सक्रिय सिलेक्शन आहे की नाही हे तपासते.
• selection.getRangeAt(0): निवडलेली रेंज मिळवते.
• new Highlight(range): रेंजमधून एक नवीन `Highlight` ऑब्जेक्ट तयार करते.
• CSS.highlights.set('custom-highlight', highlight): CSS हायलाइट रेजिस्ट्रीमध्ये हायलाइटची नोंदणी करते. ही एक महत्त्वाची पायरी आहे जी जावास्क्रिप्ट हायलाइटला पूर्वी परिभाषित केलेल्या CSS स्टाइल्सशी जोडते.
• फॉलबॅक मेकॅनिझम: `CSS.highlights` ला अद्याप पूर्णपणे समर्थन न देणाऱ्या ब्राउझर्ससाठी एक महत्त्वपूर्ण फॉलबॅक मेकॅनिझम समाविष्ट आहे. हे सुनिश्चित करते की तुमचे फीचर जुन्या ब्राउझर्सवर कार्यक्षमता टिकवून ठेवत, ग्रेसफुली डिग्रेड होते.
• selection.removeAllRanges(): हायलाइटिंगनंतर सिलेक्शन साफ करते. हे पर्यायी आहे आणि तुमच्या अपेक्षित युझर अनुभवावर अवलंबून आहे.

हे फंक्शन एका इव्हेंट लिसनरला जोडायला विसरू नका, जसे की बटण क्लिक किंवा कीबोर्ड शॉर्टकट.

स्टेप ३: एकाधिक रेंजेस हाताळणे (ओव्हरलॅपिंग सिलेक्शन्स)

हे API एकाच हायलाइटमध्ये एकाधिक ओव्हरलॅपिंग रेंजेस हाताळू शकते. तुम्ही एका `Highlight` ऑब्जेक्टमध्ये अनेक रेंजेस जोडू शकता:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implement a fallback for multiple ranges (more complex)
  // This would require splitting the text into smaller spans and applying styles
  // This is a more advanced fallback implementation and may not be suitable for all cases
}

            

              
                Copy
              
            
          

हायलाइटमधील सर्व रेंजेसवर स्टाइलिंग लागू केली जाईल.

प्रगत उपयोग आणि तंत्र

CSS कस्टम हायलाइट API टेक्स्ट सिलेक्शन इंटरॅक्शन्स वाढवण्यासाठी अनेक शक्यतांचे दरवाजे उघडते. येथे काही प्रगत उपयोग आणि तंत्र दिले आहेत:

१. संदर्भ-जागरूक हायलाइटिंग

तुम्ही निवडलेल्या टेक्स्टचे विश्लेषण करण्यासाठी आणि त्याच्या मजकुरावर किंवा सभोवतालच्या संदर्भावर आधारित भिन्न हायलाइट स्टाइल्स लागू करण्यासाठी जावास्क्रिप्ट वापरू शकता. उदाहरणार्थ, तुम्ही डॉक्युमेंटमधील कीवर्ड्सना विशिष्ट रंगाने हायलाइट करू शकता, किंवा कोड स्निपेट्स ओळखून हायलाइट करू शकता.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Highlight code comments
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Highlight JavaScript keywords
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Fallback implementation, potentially using data attributes and custom CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

प्रत्येक हायलाइट प्रकारासाठी CSS स्टाइल्स परिभाषित करा:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

२. शोध परिणामांना हायलाइट करणे

तुम्ही डॉक्युमेंटमधील शोध संज्ञा हायलाइट करण्यासाठी API वापरू शकता. हे विशेषतः शोध परिणाम पेजेससाठी किंवा ॲप-मधील शोध कार्यक्षमतेसाठी उपयुक्त आहे.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Or specific element
  const regex = new RegExp(searchTerm, 'gi'); // Global, case-insensitive

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Create a range for each match
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback, again, requires careful handling of text nodes
    }
  }
}

            

              
                Copy
              
            
          

शोध परिणामाच्या हायलाइटसाठी CSS स्टाइल परिभाषित करा:

            ::highlight(search-result-highlight) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

३. शॅडो DOM सह एकत्रीकरण

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

४. अ‍ॅक्सेसिबिलिटी संबंधी विचार

तुमचे कस्टम हायलाइट्स सर्व युझर्ससाठी सुलभ आहेत याची खात्री करा. खालील गोष्टींचा विचार करा:

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

तुम्ही हायलाइट्सबद्दल अतिरिक्त सिमेंटिक माहिती देण्यासाठी ARIA अ‍ॅट्रिब्यूट्स वापरू शकता. उदाहरणार्थ, हायलाइट केलेल्या भागाचा उद्देश वर्णन करण्यासाठी तुम्ही aria-label वापरू शकता.

५. स्थानिकीकरण आणि आंतरराष्ट्रीयीकरण

जागतिक संदर्भात टेक्स्ट सिलेक्शन हाताळताना, खालील गोष्टींचा विचार करा:

• टेक्स्ट दिशा: तुमचे हायलाइट्स डावीकडून-उजवीकडे (LTR) आणि उजवीकडून-डावीकडे (RTL) दोन्ही टेक्स्ट दिशांसोबत योग्यरित्या कार्य करतात याची खात्री करा.
• भाषा-विशिष्ट नियम: टेक्स्ट सिलेक्शन आणि शब्द सीमांसाठी भाषा-विशिष्ट नियमांबद्दल जागरूक रहा.
• फॉन्ट सपोर्ट: विविध भाषांमध्ये वापरल्या जाणाऱ्या अक्षरांना समर्थन देणारे फॉन्ट्स वापरा.

६. परफॉर्मन्स ऑप्टिमायझेशन

कस्टम हायलाइट्स लागू केल्याने परफॉर्मन्सवर परिणाम होऊ शकतो, विशेषतः मोठ्या डॉक्युमेंट्सवर. खालील ऑप्टिमायझेशन तंत्रांचा विचार करा:

• डिबाउन्सिंग: जलद सिलेक्शन दरम्यान जास्त कॅल्क्युलेशन्स टाळण्यासाठी हायलाइट फंक्शनला डिबाउन्स करा.
• कॅशिंग: अनावश्यकपणे पुन्हा कॅल्क्युलेट करणे टाळण्यासाठी कॅल्क्युलेटेड हायलाइट रेंजेस कॅशे करा.
• व्हर्च्युअलायझेशन: फक्त व्ह्यूपोर्टमध्ये सध्या दिसणारे हायलाइट्स रेंडर करण्यासाठी व्हर्च्युअलायझेशन तंत्र वापरा.
• वेब वर्कर्स: मुख्य थ्रेड ब्लॉक करणे टाळण्यासाठी हायलाइट कॅल्क्युलेशन्स वेब वर्करकडे ऑफलोड करा.

ब्राउझर सपोर्ट आणि पॉलीఫిల్స్

CSS कस्टम हायलाइट API तुलनेने नवीन आहे आणि सर्व ब्राउझर्सद्वारे पूर्णपणे समर्थित नसू शकते. उत्पादनात वापरण्यापूर्वी नवीनतम ब्राउझर कंपॅटिबिलिटी टेबल्स तपासा. जुन्या ब्राउझर्ससाठी समर्थन देण्यासाठी पॉलीफिल वापरण्याचा विचार करा. पॉलीफिल जुन्या ब्राउझर्सना नवीन API समजण्यासाठी आवश्यक कोड जोडते. पर्याय शोधण्यासाठी 'CSS Custom Highlight API Polyfill' असे ऑनलाइन शोधा.

निष्कर्ष

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

अधिक जाणून घ्या

• MDN वेब डॉक्स: हायलाइट API
• CSS Houdini: या प्रगत CSS फीचर्सना सक्षम करणाऱ्या CSS Houdini प्रकल्पाबद्दल अधिक जाणून घ्या.