CSS @when: நிபந்தனை பாணியின் எதிர்காலம்

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

CSS @when என்றால் என்ன?

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

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

            @when (condition) {
  /* Styles to apply when the condition is true */
}

            

              
                Copy
              
            
          

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

@when ஐ ஏன் பயன்படுத்த வேண்டும்? நன்மைகள் மற்றும் நன்மைகள்

நிபந்தனை பாணிக்கான இருக்கும் முறைகளை விட @when விதி பல முக்கிய நன்மைகளை வழங்குகிறது:

• அதிகரித்த நெகிழ்வுத்தன்மை: மீடியா வினவல்களைப் போலல்லாமல், முக்கியமாக வியூபோர்ட் அளவை அடிப்படையாகக் கொண்டது, @when தனிப்பயன் பண்புகள் (CSS மாறிகள்), உறுப்பு பண்புக்கூறுகள் மற்றும் குறிப்பிட்ட HTML உறுப்புகளின் இருப்பு அல்லது இல்லாமை உட்பட பல காரணிகளின் அடிப்படையில் பாணிகளை அடிப்படையாகக் கொள்ள உங்களை அனுமதிக்கிறது.
• மேம்படுத்தப்பட்ட வாசிப்புத்திறன் மற்றும் பராமரிப்பு: நிபந்தனை தர்க்கத்தை உங்கள் CSS க்குள் நேரடியாக உள்ளடக்குவதன் மூலம், @when உங்கள் குறியீட்டை அதிக சுய-ஆவணமாக்குகிறது மற்றும் புரிந்துகொள்ள எளிதாக்குகிறது. இது சிக்கலான JavaScript தீர்வுகளின் தேவையை குறைக்கிறது மற்றும் உங்கள் ஸ்டைல்ஷீட்களின் ஒட்டுமொத்த பராமரிப்பை மேம்படுத்துகிறது.
• மேம்படுத்தப்பட்ட மறுபயனாக்கம்: @when விதிகளில் சிக்கலான நிபந்தனை பாணிகளை நீங்கள் வரையறுக்கலாம் மற்றும் உங்கள் இணையதளம் அல்லது பயன்பாடு முழுவதும் அவற்றை மீண்டும் பயன்படுத்தலாம். இது குறியீடு மறுபயன்பாட்டை ஊக்குவிக்கிறது மற்றும் அதிகப்படியான தன்மையைக் குறைக்கிறது.
• சாத்தியமான சிறந்த செயல்திறன்: சில சந்தர்ப்பங்களில், JavaScript அடிப்படையிலான தீர்வுகளுடன் ஒப்பிடும்போது @when ஐப் பயன்படுத்துவது செயல்திறன் மேம்பாடுகளுக்கு வழிவகுக்கும், ஏனெனில் உலாவி நிபந்தனை தர்க்கத்தை சொந்தமாக கையாள முடியும்.
• உங்கள் குறியீட்டை எதிர்காலத்தில் நிரூபித்தல்: CSS தொடர்ந்து உருவாகும்போது, @when மேலும் மாறும் மற்றும் பதிலளிக்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு உறுதியான அடித்தளத்தை வழங்குகிறது.

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

@when இன் உண்மையான சக்தி அதன் பரவலான நிபந்தனைகளை கையாளும் திறனில் உள்ளது. சில எடுத்துக்காட்டுகள் இங்கே:

1. தனிப்பயன் பண்புகளைச் சரிபார்க்கிறது (CSS மாறிகள்)

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

            :root {
  --theme-color: #007bff; /* Default theme color */
  --font-size: 16px;
}

@when (--theme-color = #007bff) {
  body {
    background-color: #f0f8ff; /* Apply a light background when the theme color is blue */
  }
}

