CSS Custom Highlight API: உரைத் தேர்வு ஸ்டைலிங்கில் தேர்ச்சி பெறுதல்

ஒரு வலைப்பக்கத்தில் உரையைத் தேர்ந்தெடுக்கும் எளிய செயல் பெரும்பாலான பயனர்கள் இரண்டாம் சிந்தனையின்றி செய்வது. இருப்பினும், டெவலப்பர்களாகிய நாம், மிக நுட்பமான தொடர்புகளைக் கூட மேம்படுத்துவதை நோக்கமாகக் கொண்டுள்ளோம். CSS Custom Highlight API, தேர்ந்தெடுக்கப்பட்ட உரை எவ்வாறு தோன்றும் என்பதன் மீது முன்னோடியில்லாத கட்டுப்பாட்டை வழங்கி, உரைத் தேர்வு அனுபவத்தில் புரட்சி செய்ய நமக்கு அதிகாரம் அளிக்கிறது. இந்தத் திறன், எளிய பின்னணி மற்றும் உரை நிற மாற்றங்களைத் தாண்டி, சிக்கலான மற்றும் ஈர்க்கக்கூடிய பயனர் இடைமுகங்களை அனுமதிக்கிறது.

CSS Custom Highlight API என்றால் என்ன?

CSS Custom Highlight API என்பது ஒரு நவீன வலை தரநிலையாகும், இது CSS ஐப் பயன்படுத்தி உரைத் தேர்வுகளின் (மற்றும் பிற ஹைலைட் செய்யப்பட்ட வரம்புகளின்) தோற்றத்தை ஸ்டைல் செய்ய ஒரு வழியை வழங்குகிறது. இது ::highlight() சூடோ-எலிமெண்ட்டை அறிமுகப்படுத்துகிறது, இது டெவலப்பர்-வரையறுத்த அளவுகோல்களின் அடிப்படையில் உரையின் குறிப்பிட்ட வரம்புகளை இலக்காகக் கொண்டுள்ளது. இந்த API பாரம்பரிய ::selection சூடோ-எலிமெண்ட்டின் வரம்புகளைத் தாண்டுகிறது, இது மிகவும் அடிப்படை ஸ்டைலிங் விருப்பங்களை மட்டுமே வழங்குகிறது. Custom Highlight API உடன், நீங்கள் மிகவும் தனிப்பயனாக்கப்பட்ட மற்றும் சூழல்-சார்ந்த உரைத் தேர்வு ஸ்டைல்களை உருவாக்கலாம்.

CSS Custom Highlight API-ஐ ஏன் பயன்படுத்த வேண்டும்?

Custom Highlight API ஆனது பாரம்பரிய முறைகளை விட பல நன்மைகளை வழங்குகிறது:

• மேம்பட்ட பயனர் அனுபவம்: பயனர்களுக்கு வழிகாட்டும் மற்றும் வாசிப்புத்திறனை மேம்படுத்தும் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் தகவல் தரும் உரைத் தேர்வுகளை உருவாக்கவும்.
• சூழல்-சார்ந்த ஸ்டைலிங்: தேர்ந்தெடுக்கப்பட்ட உரையின் உள்ளடக்கத்தின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்தவும், அதாவது கோட் துணுக்குகளை ஹைலைட் செய்வது அல்லது முக்கிய சொற்களை வலியுறுத்துவது.
• மேம்படுத்தப்பட்ட அணுகல்தன்மை: தேர்ந்தெடுக்கப்பட்ட உரைக்கு தெளிவான காட்சி குறிப்புகளை வழங்கவும், இது பார்வை குறைபாடு உள்ள பயனர்கள் உள்ளடக்கத்தில் செல்ல எளிதாக்குகிறது.
• தனிப்பயனாக்கக்கூடிய தோற்றம்: தனித்துவமான மற்றும் ஈர்க்கக்கூடிய உரைத் தேர்வு ஸ்டைல்களை உருவாக்க அடிப்படை பின்னணி மற்றும் உரை நிற மாற்றங்களைத் தாண்டிச் செல்லவும்.
• டைனமிக் ஸ்டைலிங்: பயனர் தொடர்புகள் அல்லது பயன்பாட்டு நிலையின் அடிப்படையில் உரைத் தேர்வுகளின் தோற்றத்தை மாற்றவும்.

முக்கிய கருத்துக்களைப் புரிந்துகொள்ளுதல்

