CSS @when விதியில் தேர்ச்சி: டைனமிக் வலை வடிவமைப்புக்கான நிபந்தனைக்குட்பட்ட ஸ்டைல் பயன்பாடு

CSS @when விதி, CSS நிபந்தனை விதிகள் தொகுதி நிலை 5 விவரக்குறிப்பின் ஒரு பகுதியாகும், இது சில நிபந்தனைகளின் அடிப்படையில் நிபந்தனையுடன் ஸ்டைல்களைப் பயன்படுத்த ஒரு சக்திவாய்ந்த வழியை வழங்குகிறது. இது பாரம்பரிய மீடியா வினவல்களுக்கு அப்பாற்பட்டது, கண்டெய்னர் அளவுகள், தனிப்பயன் பண்புகள் மற்றும் கூறுகளின் நிலையின் அடிப்படையில் ஸ்டைலிங்கில் மேலும் நுணுக்கமான கட்டுப்பாட்டை அனுமதிக்கிறது. இது உங்கள் வலை வடிவமைப்புகளின் ரெஸ்பான்சிவ்னஸ் மற்றும் தகவமைப்பை கணிசமாக மேம்படுத்தும், இது வெவ்வேறு சாதனங்கள் மற்றும் சூழல்களில் சிறந்த பயனர் அனுபவத்திற்கு வழிவகுக்கும்.

@when விதியின் அடிப்படைகளைப் புரிந்துகொள்ளுதல்

அதன் மையத்தில், @when விதி ஒரு குறிப்பிட்ட நிபந்தனை பூர்த்தி செய்யப்படும்போது மட்டுமே ஒரு CSS ஸ்டைல்களின் தொகுதியைச் செயல்படுத்தும் ஒரு பொறிமுறையை வழங்குகிறது. இது நிரலாக்க மொழிகளில் உள்ள if கூற்றுகளைப் போன்றது. அதன் தொடரியலை விரிவாகப் பார்ப்போம்:

@when condition {
  /* நிபந்தனை உண்மையாக இருக்கும்போது பயன்படுத்த வேண்டிய CSS விதிகள் */
}

condition பல்வேறு காரணிகளை அடிப்படையாகக் கொண்டிருக்கலாம், அவற்றுள்:

• கண்டெய்னர் வினவல்கள் (Container Queries): வியூபோர்ட்டை விட, கூறுகள் அவற்றின் கண்டெய்னர் உறுப்பின் அளவை அடிப்படையாகக் கொண்டு ஸ்டைல் செய்தல்.
• தனிப்பயன் நிலைகள் (Custom States): பயனர் தொடர்புகள் அல்லது பயன்பாட்டு நிலைகளுக்கு எதிர்வினையாற்றுதல்.
• CSS மாறிகள் (CSS Variables): CSS தனிப்பயன் பண்புகளின் மதிப்பின் அடிப்படையில் ஸ்டைல்களைப் பயன்படுத்துதல்.
• வரம்பு வினவல்கள் (Range Queries): ஒரு மதிப்பு ஒரு குறிப்பிட்ட வரம்பிற்குள் உள்ளதா எனச் சரிபார்த்தல்.

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

@when உடன் கண்டெய்னர் வினவல்கள்

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

அடிப்படை கண்டெய்னர் வினவல் எடுத்துக்காட்டு

முதலில், நீங்கள் ஒரு கண்டெய்னரை அறிவிக்க வேண்டும். இதை container-type பண்பைப் பயன்படுத்தி செய்யலாம்:

.container {
  container-type: inline-size;
}

inline-size கண்டெய்னரை அதன் இன்லைன் அளவின் அடிப்படையில் வினவ அனுமதிக்கிறது (கிடைமட்ட எழுத்து முறைகளில் அகலம், செங்குத்து எழுத்து முறைகளில் உயரம்). நீங்கள் இரு பரிமாணங்களையும் வினவ size ஐப் பயன்படுத்தலாம், அல்லது வினவல் கண்டெய்னரை உருவாக்காமல் இருக்க normal ஐப் பயன்படுத்தலாம்.

இப்போது, கண்டெய்னரின் அளவின் அடிப்படையில் ஸ்டைல்களைப் பயன்படுத்த நீங்கள் @container ஐ (பெரும்பாலும் @when உடன் இணைந்து பயன்படுத்தப்படுகிறது) பயன்படுத்தலாம்:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

