CSS :has() செலக்டரை ஆராயுங்கள், இது parent selection-ல் ஒரு திருப்புமுனை. நடைமுறைப் பயன்பாடுகள், உலாவி இணக்கத்தன்மை, மற்றும் உங்கள் CSS ஸ்டைலிங்கில் புரட்சி செய்ய மேம்பட்ட நுட்பங்களைக் கற்றுக்கொள்ளுங்கள்.
CSS :has() செலக்டரில் தேர்ச்சி பெறுதல்: Parent Selection சக்தியை வெளிக்கொணர்தல்
பல ஆண்டுகளாக, CSS டெவலப்பர்கள் தங்கள் குழந்தைகளைக் கொண்டு பெற்றோர் உறுப்புகளைத் (parent elements) தேர்ந்தெடுக்க எளிய மற்றும் பயனுள்ள வழிக்காக ஏங்கிக் கொண்டிருந்தனர். காத்திருப்பு முடிந்தது! :has() pseudo-class இறுதியாக வந்துவிட்டது, மேலும் இது நாம் CSS எழுதும் விதத்தில் புரட்சியை ஏற்படுத்துகிறது. இந்த சக்திவாய்ந்த செலக்டர், ஒரு குறிப்பிட்ட குழந்தை உறுப்பைக் (child element) கொண்டிருந்தால், அதன் பெற்றோர் உறுப்பை குறிவைக்க உங்களை அனுமதிக்கிறது, இது டைனமிக் மற்றும் ரெஸ்பான்சிவ் ஸ்டைலிங்கிற்கான சாத்தியக்கூறுகளின் உலகத்தைத் திறக்கிறது.
:has() செலக்டர் என்றால் என்ன?
:has() pseudo-class என்பது ஒரு CSS ரிலேஷனல் pseudo-class ஆகும், இது ஒரு செலக்டர் பட்டியலை ஒரு ஆர்குமென்டாக ஏற்றுக்கொள்கிறது. ஒரு உறுப்பின் சந்ததியினரிடையே (descendants) செலக்டர் பட்டியலில் உள்ள செலக்டர்களில் ஏதேனும் ஒன்று குறைந்தபட்சம் ஒரு உறுப்புடன் பொருந்தினால், அது அந்த உறுப்பைத் தேர்ந்தெடுக்கிறது. எளிமையான சொற்களில், ஒரு பெற்றோர் உறுப்பு கொண்டுள்ளதா என்று சரிபார்க்கிறது, அப்படியிருந்தால், அந்த பெற்றோர் தேர்ந்தெடுக்கப்படுகிறது.
இதன் அடிப்படை சிண்டாக்ஸ்:
parent:has(child) { /* CSS விதிகள் */ }
இது parent உறுப்பில் குறைந்தபட்சம் ஒரு child உறுப்பு இருந்தால் மட்டுமே அதைத் தேர்ந்தெடுக்கிறது.
:has() ஏன் மிகவும் முக்கியமானது?
பாரம்பரியமாக, CSS அதன் குழந்தைகளைக் கொண்டு பெற்றோர் உறுப்புகளைத் தேர்ந்தெடுக்கும் திறனில் குறைவாகவே இருந்தது. இந்த வரம்பு டைனமிக் ஸ்டைலிங்கை அடைய பெரும்பாலும் சிக்கலான ஜாவாஸ்கிரிப்ட் தீர்வுகள் அல்லது மாற்று வழிகள் தேவைப்பட்டன. :has() செலக்டர் இந்த சிரமமான முறைகளின் தேவையை நீக்குகிறது, இது சுத்தமான, பராமரிக்க எளிதான, மற்றும் செயல்திறன் மிக்க CSS குறியீட்டை அனுமதிக்கிறது.
:has() ஏன் ஒரு கேம்-சேஞ்சர் என்பதற்கான காரணங்கள் இங்கே:
- எளிமைப்படுத்தப்பட்ட ஸ்டைலிங்: முன்பு ஜாவாஸ்கிரிப்ட் தேவைப்பட்ட சிக்கலான ஸ்டைலிங் விதிகளை இப்போது தூய CSS மூலம் அடைய முடியும்.
- மேம்படுத்தப்பட்ட பராமரிப்பு: சுத்தமான மற்றும் சுருக்கமான CSS குறியீட்டைப் புரிந்துகொள்வது, பிழைதிருத்தம் செய்வது மற்றும் பராமரிப்பது எளிது.
- மேம்படுத்தப்பட்ட செயல்திறன்: ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தீர்வுகளுடன் ஒப்பிடும்போது நேட்டிவ் CSS செலக்டர்களைப் பயன்படுத்துவது பொதுவாக சிறந்த செயல்திறனை விளைவிக்கிறது.
- அதிக நெகிழ்வுத்தன்மை:
:has()செலக்டர் டைனமிக் மற்றும் ரெஸ்பான்சிவ் டிசைன்களை உருவாக்குவதில் அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது.
:has() செலக்டரின் அடிப்படை எடுத்துக்காட்டுகள்
:has() செலக்டரின் சக்தியை விளக்க சில எளிய எடுத்துக்காட்டுகளுடன் தொடங்குவோம்.
எடுத்துக்காட்டு 1: ஒரு படம் இருப்பதன் அடிப்படையில் பெற்றோர் Div-ஐ ஸ்டைல் செய்தல்
ஒரு <div> உறுப்பில் ஒரு <img> உறுப்பு இருந்தால் மட்டுமே அதற்கு ஒரு பார்டரைச் சேர்க்க விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்:
div:has(img) {
border: 2px solid blue;
}
இந்த CSS விதி, குறைந்தபட்சம் ஒரு <img> உறுப்பைக் கொண்டிருக்கும் எந்த <div>-க்கும் ஒரு நீல நிற பார்டரைப் பயன்படுத்தும்.
எடுத்துக்காட்டு 2: ஒரு Span இருப்பதன் அடிப்படையில் ஒரு லிஸ்ட் ஐட்டத்தை ஸ்டைல் செய்தல்
உங்களிடம் ஒரு பொருட்களின் பட்டியல் உள்ளது, மேலும் ஒரு குறிப்பிட்ட கிளாஸ் கொண்ட <span> உறுப்பு இருந்தால், அந்த லிஸ்ட் ஐட்டத்தை ஹைலைட் செய்ய விரும்புகிறீர்கள்:
li:has(span.highlight) {
background-color: yellow;
}
இந்த CSS விதி, "highlight" என்ற கிளாஸ் கொண்ட <span>-ஐக் கொண்டிருக்கும் எந்த <li>-இன் பின்னணி நிறத்தையும் மஞ்சளாக மாற்றும்.
எடுத்துக்காட்டு 3: Input செல்லுபடியாகும் நிலையின் அடிப்படையில் ஒரு படிவ லேபிளை ஸ்டைல் செய்தல்
ஒரு படிவ லேபிளை அதனுடன் தொடர்புடைய உள்ளீட்டு புலம் செல்லுபடியாகிறதா அல்லது செல்லாததா என்பதைப் பொறுத்து ஸ்டைல் செய்ய :has()-ஐப் பயன்படுத்தலாம் (:invalid pseudo-class உடன் இணைத்து):
label:has(+ input:invalid) {
color: red;
font-weight: bold;
}
இது, அதற்குப் பின்னால் உடனடியாக வரும் உள்ளீட்டு புலம் செல்லாததாக இருந்தால், லேபிளை சிவப்பு மற்றும் தடிமனாக மாற்றும்.
:has() செலக்டரின் மேம்பட்ட பயன்பாடுகள்
:has() செலக்டர் மற்ற CSS செலக்டர்கள் மற்றும் pseudo-classes உடன் இணைக்கப்படும்போது இன்னும் சக்திவாய்ந்ததாகிறது. இங்கே சில மேம்பட்ட பயன்பாட்டு வழக்குகள் உள்ளன:
எடுத்துக்காட்டு 4: காலி உறுப்புகளைக் குறிவைத்தல்
ஒரு குறிப்பிட்ட குழந்தையை *கொண்டிராத* உறுப்புகளைக் குறிவைக்க :not() pseudo-class-ஐ :has() உடன் இணைந்து பயன்படுத்தலாம். உதாரணமாக, படங்கள் இல்லாத div-களை ஸ்டைல் செய்ய:
div:not(:has(img)) {
background-color: #f0f0f0;
}
இது, <img> உறுப்பு இல்லாத எந்த <div>-க்கும் ஒரு வெளிர் சாம்பல் பின்னணியைப் பயன்படுத்தும்.
எடுத்துக்காட்டு 5: சிக்கலான லேஅவுட்களை உருவாக்குதல்
:has() செலக்டரைப் பயன்படுத்தி ஒரு கண்டெய்னரின் உள்ளடக்கத்தின் அடிப்படையில் டைனமிக் லேஅவுட்களை உருவாக்கலாம். உதாரணமாக, ஒரு கிரிட் செல்லில் ஒரு குறிப்பிட்ட வகை உறுப்பு இருப்பதன் அடிப்படையில் ஒரு கிரிட்டின் லேஅவுட்டை மாற்றலாம்.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid-item:has(img) {
grid-column: span 2;
}
இது, ஒரு கிரிட் ஐட்டம் ஒரு படத்தைக் கொண்டிருந்தால் அதை இரண்டு பத்திகளாக விரிக்கும்.
எடுத்துக்காட்டு 6: டைனமிக் படிவ ஸ்டைலிங்
படிவ உறுப்புகளை அவற்றின் நிலையின் அடிப்படையில் (உதாரணமாக, அவை ஃபோகஸ் செய்யப்பட்டதா, நிரப்பப்பட்டதா, அல்லது செல்லுபடியாகிறதா) டைனமிக்காக ஸ்டைல் செய்ய :has()-ஐப் பயன்படுத்தலாம்.
.form-group:has(input:focus) {
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
.form-group:has(input:valid) {
border-color: green;
}
.form-group:has(input:invalid) {
border-color: red;
}
இது, உள்ளீடு ஃபோகஸ் செய்யப்படும்போது ஒரு நீல நிற பாக்ஸ் ஷேடோவையும், உள்ளீடு செல்லுபடியாகும் போது ஒரு பச்சை நிற பார்டரையும், உள்ளீடு செல்லாததாக இருக்கும்போது ஒரு சிவப்பு நிற பார்டரையும் சேர்க்கும்.
எடுத்துக்காட்டு 7: குழந்தைகள் எண்ணிக்கையின் அடிப்படையில் ஸ்டைலிங்
:has() நேரடியாக குழந்தைகளின் எண்ணிக்கையை கணக்கிடவில்லை என்றாலும், இதே போன்ற விளைவுகளை அடைய மற்ற செலக்டர்கள் மற்றும் CSS பண்புகளுடன் அதை இணைக்கலாம். உதாரணமாக, ஒரு பெற்றோர் ஒரு குறிப்பிட்ட வகை ஒரே ஒரு குழந்தையைக் கொண்டிருந்தால் அதை ஸ்டைல் செய்ய :only-child-ஐப் பயன்படுத்தலாம்.
div:has(> p:only-child) {
background-color: lightgreen;
}
இது, ஒரு <div> அதன் நேரடிக் குழந்தையாக ஒரே ஒரு <p> உறுப்பைக் கொண்டிருந்தால் மட்டும் அதற்கு ஒரு வெளிர் பச்சை பின்னணியில் ஸ்டைல் செய்யும்.
உலாவி இணக்கத்தன்மை மற்றும் ஃபால்பேக்குகள்
2023-ன் பிற்பகுதியில், :has() செலக்டர் Chrome, Firefox, Safari, மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் சிறந்த ஆதரவைக் கொண்டுள்ளது. இருப்பினும், பழைய உலாவிகளை ஆதரிக்க வேண்டியிருந்தால், தயாரிப்பில் அதை பயன்படுத்துவதற்கு முன்பு Can I use இல் இணக்கத்தன்மையைச் சரிபார்ப்பது மிகவும் முக்கியம்.
இணக்கத்தன்மை கருத்தில் கொள்ள வேண்டியவற்றின் ஒரு சுருக்கம் இங்கே:
- நவீன உலாவிகள்: Chrome, Firefox, Safari, மற்றும் Edge-இன் சமீபத்திய பதிப்புகளில் சிறந்த ஆதரவு.
- பழைய உலாவிகள்: பழைய உலாவிகளில் (உதாரணமாக, Internet Explorer) ஆதரவு இல்லை.
ஃபால்பேக்குகளை வழங்குதல்
நீங்கள் பழைய உலாவிகளை ஆதரிக்க வேண்டியிருந்தால், நீங்கள் ஃபால்பேக்குகளை வழங்க வேண்டும். இங்கே சில உத்திகள் உள்ளன:
- ஜாவாஸ்கிரிப்ட்: உலாவியின்
:has()ஆதரவைக் கண்டறிய ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி, தேவைப்பட்டால் மாற்று ஸ்டைலிங்கைப் பயன்படுத்துங்கள். - ஃபீச்சர் குவரிகள்: உலாவி ஆதரவின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களை வழங்க CSS ஃபீச்சர் குவரிகளை (
@supports) பயன்படுத்துங்கள். - முற்போக்கான மேம்பாடு: அனைத்து உலாவிகளிலும் வேலை செய்யும் ஒரு அடிப்படை, செயல்பாட்டு வடிவமைப்புடன் தொடங்கி, பின்னர்
:has()-ஐ ஆதரிக்கும் உலாவிகளுக்கு படிப்படியாக வடிவமைப்பை மேம்படுத்துங்கள்.
ஒரு ஃபீச்சர் குவரியைப் பயன்படுத்துவதற்கான ஒரு எடுத்துக்காட்டு இங்கே:
.parent {
/* அனைத்து உலாவிகளுக்கும் அடிப்படை ஸ்டைலிங் */
border: 1px solid black;
}
@supports selector(:has(img)) {
.parent:has(img) {
/* :has() ஐ ஆதரிக்கும் உலாவிகளுக்கு மேம்படுத்தப்பட்ட ஸ்டைலிங் */
border: 3px solid blue;
}
}
இந்தக் குறியீடு அனைத்து உலாவிகளிலும் .parent உறுப்புக்கு ஒரு கருப்பு பார்டரைப் பயன்படுத்தும். :has()-ஐ ஆதரிக்கும் உலாவிகளில், .parent உறுப்பு ஒரு படத்தைக் கொண்டிருந்தால், அது ஒரு நீல பார்டரைப் பயன்படுத்தும்.
செயல்திறன் கருத்தில் கொள்ள வேண்டியவை
:has() குறிப்பிடத்தக்க நன்மைகளை வழங்கினாலும், செயல்திறனில் அதன் சாத்தியமான தாக்கத்தைக் கருத்தில் கொள்வது அவசியம், குறிப்பாக விரிவாக அல்லது சிக்கலான செலக்டர்களுடன் பயன்படுத்தும்போது. உலாவிகள் பக்கத்தில் உள்ள ஒவ்வொரு உறுப்புக்கும் செலக்டரை மதிப்பீடு செய்ய வேண்டும், இது கணக்கீட்டு ரீதியாக விலை உயர்ந்ததாக மாறும்.
:has()-இன் செயல்திறனை மேம்படுத்துவதற்கான சில குறிப்புகள் இங்கே:
- செலக்டர்களை எளிமையாக வைத்திருங்கள்:
:has()pseudo-class-க்குள் மிகவும் சிக்கலான செலக்டர்களைப் பயன்படுத்துவதைத் தவிர்க்கவும். - வரம்பை மட்டுப்படுத்துங்கள்: உலகளாவிய ரீதியில் இல்லாமல், குறிப்பிட்ட உறுப்புகள் அல்லது கண்டெய்னர்களுக்கு
:has()-ஐப் பயன்படுத்துங்கள். - செயல்திறனைச் சோதிக்கவும்: உங்கள் CSS விதிகளின் செயல்திறனைக் கண்காணிக்கவும், சாத்தியமான இடையூறுகளைக் கண்டறியவும் உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.
தவிர்க்க வேண்டிய பொதுவான தவறுகள்
:has() செலக்டருடன் வேலை செய்யும்போது, எதிர்பாராத முடிவுகளுக்கு வழிவகுக்கும் தவறுகளைச் செய்வது எளிது. தவிர்க்க வேண்டிய சில பொதுவான ஆபத்துகள் இங்கே:
- ஸ்பெசிஃபிசிட்டி சிக்கல்கள்: உங்கள்
:has()விதிகள் மற்ற CSS விதிகளை மீறுவதற்குப் போதுமான ஸ்பெசிஃபிசிட்டியைக் கொண்டிருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். எப்போதும் போலவே அதே ஸ்பெசிஃபிசிட்டி சரிசெய்தல் படிகளைப் பயன்படுத்தவும். - தவறான நெஸ்டிங்:
:has()செலக்டர் சரியான பெற்றோர் உறுப்பைக் குறிவைப்பதை உறுதிசெய்ய உங்கள் உறுப்புகளின் நெஸ்டிங்கை இருமுறை சரிபார்க்கவும். - மிகவும் சிக்கலான செலக்டர்கள்:
:has()pseudo-class-க்குள் மிகவும் சிக்கலான செலக்டர்களைப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் இது செயல்திறனைப் பாதிக்கும். - உடனடி குழந்தைகளை யூகித்தல்:
:has()உடனடி குழந்தைகளை மட்டுமல்ல, *எந்த* சந்ததியினரையும் சரிபார்க்கிறது என்பதை நினைவில் கொள்ளுங்கள். உடனடி குழந்தைகளை மட்டும் குறிவைக்க வேண்டுமென்றால், நேரடிக் குழந்தை காம்பினேட்டரை (>) பயன்படுத்தவும் (உதாரணமாக,div:has(> img)).
:has() பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்
:has() செலக்டரின் நன்மைகளை அதிகரிக்கவும், சாத்தியமான சிக்கல்களைத் தவிர்க்கவும், இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:
- அதை புத்திசாலித்தனமாகப் பயன்படுத்துங்கள்: மற்ற CSS நுட்பங்கள் அல்லது ஜாவாஸ்கிரிப்ட் தீர்வுகளை விட தெளிவான நன்மையை வழங்கும் போது மட்டுமே
:has()-ஐப் பயன்படுத்தவும். - அதை எளிமையாக வைத்திருங்கள்: சிக்கலான, சுருண்ட செலக்டர்களை விட எளிய, படிக்கக்கூடிய செலக்டர்களுக்கு முன்னுரிமை கொடுங்கள்.
- முழுமையாகச் சோதிக்கவும்: உங்கள் CSS விதிகள் எதிர்பார்த்தபடி செயல்படுகின்றன என்பதை உறுதிப்படுத்த வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்கவும்.
- உங்கள் குறியீட்டை ஆவணப்படுத்துங்கள்: உங்கள்
:has()விதிகளின் நோக்கம் மற்றும் செயல்பாட்டை விளக்க உங்கள் CSS குறியீட்டில் கருத்துகளைச் சேர்க்கவும். - அணுகல்தன்மையை கருத்தில் கொள்ளுங்கள்: உங்கள்
:has()பயன்பாடு அணுகல்தன்மையை எதிர்மறையாகப் பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். உதாரணமாக, முக்கியமான தகவல்களைத் தெரிவிக்க:has()மூலம் தூண்டப்படும் ஸ்டைலிங் மாற்றங்களை மட்டும் நம்ப வேண்டாம்; ஊனமுற்ற பயனர்களுக்காக ARIA பண்புக்கூறுகள் அல்லது மாற்று வழிமுறைகளைப் பயன்படுத்தவும்.
நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்
பொதுவான வடிவமைப்பு சவால்களைத் தீர்க்க :has() செலக்டரை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நிஜ உலக எடுத்துக்காட்டுகளை ஆராய்வோம்.
எடுத்துக்காட்டு 8: ரெஸ்பான்சிவ் நேவிகேஷன் மெனுக்களை உருவாக்குதல்
குறிப்பிட்ட மெனு ஐட்டங்கள் இருப்பதன் அடிப்படையில் வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு ரெஸ்பான்சிவ் நேவிகேஷன் மெனுக்களை உருவாக்க :has()-ஐப் பயன்படுத்தலாம்.
பயனர் உள்நுழைந்துள்ளாரா இல்லையா என்பதைப் பொறுத்து வேறுபட்ட நேவிகேஷன் மெனுவைக் காட்ட விரும்பும் ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். அவர்கள் உள்நுழைந்திருந்தால், நீங்கள் சுயவிவரம் மற்றும் வெளியேறும் செயல்களைக் காட்டலாம், இல்லையென்றால் உள்நுழைவு/பதிவு ஆகியவற்றைக் காட்டலாம்.
nav:has(.user-profile) {
/* உள்நுழைந்த பயனர்களுக்கான ஸ்டைல்கள் */
}
nav:not(:has(.user-profile)) {
/* வெளியேறிய பயனர்களுக்கான ஸ்டைல்கள் */
}
எடுத்துக்காட்டு 9: கார்டு காம்போனென்ட்களை ஸ்டைல் செய்தல்
:has() செலக்டரைப் பயன்படுத்தி கார்டு காம்போனென்ட்களை அவற்றின் உள்ளடக்கத்தின் அடிப்படையில் ஸ்டைல் செய்யலாம். உதாரணமாக, ஒரு கார்டில் ஒரு படம் இருந்தால் மட்டுமே அதற்கு ஒரு நிழலைச் சேர்க்கலாம்.
.card:has(img) {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
எடுத்துக்காட்டு 10: டைனமிக் தீம்களை செயல்படுத்துதல்
பயனர் விருப்பத்தேர்வுகள் அல்லது கணினி அமைப்புகளின் அடிப்படையில் டைனமிக் தீம்களை செயல்படுத்த :has()-ஐப் பயன்படுத்தலாம். உதாரணமாக, பயனர் டார்க் மோடை இயக்கியுள்ளாரா என்பதைப் பொறுத்து பக்கத்தின் பின்னணி நிறத்தை மாற்றலாம்.
body:has(.dark-mode) {
background-color: #333;
color: #fff;
}
இந்த எடுத்துக்காட்டுகள் :has() செலக்டரின் பன்முகத்தன்மையையும், பரந்த அளவிலான வடிவமைப்பு சவால்களைத் தீர்க்கும் அதன் திறனையும் விளக்குகின்றன.
CSS-ன் எதிர்காலம்: அடுத்து என்ன?
:has() செலக்டரின் அறிமுகம் CSS-ன் பரிணாம வளர்ச்சியில் ஒரு குறிப்பிடத்தக்க படியாகும். இது டெவலப்பர்களுக்கு ஜாவாஸ்கிரிப்டை குறைவாகச் சார்ந்து, மேலும் டைனமிக், ரெஸ்பான்சிவ் மற்றும் பராமரிக்கக்கூடிய ஸ்டைல்ஷீட்களை உருவாக்க அதிகாரம் அளிக்கிறது. :has()-க்கான உலாவி ஆதரவு தொடர்ந்து வளர்ந்து வருவதால், இந்த சக்திவாய்ந்த செலக்டரின் இன்னும் புதுமையான மற்றும் ஆக்கப்பூர்வமான பயன்பாடுகளை நாம் எதிர்பார்க்கலாம்.
முன்னோக்கிப் பார்க்கும்போது, CSS பணிக்குழு CSS-இன் திறன்களை மேலும் விரிவுபடுத்தும் பிற அற்புதமான அம்சங்கள் மற்றும் மேம்பாடுகளை ஆராய்ந்து வருகிறது. இவற்றில் அடங்குவன:
- கண்டெய்னர் குவரிகள்: வியூபோர்ட்டை விட, காம்போனென்ட்கள் தங்கள் கண்டெய்னரின் அளவிற்கு ஏற்ப தங்கள் ஸ்டைலிங்கை மாற்றியமைக்க அனுமதித்தல்.
- கேஸ்கேட் லேயர்கள்: CSS விதிகளின் கேஸ்கேட் மற்றும் ஸ்பெசிஃபிசிட்டி மீது அதிக கட்டுப்பாட்டை வழங்குதல்.
- மேலும் மேம்பட்ட செலக்டர்கள்: உறுப்புகளை அவற்றின் பண்புக்கூறுகள், உள்ளடக்கம் மற்றும் ஆவண மரத்தில் உள்ள நிலையின் அடிப்படையில் குறிவைக்கக்கூடிய புதிய செலக்டர்களை அறிமுகப்படுத்துதல்.
சமீபத்திய CSS மேம்பாடுகளுடன் புதுப்பித்த நிலையில் இருப்பதன் மூலமும், :has() போன்ற புதிய அம்சங்களைத் தழுவுவதன் மூலமும், டெவலப்பர்கள் CSS-இன் முழு திறனையும் வெளிக்கொணரலாம் மற்றும் உண்மையிலேயே விதிவிலக்கான வலை அனுபவங்களை உருவாக்கலாம்.
முடிவுரை
:has() செலக்டர் CSS டூல்பாக்ஸில் ஒரு சக்திவாய்ந்த கூடுதலாகும், இது பெற்றோர் தேர்வை செயல்படுத்துகிறது மற்றும் டைனமிக் மற்றும் ரெஸ்பான்சிவ் ஸ்டைலிங்கிற்கான புதிய சாத்தியங்களைத் திறக்கிறது. உலாவி இணக்கத்தன்மை மற்றும் செயல்திறன் தாக்கங்களைக் கருத்தில் கொள்வது முக்கியம் என்றாலும், சுத்தமான, பராமரிக்கக்கூடிய மற்றும் செயல்திறன் மிக்க CSS குறியீட்டிற்கு :has()-ஐப் பயன்படுத்துவதன் நன்மைகள் மறுக்க முடியாதவை. இந்த கேம்-சேஞ்சிங் செலக்டரைத் தழுவி, உங்கள் CSS ஸ்டைலிங்கை இன்றே புரட்சிகரமாக்குங்கள்!
அணுகல்தன்மையைக் கருத்தில் கொள்ளவும், பழைய உலாவிகளுக்கு ஃபால்பேக் வழிமுறைகளை வழங்கவும் நினைவில் கொள்ளுங்கள். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், நீங்கள் :has() செலக்டரின் முழு திறனையும் பயன்படுத்தலாம் மற்றும் உலகெங்கிலும் உள்ள பயனர்களுக்கு உண்மையிலேயே விதிவிலக்கான வலை அனுபவங்களை உருவாக்கலாம்.