@when (--font-size > 18px) {
  p {
    line-height: 1.6;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், முதல் @when விதி --theme-color தனிப்பயன் பண்பு #007bff க்கு சமமாக உள்ளதா என சரிபார்க்கிறது. அது இருந்தால், அது body உறுப்புக்கு ஒரு ஒளி பின்னணி நிறத்தைப் பயன்படுத்துகிறது. இரண்டாவது @when விதி --font-size 18px ஐ விட அதிகமாக உள்ளதா என சரிபார்க்கிறது, அது இருந்தால், அது பத்தி உறுப்புகளின் வரி உயரத்தை சரிசெய்கிறது.

2. பூலியன் நிபந்தனைகளை மதிப்பிடுதல்

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

            :root {
  --dark-mode: false;
}

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

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், @when விதி --dark-mode தனிப்பயன் பண்பு true ஆக அமைக்கப்பட்டுள்ளதா என சரிபார்க்கிறது. அது இருந்தால், அது body உறுப்புக்கு ஒரு இருண்ட பின்னணி நிறத்தையும் ஒளி உரை நிறத்தையும் பயன்படுத்துகிறது, இது இருண்ட பயன்முறையை திறம்பட செயல்படுத்துகிறது.

3. தர்க்கரீதியான ஆபரேட்டர்களுடன் நிபந்தனைகளை இணைத்தல்

மேலும் சிக்கலான சூழ்நிலைகளுக்கு, and, or மற்றும் not போன்ற தர்க்கரீதியான ஆபரேட்டர்களைப் பயன்படுத்தி பல நிபந்தனைகளை இணைக்கலாம். அதிக குறிப்பிட்ட மற்றும் நுணுக்கமான நிபந்தனை பாணிகளை உருவாக்க இது உங்களை அனுமதிக்கிறது.

            :root {
  --is-mobile: false;
  --is-logged-in: true;
}

@when (--is-mobile = true and --is-logged-in = true) {
  /* Styles to apply only on mobile devices and when the user is logged in */
  .mobile-menu {
    display: block;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், @when விதி --is-mobile மற்றும் --is-logged-in இரண்டும் true ஆக அமைக்கப்பட்டுள்ளதா என சரிபார்க்கிறது. இரண்டு நிபந்தனைகளும் பூர்த்தி செய்யப்பட்டால், அது ஒரு மொபைல் மெனு உறுப்பைக் காட்டுகிறது.

4. உறுப்பு பண்புக்கூறுகளைச் சரிபார்க்கிறது

சரியான தொடரியல் உருவாகக்கூடும் என்றாலும், முன்மொழியப்பட்ட விவரக்குறிப்புகள் உறுப்பு பண்புக்கூறுகளை நிபந்தனையில் நேரடியாக சரிபார்க்க அனுமதிக்கின்றன. பல சந்தர்ப்பங்களில் JavaScript அடிப்படையிலான பண்புக்கூறு தேர்வாளர்களின் தேவையை மாற்றுவதற்கு இது நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும்.

            @when (element.hasAttribute('data-active')) {
  [data-active] {
    border: 2px solid blue;
  }
}

@when (element.getAttribute('data-theme') = 'dark') {
  body {
    background-color: black;
    color: white;
  }
}

            

              
                Copy
              
            
          

முதல் எடுத்துக்காட்டு ஒரு உறுப்பு `data-active` பண்புக்கூறை வைத்திருக்கிறதா என்று சரிபார்க்கிறது. இரண்டாவது எடுத்துக்காட்டு `data-theme` பண்புக்கூறு 'dark' க்கு சமமாக உள்ளதா என்று சரிபார்க்கிறது.

5. பாணி வினவல்கள் மற்றும் கொள்கலன் வினவல்கள் (சாத்தியமான ஒருங்கிணைப்பு)

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

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு நிகழ்வுகள்

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

1. மாறும் தீம் மாறுதல்

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

2. தழுவல் வழிசெலுத்தல் மெனுக்கள்

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

3. படிவ சரிபார்ப்பு

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

4. உள்ளடக்கத் தெரிவுநிலை

பல்வேறு நிபந்தனைகளின் அடிப்படையில் உள்ளடக்கத்தைக் காட்ட அல்லது மறைக்க @when ஐப் பயன்படுத்தலாம். ஒரு குறிப்பிட்ட விளம்பர பதாகையை குக்கீ மதிப்பு அல்லது பயனர் அமைப்பின் அடிப்படையில் ஏற்கனவே பார்க்காத பயனர்களுக்கு மட்டுமே காட்டலாம்.

5. சர்வதேசமயமாக்கல் (i18n)

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

உதாரணமாக, உங்களிடம் `--locale` என்ற தனிப்பயன் சொத்து இருந்தால், அது பயனரின் இடத்தை சேமிக்கிறது:

            :root {
  --locale: 'en-US'; /* Default locale */
}

@when (--locale = 'ar') { /* Arabic */
  body {
    direction: rtl; /* Right-to-left layout */
    font-family: 'Arial', sans-serif; /* Example font */
  }
}

@when (--locale = 'zh-CN') { /* Simplified Chinese */
  body {
    font-family: 'Microsoft YaHei', sans-serif; /* Example font */
    font-size: 14px; /* Adjust font size if needed */
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு உரை திசையையும் எழுத்துருவையும் அரபு (`ar`) அல்லது எளிமைப்படுத்தப்பட்ட சீன (`zh-CN`) உள்ளதா என்பதைப் பொறுத்து சரிசெய்கிறது. இது சரியான i18n நுட்பங்களுக்கு (வெவ்வேறு உள்ளடக்கத்தை வழங்குவது போன்றவை) நேரடி மாற்றீடு இல்லை என்றாலும், @when எவ்வாறு அதிக உள்ளூர்மயமாக்கப்பட்ட அனுபவத்திற்கு பங்களிக்கும் என்பதை இது நிரூபிக்கிறது.

தற்போதைய நிலை மற்றும் உலாவி ஆதரவு

2024 இன் பிற்பகுதியில், @when விதி இன்னும் ஒப்பீட்டளவில் ஒரு புதிய அம்சமாகும், மேலும் இது அனைத்து முக்கிய உலாவிகளாலும் முழுமையாக ஆதரிக்கப்படவில்லை. Chrome மற்றும் Edge போன்ற சில உலாவிகளில் இது தற்போது சோதனை கொடிகளுக்குப் பின்னால் உள்ளது.

நான் பயன்படுத்தலாமா மற்றும் அதிகாரப்பூர்வ CSS விவரக்குறிப்புகள் போன்ற வலைத்தளங்களில் @when மற்றும் அதன் உலாவி ஆதரவின் முன்னேற்றத்தை நீங்கள் கண்காணிக்கலாம்.

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

பாலிஃபில்ஸ் மற்றும் பணித்தீர்வு

முழு உலாவி ஆதரவுக்காகக் காத்திருக்கும்போது, @when விதியின் நடத்தையைப் பின்பற்ற பாலிஃபில்ஸ் அல்லது JavaScript அடிப்படையிலான பணித்தீர்வுகளைப் பயன்படுத்தலாம். இந்த தீர்வுகள் பொதுவாக நிபந்தனைகளை மதிப்பிடுவதற்கும் பொருத்தமான பாணிகளைப் பயன்படுத்துவதற்கும் JavaScript ஐப் பயன்படுத்துவதை உள்ளடக்கியது.

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

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

@when விதியைப் பயன்படுத்தும் போது மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

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

CSS நிபந்தனை பாணியின் எதிர்காலம்

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

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

மாற்றுகள் மற்றும் பரிசீலனைகள்

@when கட்டாய நன்மைகளை வழங்கும் அதே வேளையில், இருக்கும் மாற்றுகளைக் கருத்தில் கொள்வது முக்கியம், மேலும் அவை மிகவும் பொருத்தமான சூழ்நிலைகளில்:

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

உண்மையான எடுத்துக்காட்டு: @when உடன் கூறு அடிப்படையிலான பாணி

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

            /* Basic card styling */
.card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
}

/* Featured card styling */
@when (element.hasAttribute('data-featured')) {
  .card[data-featured] {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .card[data-featured] .card-title {
    font-weight: bold;
    color: #007bff;
  }
}

/* User-specific styling (requires JavaScript to set --logged-in) */
@when (--logged-in = true) {
  .card {
    /* Additional styling for logged-in users */
    background-color: #f9f9f9;
  }
}

/* Combining conditions */
@when (element.hasAttribute('data-featured') and --logged-in = true) {
  .card[data-featured] {
    /* Even more specific styling */
    background-color: #e9ecef;
    transform: translateY(-5px); /* Subtle lift effect */
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில்:

• முதல் @when தொகுதி அட்டையில் data-featured பண்புக்கூறு இருக்கும்போது வடிவமைக்கிறது.
• இரண்டாவது @when தொகுதி உள்நுழைந்த பயனர்களுக்கு பயனர் குறிப்பிட்ட பாணியை வழங்குகிறது (`--logged-in` தனிப்பயன் பண்பை அமைக்க உங்களிடம் JavaScript பொறிமுறையைக் கொண்டுள்ளது என்று கருதி).
• இறுதி @when தொகுதி இரண்டு நிபந்தனைகளையும் பூர்த்தி செய்யும்போது இன்னும் குறிப்பிட்ட பாணியைப் பயன்படுத்தி இரண்டு நிபந்தனைகளையும் ஒருங்கிணைக்கிறது.

கூறு அடிப்படையிலான கட்டமைப்பிற்குள் சிக்கலான நிபந்தனை பாணி காட்சிகளைக் கையாளுவதில் @when இன் நெகிழ்வுத்தன்மையை இந்த எடுத்துக்காட்டு காட்டுகிறது.

முடிவுரை

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

@when விதி தொடர்ந்து உருவாகி CSS இன் எதிர்காலத்தை வடிவமைக்கும் போது எதிர்கால புதுப்பிப்புகள் மற்றும் மேம்பாடுகளுக்காக காத்திருங்கள்!

மேலும் வாசிப்பு மற்றும் வளங்கள்

• CSS நிபந்தனை விதிகள் தொகுதி நிலை 3 (அதிகாரப்பூர்வ விவரக்குறிப்பு - புதுப்பிப்புகளைச் சரிபார்க்கவும்!)
• நான் பயன்படுத்தலாமா... (உலாவி ஆதரவு கண்காணிப்பு)
• Mozilla டெவலப்பர் நெட்வொர்க் (MDN) (CSS ஆவணம்)