கோட் எடுத்துக்காட்டுகளில் மூழ்குவதற்கு முன், CSS Custom Highlight API-யின் முக்கிய கருத்துக்களைப் புரிந்துகொள்வது அவசியம்:

1. ஹைலைட் பதிவு

இந்த செயல்முறை ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு தனிப்பயன் ஹைலைட் பெயரைப் பதிவு செய்வதில் தொடங்குகிறது. இந்த பெயர் பின்னர் CSS-ல் குறிப்பிட்ட உரைத் தேர்வுகளை இலக்காகக் கொள்ளப் பயன்படுத்தப்படும்.

2. ஹைலைட் வரம்புகள்

ஹைலைட் வரம்புகள் ஸ்டைல் செய்யப்பட வேண்டிய குறிப்பிட்ட உரை இடைவெளிகளை வரையறுக்கின்றன. இந்த வரம்புகள் Highlight மற்றும் StaticRange அல்லது Range API-களைப் பயன்படுத்தி நிரல்பூர்வமாக உருவாக்கப்படுகின்றன. அவை ஹைலைட் செய்யப்பட வேண்டிய உரையின் தொடக்க மற்றும் முடிவுப் புள்ளிகளைக் குறிப்பிடுகின்றன.

3. ::highlight() சூடோ-எலிமெண்ட்

இந்த சூடோ-எலிமெண்ட் CSS-ல் பதிவுசெய்யப்பட்ட ஹைலைட் பெயர்களுக்கு ஸ்டைல்களைப் பயன்படுத்தப் பயன்படுகிறது. இது ஒரு தேர்வியாகச் செயல்பட்டு, ஹைலைட் வரம்புகளால் வரையறுக்கப்பட்ட உரை இடைவெளிகளை இலக்காகக் கொள்கிறது.

நடைமுறை எடுத்துக்காட்டுகள்: CSS Custom Highlight API-ஐ செயல்படுத்துதல்

CSS Custom Highlight API-ஐ எவ்வாறு பயன்படுத்துவது என்பதை விளக்க பல நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: அடிப்படை உரைத் தேர்வு ஸ்டைலிங்

இந்த எடுத்துக்காட்டு தேர்ந்தெடுக்கப்பட்ட உரையின் பின்னணி மற்றும் உரை நிறத்தை எவ்வாறு மாற்றுவது என்பதைக் காட்டுகிறது.

HTML:

            <p id="myText">This is some text that can be selected.</p>
            

              
                Copy
              
            
          

JavaScript:

            const myText = document.getElementById('myText');
const highlight = new Highlight();

// Select the entire paragraph.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}
            

              
                Copy
              
            
          

விளக்கம்:

• ஜாவாஸ்கிரிப்ட் கோட் ஒரு Highlight ஆப்ஜெக்டை உருவாக்கி, myText ஐடி கொண்ட முழு பத்தியையும் உள்ளடக்கிய ஒரு வரம்பைச் சேர்க்கிறது.
• CSS.highlights.set() முறை 'myHighlight' என்ற பெயரில் ஹைலைட்டைப் பதிவு செய்கிறது.
• CSS கோட் ::highlight(myHighlight) சூடோ-எலிமெண்ட்டைப் பயன்படுத்தி தேர்ந்தெடுக்கப்பட்ட உரையை மஞ்சள் பின்னணி மற்றும் கருப்பு உரை நிறத்துடன் ஸ்டைல் செய்கிறது.

எடுத்துக்காட்டு 2: குறிப்பிட்ட வார்த்தைகளை ஹைலைட் செய்தல்

இந்த எடுத்துக்காட்டு ஒரு பத்தியில் உள்ள குறிப்பிட்ட வார்த்தைகளை எவ்வாறு ஹைலைட் செய்வது என்பதைக் காட்டுகிறது.

HTML:

            <p id="myText">This is a paragraph with the word highlight that we want to highlight.</p>
            

              
                Copy
              
            
          

JavaScript:

            const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['highlight'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}
            

              
                Copy
              
            
          

விளக்கம்:

• ஜாவாஸ்கிரிப்ட் கோட் பத்தியில் உள்ள வார்த்தைகளை வரிசைப்படுத்தி "highlight" என்ற வார்த்தையின் குறியீடுகளை அடையாளம் காண்கிறது.
• ஒவ்வொரு நிகழ்விற்கும், அது ஒரு Range ஆப்ஜெக்டை உருவாக்கி அதை Highlight ஆப்ஜெக்டில் சேர்க்கிறது.
• CSS கோட் ஹைலைட் செய்யப்பட்ட வார்த்தைகளை வெளிர் பச்சை பின்னணி மற்றும் தடித்த எழுத்துரு எடையுடன் ஸ்டைல் செய்கிறது.

