சிஎஸ்எஸ் பயன்படுத்தி டெக்ஸ்ட் செலக்ஷன் ஹைலைட் நிறம் மற்றும் தோற்றத்தைத் தனிப்பயனாக்குவது, பயனர் அனுபவம் மற்றும் பிராண்ட் நிலைத்தன்மையை மேம்படுத்துவது எப்படி என்பதை அறிக.
சிஎஸ்எஸ் கஸ்டம் ஹைலைட்: டெக்ஸ்ட் செலக்ஷன் ஸ்டைலிங்கில் தேர்ச்சி பெறுதல்
டெக்ஸ்ட் செலக்ஷன், அதாவது ஒரு இணையப் பக்கத்தில் உள்ள சொற்களின் மீது உங்கள் கர்சரை இழுத்துச் செல்லும் எளிய செயல், வடிவமைப்பு மற்றும் பிராண்டிங்கில் பெரும்பாலும் கவனிக்கப்படுவதில்லை. இருப்பினும், இயல்புநிலை பிரவுசர் ஹைலைட் நிறத்தைத் தனிப்பயனாக்குவது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்தி, உங்கள் பிராண்ட் அடையாளத்தை வலுப்படுத்தும். இந்த விரிவான வழிகாட்டி சிஎஸ்எஸ் கஸ்டம் ஹைலைட் பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும் விளக்கும், இதில் ::selection சூடோ-எலிமெண்ட், பிரவுசர் இணக்கத்தன்மை, அணுகல்தன்மை பரிசீலனைகள் மற்றும் உங்கள் வலைத்தளத்தின் வடிவமைப்பை மேம்படுத்துவதற்கான நடைமுறை எடுத்துக்காட்டுகள் ஆகியவை அடங்கும்.
டெக்ஸ்ட் செலக்ஷன் ஹைலைட்களை ஏன் தனிப்பயனாக்க வேண்டும்?
இயல்புநிலை பிரவுசர் ஹைலைட் நிறம் (வழக்கமாக நீலம்) செயல்பாட்டுக்கு உகந்ததாக இருந்தாலும், அது உங்கள் வலைத்தளத்தின் வண்ணத் திட்டம் அல்லது பிராண்ட் அழகியலுடன் பொருந்தாமல் இருக்கலாம். ஹைலைட் நிறத்தைத் தனிப்பயனாக்குவது பல நன்மைகளை வழங்குகிறது:
- பிராண்ட் நிலைத்தன்மை: செலக்ஷன் ஹைலைட் உங்கள் பிராண்ட் வண்ணங்களைப் பூர்த்தி செய்வதை உறுதிசெய்து, ஒரு ஒருங்கிணைந்த காட்சி அனுபவத்தை உருவாக்குகிறது.
- மேம்படுத்தப்பட்ட பயனர் அனுபவம்: நன்கு தேர்ந்தெடுக்கப்பட்ட ஹைலைட் நிறம், குறிப்பாக பார்வைக் குறைபாடு உள்ள பயனர்களுக்கு, வாசிப்புத் திறனை மேம்படுத்தி, கண் அழுத்தத்தைக் குறைக்கும்.
- மேம்பட்ட காட்சி ஈர்ப்பு: ஒரு கஸ்டம் ஹைலைட் உங்கள் வலைத்தளத்தின் வடிவமைப்பிற்கு ஒரு நுட்பமான நேர்த்தியையும் தொழில்முறையையும் சேர்க்கும்.
- அதிகரித்த ஈடுபாடு: சிறியதாகத் தோன்றினாலும், காட்சி விவரங்கள் ஒட்டுமொத்த பயனர் ஈடுபாடு மற்றும் திருப்திக்கு பங்களிக்கின்றன.
::selection சூடோ-எலிமெண்ட்
சிஎஸ்எஸ் மூலம் டெக்ஸ்ட் செலக்ஷன் ஹைலைட்களைத் தனிப்பயனாக்குவதற்கான திறவுகோல் ::selection சூடோ-எலிமெண்ட் ஆகும். இது தேர்ந்தெடுக்கப்பட்ட உரையின் பின்னணி நிறம் மற்றும் உரை நிறத்தை ஸ்டைல் செய்ய உங்களை அனுமதிக்கிறது. இந்த சூடோ-எலிமெண்ட்டைப் பயன்படுத்தி font-size, font-weight, அல்லது text-decoration போன்ற பிற பண்புகளை ஸ்டைல் செய்ய முடியாது என்பதை நினைவில் கொள்க.
அடிப்படை சிண்டாக்ஸ்
அடிப்படை சிண்டாக்ஸ் மிகவும் எளிமையானது:
::selection {
background-color: color;
color: color;
}
color என்பதை நீங்கள் விரும்பும் வண்ண மதிப்புகளுடன் (எ.கா., ஹெக்ஸாடெசிமல், RGB, HSL, அல்லது பெயரிடப்பட்ட வண்ணங்கள்) மாற்றவும்.
உதாரணம்
உரை தேர்ந்தெடுக்கப்படும்போது பின்னணி நிறத்தை வெளிர் நீலமாகவும், உரை நிறத்தை வெள்ளையாகவும் அமைக்கும் ஒரு எளிய உதாரணம் இதோ:
::selection {
background-color: #ADD8E6; /* வெளிர் நீலம் */
color: white;
}
இந்த சிஎஸ்எஸ் விதியை உங்கள் ஸ்டைல்ஷீட் அல்லது <style> டேக்கில் சேர்த்து கஸ்டம் ஹைலைட்டைப் பயன்படுத்தலாம்.
பிரவுசர் இணக்கத்தன்மை: பிரிஃபிக்ஸ்களைக் கையாளுதல்
::selection நவீன பிரவுசர்களால் பரவலாக ஆதரிக்கப்பட்டாலும், பழைய பதிப்புகளுக்கு வெண்டார் பிரிஃபிக்ஸ்கள் தேவைப்படலாம். அதிகபட்ச இணக்கத்தன்மையை உறுதிப்படுத்த, -moz-selection மற்றும் -webkit-selection பிரிஃபிக்ஸ்களைச் சேர்ப்பது சிறந்த நடைமுறையாகும்.
பிரிஃபிக்ஸ்களுடன் புதுப்பிக்கப்பட்ட சிண்டாக்ஸ்
வெண்டார் பிரிஃபிக்ஸ்களைச் சேர்ப்பதற்கான புதுப்பிக்கப்பட்ட சிண்டாக்ஸ் இதோ:
::-moz-selection {
background-color: #ADD8E6;
color: white;
}
::selection {
background-color: #ADD8E6;
color: white;
}
::-webkit-selection {
background-color: #ADD8E6;
color: white;
}
இது உங்கள் கஸ்டம் ஹைலைட் Firefox (-moz-selection) மற்றும் Safari/Chrome (-webkit-selection) இன் பழைய பதிப்புகள் உட்பட பரந்த அளவிலான பிரவுசர்களில் செயல்படுவதை உறுதி செய்கிறது.
அணுகல்தன்மை பரிசீலனைகள்
டெக்ஸ்ட் செலக்ஷன் ஹைலைட்களைத் தனிப்பயனாக்கும்போது, அணுகல்தன்மைக்கு முன்னுரிமை அளிப்பது மிகவும் முக்கியம். தவறான வண்ணத் தேர்வுகள் பார்வைக் குறைபாடு உள்ள பயனர்கள் தேர்ந்தெடுக்கப்பட்ட உரையைப் படிப்பதைக் கடினமாக்கும். இங்கே சில முக்கிய பரிசீலனைகள்:
- கான்ட்ராஸ்ட் ரேஷியோ: செலக்ஷன் ஹைலைட்டின் பின்னணி நிறத்திற்கும் உரை நிறத்திற்கும் இடையே போதுமான கான்ட்ராஸ்ட் இருப்பதை உறுதிசெய்யவும். WCAG (Web Content Accessibility Guidelines) சாதாரண உரைக்கு குறைந்தபட்சம் 4.5:1 மற்றும் பெரிய உரைக்கு 3:1 என்ற கான்ட்ராஸ்ட் ரேஷியோவைப் பரிந்துரைக்கிறது.
- நிறக்குருடு: ஹைலைட் வண்ணங்களைத் தேர்ந்தெடுக்கும்போது நிறக்குருடு பற்றி கவனத்தில் கொள்ளுங்கள். வெவ்வேறு வகையான நிறப்பார்வைக் குறைபாடு உள்ளவர்கள் வேறுபடுத்துவதற்கு கடினமான வண்ணக் கலவைகளைத் தவிர்க்கவும். WebAIM's Color Contrast Checker (https://webaim.org/resources/contrastchecker/) போன்ற கருவிகள் வண்ணக் கலவைகளை மதிப்பிட உதவும்.
- பயனர் விருப்பத்தேர்வுகள்: பயனர்கள் தங்கள் தனிப்பட்ட தேவைகள் மற்றும் விருப்பங்களுக்கு ஏற்ப ஹைலைட் நிறத்தைத் தனிப்பயனாக்க அனுமதிக்கலாம். இதை பயனர் அமைப்புகள் அல்லது பிரவுசர் நீட்டிப்புகள் மூலம் அடையலாம்.
உதாரணம்: அணுகக்கூடிய வண்ணக் கலவை
அதிக கான்ட்ராஸ்ட் ரேஷியோ கொண்ட ஒரு அணுகக்கூடிய வண்ணக் கலவையின் உதாரணம் இதோ:
::selection {
background-color: #2E8B57; /* கடல் பச்சை */
color: #FFFFFF; /* வெள்ளை */
}
இந்தக் கலவை ஒரு வலுவான கான்ட்ராஸ்ட்டை வழங்குகிறது, இது பயனர்கள் தேர்ந்தெடுக்கப்பட்ட உரையைப் படிப்பதை எளிதாக்குகிறது.
மேம்பட்ட தனிப்பயனாக்குதல் நுட்பங்கள்
அடிப்படை வண்ண மாற்றங்களுக்கு அப்பால், நீங்கள் சிஎஸ்எஸ் வேரியபிள்கள் மற்றும் பிற நுட்பங்களைப் பயன்படுத்தி மேலும் அதிநவீன மற்றும் டைனமிக் டெக்ஸ்ட் செலக்ஷன் ஹைலைட்களை உருவாக்கலாம்.
சிஎஸ்எஸ் வேரியபிள்களைப் பயன்படுத்துதல்
சிஎஸ்எஸ் வேரியபிள்கள் (கஸ்டம் பிராப்பர்டீஸ் என்றும் அழைக்கப்படுகிறது) எளிதாகப் புதுப்பிக்கக்கூடிய மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளை வரையறுக்க உங்களை அனுமதிக்கிறது. இது உங்கள் வலைத்தளத்தின் வடிவமைப்பு முழுவதும் நிலைத்தன்மையைப் பேணுவதற்கு மிகவும் பயனுள்ளதாக இருக்கும்.
சிஎஸ்எஸ் வேரியபிள்களை வரையறுத்தல்
உங்கள் சிஎஸ்எஸ் வேரியபிள்களை :root சூடோ-கிளாஸில் வரையறுக்கவும்:
:root {
--highlight-background: #FFD700; /* தங்கம் */
--highlight-text: #000000; /* கருப்பு */
}
::selection இல் சிஎஸ்எஸ் வேரியபிள்களைப் பயன்படுத்துதல்
உங்கள் ::selection விதியில் சிஎஸ்எஸ் வேரியபிள்களைக் குறிப்பிட var() செயல்பாட்டைப் பயன்படுத்தவும்:
::selection {
background-color: var(--highlight-background);
color: var(--highlight-text);
}
இப்போது, :root சூடோ-கிளாஸில் உள்ள சிஎஸ்எஸ் வேரியபிள்களைப் புதுப்பிப்பதன் மூலம் ஹைலைட் நிறத்தை எளிதாக மாற்றலாம்.
சூழலைப் பொறுத்து டைனமிக் ஹைலைட் நிறங்கள்
தேர்ந்தெடுக்கப்பட்ட உரையின் சூழலைப் பொறுத்து டைனமிக் ஹைலைட் நிறங்களை நீங்கள் உருவாக்கலாம். உதாரணமாக, தலைப்புகளுக்கு ஒரு ஹைலைட் நிறத்தையும், பாடி டெக்ஸ்டுக்கு வேறு நிறத்தையும் பயன்படுத்த விரும்பலாம். இதை ஜாவாஸ்கிரிப்ட் மற்றும் சிஎஸ்எஸ் வேரியபிள்களைப் பயன்படுத்தி அடையலாம்.
உதாரணம்: வேறுபடுத்தப்பட்ட ஹைலைட்கள்
முதலில், வெவ்வேறு ஹைலைட் நிறங்களுக்கான சிஎஸ்எஸ் வேரியபிள்களை வரையறுக்கவும்:
:root {
--heading-highlight-background: #87CEEB; /* வான நீலம் */
--heading-highlight-text: #FFFFFF; /* வெள்ளை */
--body-highlight-background: #FFFFE0; /* வெளிர் மஞ்சள் */
--body-highlight-text: #000000; /* கருப்பு */
}
பின்னர், தேர்ந்தெடுக்கப்பட்ட உரையின் பெற்றோர் எலிமெண்ட்டில் ஒரு கிளாஸைச் சேர்க்க ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்:
// இது ஒரு எளிமைப்படுத்தப்பட்ட உதாரணம் மற்றும் வெவ்வேறு செலக்ஷன் சூழ்நிலைகளைத் துல்லியமாகக் கையாள மேலும் வலுவான செயலாக்கம் தேவை.
document.addEventListener('mouseup', function(event) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const parentElement = range.commonAncestorContainer.parentNode;
if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
parentElement.classList.add('heading-selected');
} else {
parentElement.classList.remove('heading-selected');
}
}
});
இறுதியாக, வெவ்வேறு கிளாஸ்களுக்கான சிஎஸ்எஸ் விதிகளை வரையறுக்கவும்:
.heading-selected::selection {
background-color: var(--heading-highlight-background);
color: var(--heading-highlight-text);
}
::selection {
background-color: var(--body-highlight-background);
color: var(--body-highlight-text);
}
இந்த உதாரணம், தேர்ந்தெடுக்கப்பட்ட சூழலைப் பொறுத்து தலைப்புகள் மற்றும் பாடி டெக்ஸ்டுக்கு வெவ்வேறு ஹைலைட் நிறங்களை எப்படி உருவாக்குவது என்பதைக் காட்டுகிறது. ஒரு விரிவான செயலாக்கத்திற்கு பல்வேறு செலக்ஷன் சூழ்நிலைகள் மற்றும் எட்ஜ் கேஸ்களை ஜாவாஸ்கிரிப்ட் மூலம் கையாள வேண்டும்.
நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்
உங்கள் சொந்த கஸ்டம் ஹைலைட் வடிவமைப்புகளுக்கு உத்வேகம் அளிக்க சில நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள் இங்கே:
- மினிமலிஸ்ட் வடிவமைப்பு: ஒரு சுத்தமான மற்றும் நவீன தோற்றத்தைப் பராமரிக்க, ஹைலைட்டுக்கு ஒரு நுட்பமான, நிறமற்ற வண்ணத்தைப் பயன்படுத்தவும். உதாரணமாக, ஒரு வெளிர் சாம்பல் அல்லது பழுப்பு நிறம்.
- டார்க் தீம்: டார்க் தீமிற்காக இயல்புநிலை வண்ணங்களை மாற்றி, ஹைலைட்டிற்கு இருண்ட பின்னணி மற்றும் வெளிர் நிற உரையைப் பயன்படுத்தவும். இது குறைந்த ஒளி சூழல்களில் வாசிப்புத் திறனை மேம்படுத்துகிறது.
- பிராண்டிங் வலுவூட்டல்: பிராண்ட் அங்கீகாரத்தை வலுப்படுத்த, ஹைலைட்டிற்கு உங்கள் பிராண்டின் முதன்மை அல்லது இரண்டாம் நிலை நிறத்தைப் பயன்படுத்தவும்.
- இன்டராக்டிவ் டுடோரியல்கள்: பயனர்களை படிகள் வழியாக வழிநடத்த இன்டராக்டிவ் டுடோரியல்களில் ஹைலைட்டிற்கு ஒரு பிரகாசமான, கவனத்தை ஈர்க்கும் நிறத்தைப் பயன்படுத்தவும். உதாரணமாக, ஒரு துடிப்பான மஞ்சள் அல்லது ஆரஞ்சு.
- கோட் ஹைலைட்டிங்: கோட் துணுக்குகளுக்கான ஹைலைட் நிறத்தைத் தனிப்பயனாக்கி, வாசிப்புத் திறனை மேம்படுத்தி, கோடின் வெவ்வேறு கூறுகளை வேறுபடுத்திக் காட்டவும்.
உதாரணம்: கஸ்டம் ஹைலைட்டுடன் கோட் ஹைலைட்டிங்
கோட் ஹைலைட்டிங்கிற்கு, ஒரு நுட்பமான ஆனால் தனித்துவமான நிறம் வாசிப்புத் திறனை மேம்படுத்தும்:
pre ::selection {
background-color: rgba(255, 255, 0, 0.2); /* வெளிர் மஞ்சள் (ஒளிபுகும் தன்மையுடன்) */
color: #000000; /* கருப்பு */
}
இந்த உதாரணம், தேர்ந்தெடுக்கப்பட்ட கோடை ஹைலைட் செய்ய ஒரு பகுதி ஒளிபுகும் வெளிர் மஞ்சளைப் பயன்படுத்துகிறது, இது அதிக கவனச்சிதறல் இல்லாமல் எளிதாக வேறுபடுத்தி அறிய உதவுகிறது.
தவிர்க்க வேண்டிய பொதுவான தவறுகள்
டெக்ஸ்ட் செலக்ஷன் ஹைலைட்களைத் தனிப்பயனாக்கும்போது தவிர்க்க வேண்டிய சில பொதுவான தவறுகள் இங்கே:
- அணுகல்தன்மையைப் புறக்கணித்தல்: பின்னணி மற்றும் உரை வண்ணங்களுக்கு இடையே போதுமான கான்ட்ராஸ்ட்டை உறுதி செய்யத் தவறுவது.
- அதிக பிரகாசமான அல்லது கவனச்சிதறல் ஏற்படுத்தும் நிறங்கள்: கண் அழுத்தத்தை ஏற்படுத்தி, வாசிப்புத் திறனைக் குறைக்கும் அதிக பிரகாசமான அல்லது கவனச்சிதறல் ஏற்படுத்தும் வண்ணங்களைப் பயன்படுத்துதல்.
- சீரற்ற ஸ்டைலிங்: உங்கள் வலைத்தளத்தின் வெவ்வேறு பகுதிகளில் வெவ்வேறு ஹைலைட் ஸ்டைல்களைப் பயன்படுத்துவது, ஒரு துண்டிக்கப்பட்ட பயனர் அனுபவத்தை உருவாக்குகிறது.
- வெண்டார் பிரிஃபிக்ஸ்களை மறந்துவிடுதல்: பழைய பிரவுசர்களுக்கான வெண்டார் பிரிஃபிக்ஸ்களைச் சேர்க்கத் தவறுவது.
- கஸ்டம் ஹைலைட்களை அதிகமாகப் பயன்படுத்துதல்: பயனர் அனுபவத்தை மேம்படுத்தும் இடங்களில் மட்டுமே கஸ்டம் ஹைலைட்களைப் பயன்படுத்தவும். அவற்றை அதிகமாகப் பயன்படுத்துவது தளத்தை ஒழுங்கற்றதாகவோ அல்லது கவனச்சிதறலாகவோ தோற்றுவிக்கும்.
முடிவுரை
சிஎஸ்எஸ் மூலம் டெக்ஸ்ட் செலக்ஷன் ஹைலைட்களைத் தனிப்பயனாக்குவது பயனர் அனுபவத்தை மேம்படுத்தவும், உங்கள் பிராண்ட் அடையாளத்தை வலுப்படுத்தவும் ஒரு எளிய ஆனால் பயனுள்ள வழியாகும். ::selection சூடோ-எலிமெண்ட்டைப் புரிந்துகொள்வதன் மூலமும், பிரவுசர் இணக்கத்தன்மையைக் கையாள்வதன் மூலமும், அணுகல்தன்மைக்கு முன்னுரிமை அளிப்பதன் மூலமும், நீங்கள் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பயனர் நட்பு வலைத்தளங்களை உருவாக்கலாம். உங்கள் பிராண்டிற்கு சரியான ஹைலைட் ஸ்டைலைக் கண்டறிய வெவ்வேறு வண்ணக் கலவைகள் மற்றும் நுட்பங்களுடன் பரிசோதனை செய்யுங்கள்.
சீரான முடிவுகளை உறுதிப்படுத்த, உங்கள் கஸ்டம் ஹைலைட்களை வெவ்வேறு பிரவுசர்கள் மற்றும் சாதனங்களில் எப்போதும் சோதிக்க நினைவில் கொள்ளுங்கள். இந்த பெரும்பாலும் கவனிக்கப்படாத விவரத்தில் கவனம் செலுத்துவதன் மூலம், உங்கள் வலைத்தளத்தின் வடிவமைப்பை உயர்த்தி, உங்கள் பயனர்களுக்கு மேலும் ஈடுபாடுள்ள அனுபவத்தை உருவாக்கலாம்.