இந்த எடுத்துக்காட்டில், .card-இன் தளவமைப்பு கண்டெய்னரின் அகலத்தைப் பொறுத்து மாறுகிறது. கண்டெய்னர் குறைந்தது 300px அகலமாக இருக்கும்போது, கார்டு படத்தையும் உரையையும் அருகருகே காட்டுகிறது. அது குறுகலாக இருக்கும்போது, அவை செங்குத்தாக அடுக்கப்படுகின்றன.

இதே முடிவை அடைய @when ஐ எப்படிப் பயன்படுத்தலாம் என்பது இங்கே கொடுக்கப்பட்டுள்ளது, இது உலாவி ஆதரவு மற்றும் குறியீட்டு விருப்பத்தைப் பொறுத்து @container உடன் இணைக்கப்படலாம் (ஏனெனில் @when கண்டெய்னர் அளவைத் தாண்டி சில சூழ்நிலைகளில் அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

இந்த வழக்கில், `card-container` என்பது `@container` உடன் ஒதுக்கப்பட்ட ஒரு கண்டெய்னர் பெயர், மற்றும் `@when`-இல் உள்ள `container(card-container)` குறிப்பிட்ட கண்டெய்னர் சூழல் செயலில் உள்ளதா என்பதை சரிபார்க்கிறது. குறிப்பு: `container()` செயல்பாடு மற்றும் அதன் துல்லியமான தொடரியலுக்கான ஆதரவு உலாவிகள் மற்றும் பதிப்புகளில் மாறுபடலாம். செயல்படுத்துவதற்கு முன் உலாவி இணக்கத்தன்மை அட்டவணைகளைப் பார்க்கவும்.

நடைமுறை சர்வதேச எடுத்துக்காட்டுகள்

• மின்வணிக தயாரிப்பு பட்டியல்கள்: வகைப்பக்க கட்டத்தில் கிடைக்கும் இடத்தின் அடிப்படையில் தயாரிப்பு பட்டியல்களை வித்தியாசமாகக் காட்டுங்கள். ஒரு சிறிய கண்டெய்னர் தயாரிப்பு படம் மற்றும் விலையை மட்டுமே காட்டலாம், அதே சமயம் ஒரு பெரிய கண்டெய்னர் ஒரு சுருக்கமான விளக்கம் மற்றும் மதிப்பீட்டை உள்ளடக்கியிருக்கலாம். இது வெவ்வேறு பிராந்தியங்களில் மாறுபடும் இணைய வேகம் மற்றும் சாதன வகைகளில் பயனுள்ளதாக இருக்கும், இது வளர்ந்து வரும் நாடுகளில் உயர்நிலை டெஸ்க்டாப்கள் மற்றும் குறைந்த அலைவரிசை மொபைல் இணைப்புகள் இரண்டிலும் உகந்த அனுபவங்களை அனுமதிக்கிறது.
• செய்தி கட்டுரை சுருக்கங்கள்: ஒரு செய்தி வலைத்தளத்தின் முகப்புப்பக்கத்தில் காட்டப்படும் கட்டுரைச் சுருக்கங்களின் நீளத்தை கண்டெய்னரின் அகலத்தின் அடிப்படையில் சரிசெய்யவும். ஒரு குறுகிய சைட் பாரில், ஒரு தலைப்பு மற்றும் சில வார்த்தைகளை மட்டுமே காட்டுங்கள்; முக்கிய உள்ளடக்கப் பகுதியில், மேலும் விரிவான சுருக்கத்தை வழங்கவும். மொழி வேறுபாடுகளைக் கவனியுங்கள், சில மொழிகள் (எ.கா., ஜெர்மன்) நீளமான சொற்களையும் சொற்றொடர்களையும் கொண்டிருக்க முனைகின்றன, இது சுருக்கங்களுக்குத் தேவைப்படும் இடத்தை பாதிக்கிறது.
• டாஷ்போர்டு விட்ஜெட்டுகள்: டாஷ்போர்டு விட்ஜெட்டுகளின் தளவமைப்பை அவற்றின் கண்டெய்னர் அளவிற்கு ஏற்ப மாற்றவும். ஒரு சிறிய விட்ஜெட் ஒரு எளிய விளக்கப்படத்தைக் காட்டலாம், அதே சமயம் ஒரு பெரிய விட்ஜெட் விரிவான புள்ளிவிவரங்கள் மற்றும் கட்டுப்பாடுகளை உள்ளடக்கியிருக்கலாம். குறிப்பிட்ட பயனரின் சாதனம் மற்றும் திரை அளவிற்கு டாஷ்போர்டு அனுபவத்தைத் தனிப்பயனாக்குங்கள், தரவுக் காட்சிப்படுத்தலுக்கான கலாச்சார விருப்பங்களைக் கருத்தில் கொள்ளுங்கள். எடுத்துக்காட்டாக, சில கலாச்சாரங்கள் பை சார்ட்களை விட பார் சார்ட்களை விரும்பலாம்.

தனிப்பயன் நிலைகளுடன் @when ஐப் பயன்படுத்துதல்

தனிப்பயன் நிலைகள் கூறுகளுக்கு உங்கள் சொந்த நிலைகளை வரையறுக்கவும் அந்த நிலைகளின் அடிப்படையில் ஸ்டைல் மாற்றங்களைத் தூண்டவும் உங்களை அனுமதிக்கின்றன. :hover மற்றும் :active போன்ற பாரம்பரிய CSS போலி-வகுப்புகள் போதுமானதாக இல்லாத சிக்கலான வலைப் பயன்பாடுகளில் இது குறிப்பாக பயனுள்ளதாக இருக்கும். தனிப்பயன் நிலைகள் உலாவி செயலாக்கங்களில் இன்னும் உருவாகி வரும் நிலையில், @when விதி ஆதரவு முதிர்ச்சியடையும் போது இந்த நிலைகளின் அடிப்படையில் ஸ்டைல்களைக் கட்டுப்படுத்த ஒரு நம்பிக்கைக்குரிய வழியை வழங்குகிறது.

கருத்தியல் எடுத்துக்காட்டு (நிலைகளைப் பிரதிபலிக்க CSS மாறிகளைப் பயன்படுத்துதல்)

சொந்த தனிப்பயன் நிலை ஆதரவு இன்னும் உலகளவில் கிடைக்காததால், CSS மாறிகள் மற்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அதை நாம் உருவகப்படுத்தலாம்.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

இந்த எடுத்துக்காட்டில், உறுப்பின் நிலையைக் கண்காணிக்க --is-active என்ற CSS மாறியைப் பயன்படுத்துகிறோம். உறுப்பைக் கிளிக் செய்யும் போது ஜாவாஸ்கிரிப்ட் குறியீடு இந்த மாறியின் மதிப்பை மாற்றுகிறது. பின்னர், @when விதி --is-active 1-க்கு சமமாக இருக்கும்போது வேறு பின்னணி நிறத்தைப் பயன்படுத்துகிறது. இது ஒரு தற்காலிக தீர்வு என்றாலும், நிலையின் அடிப்படையில் நிபந்தனைக்குட்பட்ட ஸ்டைலிங் என்ற கருத்தை இது நிரூபிக்கிறது.

உண்மையான தனிப்பயன் நிலைகளுடன் சாத்தியமான எதிர்கால பயன்பாட்டு வழக்குகள்

உண்மையான தனிப்பயன் நிலைகள் செயல்படுத்தப்படும்போது, தொடரியல் இதுபோன்று இருக்கலாம் (குறிப்பு: இது ஊகமானது மற்றும் முன்மொழிவுகளை அடிப்படையாகக் கொண்டது):

.my-element {
  /* ஆரம்ப ஸ்டைல்கள் */
}

@when :state(my-custom-state) {
  .my-element {
    /* தனிப்பயன் நிலை செயலில் இருக்கும்போது ஸ்டைல்கள் */
  }
}

நீங்கள் தனிப்பயன் நிலையை அமைக்கவும் நீக்கவும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம்:

element.states.add('my-custom-state'); // நிலையைச் செயல்படுத்து
element.states.remove('my-custom-state'); // நிலையை செயலிழக்கச் செய்

இது பயன்பாட்டு தர்க்கத்தின் அடிப்படையில் ஸ்டைலிங்கில் நம்பமுடியாத அளவிற்கு நுணுக்கமான கட்டுப்பாட்டை அனுமதிக்கும்.

சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல் பரிசீலனைகள்

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

CSS மாறிகள் மற்றும் வரம்பு வினவல்களுடன் வேலை செய்தல்

@when விதியை CSS மாறிகளுடன் பயன்படுத்தி டைனமிக் மற்றும் தனிப்பயனாக்கக்கூடிய ஸ்டைல்களை உருவாக்கலாம். நீங்கள் ஒரு CSS மாறியின் மதிப்பின் அடிப்படையில் ஸ்டைல்களைப் பயன்படுத்தலாம், இது பயனர்கள் எந்த குறியீடும் எழுதாமல் உங்கள் வலைத்தளத்தின் தோற்றத்தைத் தனிப்பயனாக்க அனுமதிக்கிறது.

எடுத்துக்காட்டு: தீம் மாறுதல்

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

இந்த எடுத்துக்காட்டில், --theme-color மாறி body-யின் பின்னணி நிறத்தைக் கட்டுப்படுத்துகிறது. அது #000 ஆக அமைக்கப்படும்போது, @when விதி --text-color ஐ #fff ஆக மாற்றுகிறது, இது ஒரு டார்க் தீமை உருவாக்குகிறது. பயனர்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி --theme-color-இன் மதிப்பை மாற்றலாம் அல்லது பயனர் ஸ்டைல்ஷீட்டில் வேறு CSS மாறியை அமைக்கலாம்.

வரம்பு வினவல்கள்

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

@when (400px <= width <= 800px) {
  .element {
    /* அகலம் 400px மற்றும் 800px-க்கு இடையில் இருக்கும்போது பயன்படுத்தப்படும் ஸ்டைல்கள் */
  }
}

இருப்பினும், @when-இல் வரம்பு வினவல்களுக்கான சரியான தொடரியல் மற்றும் ஆதரவு மாறுபடலாம். சமீபத்திய விவரக்குறிப்புகள் மற்றும் உலாவி இணக்கத்தன்மை அட்டவணைகளைப் பார்ப்பது அறிவுறுத்தப்படுகிறது. கண்டெய்னர் வினவல்கள் பெரும்பாலும் அளவு அடிப்படையிலான நிபந்தனைகளுக்கு மிகவும் வலுவான மற்றும் நன்கு ஆதரிக்கப்படும் மாற்றீட்டை வழங்குகின்றன.

உலகளாவிய அணுகல்தன்மை மற்றும் பயனர் விருப்பத்தேர்வுகள்

• உயர் கான்ட்ராஸ்ட் தீம்கள்: பார்வை குறைபாடுகள் உள்ள பயனர்களுக்கு ஏற்ற உயர் கான்ட்ராஸ்ட் தீம்களை செயல்படுத்த CSS மாறிகள் மற்றும் @when விதியைப் பயன்படுத்தவும். பயனர்கள் தங்கள் குறிப்பிட்ட தேவைகளைப் பூர்த்தி செய்ய வண்ணத் தட்டு மற்றும் எழுத்துரு அளவுகளைத் தனிப்பயனாக்க அனுமதிக்கவும்.
• குறைக்கப்பட்ட இயக்கம்: பயனர் தங்கள் இயக்க முறைமையில் "குறைக்கப்பட்ட இயக்கம்" அமைப்பை இயக்கியிருக்கும் போது அனிமேஷன்கள் மற்றும் மாற்றங்களை முடக்க CSS மாறிகளைப் பயன்படுத்தி பயனரின் விருப்பத்தை மதிக்கவும். மேலும் துல்லியமான கட்டுப்பாட்டிற்கு prefers-reduced-motion மீடியா வினவலை @when உடன் இணைக்கலாம்.
• எழுத்துரு அளவு சரிசெய்தல்: CSS மாறிகளைப் பயன்படுத்தி வலைத்தளத்தின் எழுத்துரு அளவை சரிசெய்ய பயனர்களை அனுமதிக்கவும். வெவ்வேறு எழுத்துரு அளவுகளுக்கு ஏற்ப கூறுகளின் தளவமைப்பு மற்றும் இடைவெளியை மாற்றியமைக்க @when விதியைப் பயன்படுத்தவும், இது அனைத்து பயனர்களுக்கும் வாசிப்புத்திறன் மற்றும் பயன்பாட்டினை உறுதி செய்கிறது.

சிறந்த நடைமுறைகள் மற்றும் பரிசீலனைகள்

• உலாவி இணக்கத்தன்மை: @when விதி இன்னும் ஒப்பீட்டளவில் புதியது, மற்றும் உலாவி ஆதரவு இன்னும் உலகளாவியதாக இல்லை. தயாரிப்பில் பயன்படுத்துவதற்கு முன்பு எப்போதும் உலாவி இணக்கத்தன்மை அட்டவணைகளைச் சரிபார்க்கவும். பழைய உலாவிகளுக்கு பாலிஃபில்கள் அல்லது பின்னடைவு தீர்வுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். 2024-இன் பிற்பகுதியில், உலாவி ஆதரவு குறைவாகவே உள்ளது, மேலும் @container மற்றும் ஜாவாஸ்கிரிப்ட் பின்னடைவுகளுடன் CSS மாறிகளைப் பயன்படுத்துவது பெரும்பாலும் ஒரு நடைமுறை அணுகுமுறையாகும்.
• குறிப்பிட்ட தன்மை (Specificity): @when விதியைப் பயன்படுத்தும்போது CSS குறிப்பிட்ட தன்மையைக் கவனத்தில் கொள்ளுங்கள். உங்கள் நிபந்தனை ஸ்டைல்கள் முரண்பாடான ஸ்டைல்களை மீறுவதற்கு போதுமான அளவு குறிப்பிட்டதாக இருப்பதை உறுதி செய்யவும்.
• பராமரிப்புத்திறன் (Maintainability): உங்கள் குறியீட்டை மேலும் படிக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் மாற்ற CSS மாறிகள் மற்றும் கருத்துகளைப் பயன்படுத்தவும். புரிந்துகொள்வதற்கும் பிழைதிருத்துவதற்கும் கடினமான மிகவும் சிக்கலான நிபந்தனை விதிகளை உருவாக்குவதைத் தவிர்க்கவும்.
• செயல்திறன் (Performance): @when விதி பகுப்பாய்வு செய்யப்பட வேண்டிய CSS அளவைக் குறைப்பதன் மூலம் செயல்திறனை மேம்படுத்த முடியும் என்றாலும், அதை விவேகத்துடன் பயன்படுத்துவது முக்கியம். நிபந்தனை விதிகளின் அதிகப்படியான பயன்பாடு செயல்திறனை எதிர்மறையாக பாதிக்கலாம், குறிப்பாக பழைய சாதனங்களில்.
• முற்போக்கான மேம்பாடு (Progressive Enhancement): உலாவி @when விதியை ஆதரிக்காவிட்டாலும் உங்கள் வலைத்தளம் நன்றாக வேலை செய்வதை உறுதிசெய்ய முற்போக்கான மேம்பாட்டைப் பயன்படுத்தவும். அனைத்து பயனர்களுக்கும் ஒரு அடிப்படை, செயல்பாட்டு அனுபவத்தை வழங்கவும், பின்னர் அம்சத்தை ஆதரிக்கும் உலாவிகளுக்கு அதை படிப்படியாக மேம்படுத்தவும்.

நிபந்தனை ஸ்டைலிங்கின் எதிர்காலம்

@when விதி CSS-இல் ஒரு குறிப்பிடத்தக்க முன்னேற்றத்தைக் குறிக்கிறது. இது மேலும் வெளிப்பாடான மற்றும் டைனமிக் ஸ்டைலிங்கை அனுமதிக்கிறது, இது மிகவும் சிக்கலான மற்றும் ரெஸ்பான்சிவ் வலைப் பயன்பாடுகளுக்கு வழி வகுக்கிறது. உலாவி ஆதரவு மேம்பட்டு, விவரக்குறிப்பு உருவாகும்போது, @when விதி வலை உருவாக்குநர்களுக்கு ஒரு இன்றியமையாத கருவியாக மாறும்.

CSS ஹூடினியில் மேலும் முன்னேற்றங்கள் மற்றும் தனிப்பயன் நிலைகளின் தரப்படுத்தல் @when-இன் திறன்களை மேலும் மேம்படுத்தும், இது ஸ்டைலிங்கில் இன்னும் நுணுக்கமான கட்டுப்பாட்டையும் ஜாவாஸ்கிரிப்டுடன் மேலும் தடையற்ற ஒருங்கிணைப்பையும் அனுமதிக்கும்.

முடிவுரை

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

வலை தொடர்ந்து உருவாகி வருவதால், @when போன்ற புதிய CSS அம்சங்களைத் தழுவுவது, வளைவில் முன்னணியில் இருப்பதற்கும், உலகளாவிய பார்வையாளர்களுக்கு அதிநவீன வலை அனுபவங்களை வழங்குவதற்கும் முக்கியமானது.