எடுத்துக்காட்டு 3: பயனர் உள்ளீட்டின் அடிப்படையில் டைனமிக் ஹைலைட்டிங்

இந்த எடுத்துக்காட்டு ஒரு தேடல் பெட்டியில் பயனர் உள்ளீட்டின் அடிப்படையில் உரையை டைனமிக்காக எவ்வாறு ஹைலைட் செய்வது என்பதைக் காட்டுகிறது.

HTML:

            <input type="text" id="searchInput" placeholder="Enter text to highlight">
<p id="myText">This is some text that will be dynamically highlighted based on user input.</p>
            

              
                Copy
              
            
          

JavaScript:

            const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Clear previous highlights

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});
            

              
                Copy
              
            
          

CSS:

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

              
                Copy
              
            
          

விளக்கம்:

• ஜாவாஸ்கிரிப்ட் கோட் தேடல் பெட்டியில் உள்ளீட்டு மாற்றங்களைக் கவனிக்கிறது.
• இது ஏற்கனவே உள்ள ஹைலைட்களை அழித்துவிட்டு, பத்திக்குள் உள்ளிடப்பட்ட உரையைத் தேடுகிறது.
• ஒவ்வொரு நிகழ்விற்கும், அது ஒரு Range ஆப்ஜெக்டை உருவாக்கி அதை Highlight ஆப்ஜெக்டில் சேர்க்கிறது.
• CSS கோட் டைனமிக்காக ஹைலைட் செய்யப்பட்ட உரையை மஞ்சள் பின்னணி மற்றும் கருப்பு உரை நிறத்துடன் ஸ்டைல் செய்கிறது.

எடுத்துக்காட்டு 4: ::highlight() மூலம் ஹைலைட் தோற்றத்தைத் தனிப்பயனாக்குதல்

Custom Highlight API-யின் சக்தி, ஹைலைட் செய்யப்பட்ட உரையின் தோற்றத்தையும் உணர்வையும் தனிப்பயனாக்கும் திறனில் உள்ளது. நிழல்கள், கிரேடியன்ட்கள் மற்றும் பிற காட்சி விளைவுகளை எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே.

HTML:

            <p id="customText">Select this text to see a custom highlight effect.</p>
            

              
                Copy
              
            
          

JavaScript:

            const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}
            

              
                Copy
              
            
          

விளக்கம்:

• இந்த எடுத்துக்காட்டு ஒரு லீனியர் கிரேடியன்ட் பின்னணி, வெள்ளை உரை, ஒரு உரை நிழல், வட்டமான மூலைகள், மற்றும் ஹைலைட் செய்யப்பட்ட உரைக்கு பேடிங் ஆகியவற்றைப் பயன்படுத்துகிறது.
• பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் தனித்துவமான தேர்வு ஸ்டைல்களை அடைய ::highlight() சூடோ-எலிமெண்ட்டிற்குள் நிலையான CSS பண்புகளை எவ்வாறு பயன்படுத்தலாம் என்பதை இது காட்டுகிறது.

அணுகல்தன்மை பரிசீலனைகள்

உரைத் தேர்வுகளின் காட்சி தோற்றத்தை மேம்படுத்துவது முக்கியம் என்றாலும், அணுகல்தன்மை எப்போதும் ஒரு முதன்மைக் கவலையாக இருக்க வேண்டும். உங்கள் தனிப்பயன் ஹைலைட் ஸ்டைல்கள் அணுகக்கூடியவை என்பதை உறுதிப்படுத்த சில வழிகாட்டுதல்கள் இங்கே:

