M

MLOG

தமிழ்

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

CSS @when விதி: நிபந்தனை பாணி பயன்பாட்டில் தேர்ச்சி பெறுதல்

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

CSS @when விதி என்றால் என்ன?

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

@when பயன்படுத்துவதன் முக்கிய நன்மைகள்

@when விதியின் தொடரியல்

@when விதியின் அடிப்படை தொடரியல் பின்வருமாறு:

@when <condition> {
  /* CSS rules to apply when the condition is true */
}

<condition> என்பது உண்மை அல்லது தவறு என மதிப்பிடப்படும் எந்தவொரு செல்லுபடியாகும் பூலியன் வெளிப்பாடாகவும் இருக்கலாம். இந்த வெளிப்பாடு பெரும்பாலும் பின்வருவனவற்றை உள்ளடக்கியது:

@when செயல்பாட்டில் உள்ள நடைமுறை எடுத்துக்காட்டுகள்

@when விதியின் சக்தி மற்றும் பல்துறைத்திறனை விளக்க சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

1. @when மற்றும் மீடியா வினவல்களுடன் ரெஸ்பான்சிவ் வடிவமைப்பு

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

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

இந்த எடுத்துக்காட்டில், @when பிளாக்கிற்குள் உள்ள ஸ்டைல்கள் திரை அகலம் 768px மற்றும் 1023px (வழக்கமான டேப்லெட் அளவு) க்கு இடையில் இருக்கும்போது மட்டுமே பயன்படுத்தப்படும். இது குறிப்பிட்ட வியூபோர்ட் வரம்புகளுக்கான ஸ்டைல்களை வரையறுக்க தெளிவான மற்றும் சுருக்கமான வழியை வழங்குகிறது.

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

2. @when மற்றும் @supports உடன் அம்சம் கண்டறிதல்

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

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback styles for browsers that don't support grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Adjust width for older browsers */
  }
}

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

உலகளாவிய அணுகல்தன்மை குறிப்பு: அணுகல்தன்மைக்கு அம்சம் கண்டறிதல் முக்கியமானது. பழைய பிரவுசர்களில் புதிய ARIA பண்புக்கூறுகள் அல்லது சொற்பொருள் HTML5 உறுப்புகளுக்கான ஆதரவு இல்லாமல் இருக்கலாம். உள்ளடக்கம் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்ய பொருத்தமான ஃபால்பேக்குகளை வழங்கவும்.

3. மீடியா வினவல்கள் மற்றும் அம்சம் வினவல்களை இணைத்தல்

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

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

இந்த எடுத்துக்காட்டில், .modal உறுப்பு திரை அகலம் குறைந்தது 768px ஆக இருக்கும்போது மற்றும் பிரவுசர் backdrop-filter பண்பை ஆதரிக்கும்போது மட்டுமே மங்கலான பின்னணியைக் கொண்டிருக்கும். இது நவீன பிரவுசர்களில் பார்வைக்கு ஈர்க்கக்கூடிய விளைவுகளை உருவாக்க உங்களை அனுமதிக்கிறது, அதே நேரத்தில் பழையவற்றில் சாத்தியமான செயல்திறன் சிக்கல்கள் அல்லது ரெண்டரிங் குறைபாடுகளைத் தவிர்க்கிறது.

4. தனிப்பயன் பண்புகளின் (CSS மாறிகள்) அடிப்படையில் ஸ்டைலிங்

@when-ஐ CSS தனிப்பயன் பண்புகளுடன் (CSS மாறிகள் என்றும் அழைக்கப்படுகிறது) இணைந்து டைனமிக் மற்றும் நிலை-இயக்கப்படும் ஸ்டைலிங்கை உருவாக்கவும் பயன்படுத்தலாம். ஒரு தனிப்பயன் பண்பின் மதிப்பை புதுப்பிக்க நீங்கள் ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தலாம், பின்னர் அந்த மதிப்பின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்த @when-ஐப் பயன்படுத்தலாம்.

முதலில், ஒரு தனிப்பயன் பண்பை வரையறுக்கவும்:

:root {
  --theme-color: #007bff; /* Default theme color */
  --is-dark-mode: false;
}

பின்னர், தனிப்பயன் பண்பின் மதிப்பின் அடிப்படையில் ஸ்டைல்களைப் பயன்படுத்த @when-ஐப் பயன்படுத்தவும்:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

இறுதியாக, --is-dark-mode தனிப்பயன் பண்பின் மதிப்பை மாற்ற ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தவும்:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

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

@when ( --is-dark-mode > 0 ) { ... }

இருப்பினும், இது சரியாக செயல்பட தனிப்பயன் பண்பு ஒரு எண் மதிப்பைக் கொண்டிருப்பதை உறுதிசெய்க.

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

5. தரவு பண்புக்கூறுகளின் அடிப்படையில் ஸ்டைலிங்

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

உதாரணமாக, உங்களிடம் பணிகளின் பட்டியல் உள்ளது, மேலும் ஒவ்வொரு பணிக்கும் அதன் நிலையைக் குறிக்கும் data-status பண்பு உள்ளது (எ.கா., "todo", "in-progress", "completed"). ஒவ்வொரு பணியையும் அதன் நிலையின் அடிப்படையில் வித்தியாசமாக ஸ்டைல் செய்ய நீங்கள் @when-ஐப் பயன்படுத்தலாம்.

[data-status="todo"] {
  /* Default styles for todo tasks */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

குறிப்பு: attribute() சோதனை நிபந்தனைக்கான ஆதரவு தற்போது அனைத்து பிரவுசர்களிலும் குறைவாக இருக்கலாம் அல்லது முழுமையாக செயல்படுத்தப்படாமல் இருக்கலாம். எப்போதும் முழுமையாக சோதிக்கவும்.

பிரவுசர் இணக்கத்தன்மை மற்றும் பாலிஃபில்கள்

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

@when மற்றும் தொடர்புடைய அம்சங்களின் தற்போதைய பிரவுசர் ஆதரவு நிலையைச் சரிபார்க்க Can I use... போன்ற ஆதாரங்களை எப்போதும் கலந்தாலோசிக்கவும்.

@when பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

முடிவுரை

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

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