• நிற வேறுபாடு: ஹைலைட் செய்யப்பட்ட உரையின் பின்னணி மற்றும் உரை நிறத்திற்கு இடையே போதுமான வேறுபாடு இருப்பதை உறுதிசெய்யவும். அணுகல்தன்மை தரநிலைகளுடன் (WCAG) இணக்கத்தை சரிபார்க்க WebAIM Contrast Checker போன்ற கருவிகளைப் பயன்படுத்தவும்.
• காட்சி குறிப்புகள்: தேர்ந்தெடுக்கப்பட்ட உரைக்கு தெளிவான காட்சி குறிப்புகளை வழங்கவும். பார்வை குறைபாடு உள்ள பயனர்கள் உணர கடினமாக இருக்கும் நுட்பமான வண்ண மாற்றங்களைத் தவிர்க்கவும்.
• விசைப்பலகை வழிசெலுத்தல்: தனிப்பயன் ஹைலைட் ஸ்டைல்கள் விசைப்பலகை வழிசெலுத்தலில் தலையிடாது என்பதை உறுதிப்படுத்தவும். பயனர்கள் விசைப்பலகையைப் பயன்படுத்தி எளிதாக உரையைத் தேர்ந்தெடுத்து செல்ல வேண்டும்.
• ஸ்கிரீன் ரீடர் இணக்கத்தன்மை: தேர்ந்தெடுக்கப்பட்ட உரை சரியாக அறிவிக்கப்படுகிறதா என்பதை உறுதிப்படுத்த உங்கள் தனிப்பயன் ஹைலைட் ஸ்டைல்களை ஸ்கிரீன் ரீடர்களுடன் சோதிக்கவும்.

உலாவி இணக்கத்தன்மை

CSS Custom Highlight API என்பது ஒப்பீட்டளவில் ஒரு புதிய வலை தரநிலையாகும், மேலும் உலாவி இணக்கத்தன்மை மாறுபடலாம். 2023-ன் பிற்பகுதி/2024-ன் தொடக்கத்தில், ஆதரவு வளர்ந்து வருகிறது ஆனால் உலகளவில் செயல்படுத்தப்படவில்லை. இணக்கத்தன்மை புதுப்பிப்புகள் பற்றித் தெரிந்துகொள்ள "Can I use..." போன்ற வலைத்தளங்களில் தற்போதைய உலாவி ஆதரவு நிலையை நீங்கள் சரிபார்க்கலாம்.

API-ஐ இன்னும் ஆதரிக்காத உலாவிகளுக்கு ஃபால்பேக் ஸ்டைல்களை வழங்க அம்சத்தைக் கண்டறிதலைப் பயன்படுத்துவதைக் கவனியுங்கள்.

            if ('CSS' in window && 'highlights' in CSS) {
  // Use the Custom Highlight API
} else {
  // Provide fallback styles using ::selection
}
            

              
                Copy
              
            
          

நிஜ உலக பயன்பாட்டு வழக்குகள்

CSS Custom Highlight API பல நிஜ உலகப் பயன்பாடுகளைக் கொண்டுள்ளது, அவற்றுள்:

• கோட் எடிட்டர்கள்: கோட் எடிட்டர்களில் தொடரியல் கூறுகள், பிழைகள் மற்றும் எச்சரிக்கைகளை ஹைலைட் செய்யவும்.
• இ-கற்றல் தளங்கள்: கல்விப் பொருட்களில் முக்கிய கருத்துக்கள் மற்றும் வரையறைகளை வலியுறுத்தவும்.
• ஆவணப் பார்வையாளர்கள்: பயனர்கள் ஆவணங்களில் உரையை ஹைலைட் செய்து குறிப்புரை செய்ய அனுமதிக்கவும்.
• தேடல் முடிவுகள்: தேடல் முடிவுகளுக்குள் தேடல் சொற்களை ஹைலைட் செய்யவும்.
• தரவுக் காட்சிப்படுத்தல்: விளக்கப்படங்கள் மற்றும் வரைபடங்களில் குறிப்பிட்ட தரவுப் புள்ளிகள் அல்லது போக்குகளை ஹைலைட் செய்யவும்.

சிறந்த நடைமுறைகள் மற்றும் குறிப்புகள்

• விளக்கமான ஹைலைட் பெயர்களைப் பயன்படுத்தவும்: ஹைலைட் செய்வதன் நோக்கத்தைத் தெளிவாகக் குறிக்கும் ஹைலைட் பெயர்களைத் தேர்வு செய்யவும்.
• தேவைப்படும்போது ஹைலைட்களை அழிக்கவும்: எதிர்பாராத ஸ்டைலிங் சிக்கல்களைத் தவிர்க்க, இனி தேவைப்படாதபோது ஹைலைட்களை அழிக்க நினைவில் கொள்ளுங்கள்.
• செயல்திறனை மேம்படுத்தவும்: அதிகப்படியான ஹைலைட் வரம்புகளை உருவாக்குவதைத் தவிர்க்கவும், ஏனெனில் இது செயல்திறனைப் பாதிக்கலாம்.
• முழுமையாக சோதிக்கவும்: இணக்கத்தன்மை மற்றும் அணுகல்தன்மையை உறுதிப்படுத்த வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் உங்கள் தனிப்பயன் ஹைலைட் ஸ்டைல்களைச் சோதிக்கவும்.
• ஃபால்பேக்குகளைக் கருத்தில் கொள்ளுங்கள்: Custom Highlight API-ஐ இன்னும் ஆதரிக்காத உலாவிகளுக்கு ஃபால்பேக் ஸ்டைல்களை வழங்கவும்.

மேம்பட்ட நுட்பங்கள்

1. பல ஹைலைட்களை இணைத்தல்

மேலும் சிக்கலான ஸ்டைலிங் விளைவுகளை உருவாக்க நீங்கள் பல ஹைலைட்களை இணைக்கலாம். எடுத்துக்காட்டாக, முக்கிய வார்த்தைகள் மற்றும் பயனர் தேர்ந்தெடுத்த உரை ஆகிய இரண்டையும் வெவ்வேறு ஸ்டைல்களுடன் ஹைலைட் செய்ய நீங்கள் விரும்பலாம்.

2. ஹைலைட்களைப் புதுப்பிக்க நிகழ்வுகளைப் பயன்படுத்துதல்

பயனர் தொடர்புகளின் அடிப்படையில் ஹைலைட் வரம்புகளை டைனமிக்காகப் புதுப்பிக்க நீங்கள் மவுஸ்ஓவர் அல்லது கிளிக் போன்ற ஜாவாஸ்கிரிப்ட் நிகழ்வுகளைப் பயன்படுத்தலாம்.

3. மூன்றாம் தரப்பு நூலகங்களுடன் ஒருங்கிணைத்தல்

மேலும் அதிநவீன ஹைலைட்டிங் தீர்வுகளை உருவாக்க நீங்கள் Custom Highlight API-ஐ மூன்றாம் தரப்பு நூலகங்களுடன் ஒருங்கிணைக்கலாம். உதாரணமாக, ஒரு ஆவணத்தில் உள்ள முக்கிய சொற்களை தானாக அடையாளம் கண்டு ஹைலைட் செய்ய நீங்கள் ஒரு இயற்கை மொழி செயலாக்க (NLP) நூலகத்தைப் பயன்படுத்தலாம்.

உரைத் தேர்வு ஸ்டைலிங்கின் எதிர்காலம்

CSS Custom Highlight API உரைத் தேர்வு ஸ்டைலிங்கில் ஒரு குறிப்பிடத்தக்க முன்னேற்றத்தைக் குறிக்கிறது. இது டெவலப்பர்களுக்கு மேலும் ஈர்க்கக்கூடிய, அணுகக்கூடிய மற்றும் சூழல்-சார்ந்த பயனர் இடைமுகங்களை உருவாக்க அதிகாரம் அளிக்கிறது. உலாவி ஆதரவு தொடர்ந்து வளர்ந்து வருவதால், Custom Highlight API உலகெங்கிலும் உள்ள வலை டெவலப்பர்களுக்கு ஒரு இன்றியமையாத கருவியாக மாறும் நிலையில் உள்ளது.

முடிவுரை

CSS Custom Highlight API உரைத் தேர்வு அனுபவத்தைத் தனிப்பயனாக்குவதற்கான சாத்தியக்கூறுகளின் உலகத்தைத் திறக்கிறது. முக்கிய கருத்துக்களைப் புரிந்துகொள்வதன் மூலமும், நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வதன் மூலமும், அணுகல்தன்மை வழிகாட்டுதல்களைக் கருத்தில் கொள்வதன் மூலமும், உண்மையிலேயே விதிவிலக்கான பயனர் இடைமுகங்களை உருவாக்க இந்த சக்திவாய்ந்த API-ஐ நீங்கள் பயன்படுத்தலாம். Custom Highlight API-ஐ ஏற்றுக்கொண்டு, உங்கள் வலை மேம்பாட்டுத் திட்டங்களை புதிய உயரத்திற்கு உயர்த்துங்கள்.

வழங்கப்பட்ட எடுத்துக்காட்டுகளுடன் பரிசோதனை செய்யுங்கள், அவற்றை உங்கள் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப மாற்றியமைத்து, CSS Custom Highlight API-யின் முழுத் திறனையும் ஆராயுங்கள். உங்கள் பயனர்கள் விவரங்களில் கவனம் செலுத்துவதையும் மேம்பட்ட பயனர் அனுபவத்தையும் பாராட்டுவார்கள்.