CSS @when: நவீன வலை வடிவமைப்பில் நிபந்தனை ஸ்டைலிங்கில் தேர்ச்சி பெறுதல்

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

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

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

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

ஒருங்கிணைந்த சக்தி: @when உடன் @media மற்றும் @supports

@when-இன் உண்மையான சக்தி, அது ஏற்கனவே உள்ள நிபந்தனை at-rules உடன் இணைந்து பயன்படுத்தப்படும்போது உணரப்படுகிறது:

1. @when உடன் @media வினவல்கள்

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

எடுத்துக்காட்டு: பதிலளிக்கக்கூடிய அச்சுக்கலை

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

            .my-paragraph {
  font-size: 16px;
}

@media (min-width: 768px) {
  .my-paragraph {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

இப்போது, @when-ஐப் பயன்படுத்தி, நீங்கள் அதே முடிவை மிகவும் சுருக்கமாகவும் அதிகக் கட்டுப்பாட்டுடனும் அடையலாம்:

            .my-paragraph {
  font-size: 16px;
  @when (min-width: 768px) {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

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

• அடிப்படை font-size ஆன 16px எப்போதும் பயன்படுத்தப்படுகிறது.
• font-size ஆன 18px, காட்சிப் பரப்பு அகலம் 768 பிக்சல்கள் அல்லது அதற்கு அதிகமாக இருக்கும்போது மட்டும் பயன்படுத்தப்படுகிறது.

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

உலகளாவிய எடுத்துக்காட்டு: வெவ்வேறு சாதனங்களுக்கு UI கூறுகளைத் தழுவுதல்

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

            .product-card {
  padding: 10px;
  text-align: center;
  @when (min-width: 600px) {
    padding: 20px;
    text-align: left;
  }
  @when (min-width: 1024px) {
    padding: 30px;
    display: flex;
    align-items: center;
  }
}

.product-image {
  width: 100%;
  height: 150px;
  @when (min-width: 600px) {
    width: 200px;
    height: 200px;
  }
  @when (min-width: 1024px) {
    width: 250px;
    height: 250px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

இது .product-card மற்றும் அதன் உள் கூறுகளான .product-image போன்றவை காட்சிப் பரப்பு அளவு அதிகரிக்கும்போது படிப்படியாக தங்கள் ஸ்டைல்களை மாற்றியமைக்க அனுமதிக்கிறது, இது உலகளவில் பரந்த அளவிலான சாதனங்களில் தனிப்பயனாக்கப்பட்ட அனுபவத்தை வழங்குகிறது.

2. @when உடன் @supports வினவல்கள்

@supports at-rule ஒரு உலாவி ஒரு குறிப்பிட்ட CSS property-value ஜோடியை ஆதரிக்கிறதா என்பதைச் சரிபார்க்க உங்களை அனுமதிக்கிறது. அதை @when உடன் இணைப்பதன் மூலம், ஒரு குறிப்பிட்ட உலாவி அம்சம் கிடைக்கும்போது மட்டுமே நீங்கள் ஸ்டைல்களை நிபந்தனையுடன் பயன்படுத்தலாம்.

எடுத்துக்காட்டு: ஒரு புதிய CSS அம்சத்தைப் பயன்படுத்துதல்

நீங்கள் சோதனைக்குரிய backdrop-filter பண்பைப் பயன்படுத்த விரும்புகிறீர்கள் என்று கற்பனை செய்து பாருங்கள். எல்லா உலாவிகளும் அல்லது பழைய பதிப்புகளும் இதை ஆதரிக்காது. @when-ஐ @supports உடன் பயன்படுத்தி இதை நீங்கள் அழகாகப் பயன்படுத்தலாம்:

            .modal-background {
  background-color: rgba(0, 0, 0, 0.5);
  @when supports (backdrop-filter: blur(10px)) {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

இந்த விஷயத்தில்:

• background-color எப்போதும் ஒரு மாற்று வழியாகப் பயன்படுத்தப்படுகிறது.
• backdrop-filter, உலாவி backdrop-filter: blur(10px) அறிவிப்பை ஆதரிக்கும்போது மட்டும் பயன்படுத்தப்படுகிறது.

படிப்படியான மேம்பாட்டிற்கு இது முக்கியமானது, சமீபத்திய CSS அம்சங்களை ஆதரிக்காத சூழல்களிலும் உங்கள் வடிவமைப்பு செயல்படுவதாகவும் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது.

உலகளாவிய எடுத்துக்காட்டு: அனிமேஷன்களுக்கான படிப்படியான மேம்பாடு

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

            .animated-element {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;

  @when supports (animation-composition: replace) {
    /* More advanced animation properties or sequences */
    animation: slideIn 1s forwards;
    animation-composition: replace;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

இங்கே, animation-composition: replace-ஐ ஆதரிக்கும் உலாவிகள் மிகவும் நுட்பமான அனிமேஷன் வரிசையைப் பெறும், மற்றவை எளிமையான transition பண்பிற்கு மாறும், இது உலகெங்கிலும் உள்ள பயனர்களுக்கு சீரான, ஆனால் மாறுபட்ட அனுபவத்தை உறுதி செய்கிறது.

3. @when-ஐ பல நிபந்தனைகளுடன் இணைத்தல்

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

எடுத்துக்காட்டு: சிக்கலான பதிலளிக்கக்கூடிய தர்க்கம்

ஒரு பக்கப்பட்டி சிறிய திரைகளில் மட்டுமே மறைக்கப்பட வேண்டும், ஆனால் ஒரு குறிப்பிட்ட பயனர் விருப்பத்தேர்வு அமைப்பு (உடலில் ஒரு வகுப்பால் சுட்டிக்காட்டப்படுவதாகக் கருதுவோம்) செயலில் இல்லாதபோது மட்டுமே என்று ஒரு சூழ்நிலையை கற்பனை செய்து பார்ப்போம்.

            .sidebar {
  display: block;
  width: 250px;

  /* Hide sidebar on small screens AND not in preference mode */
  @when (max-width: 767px) and not (.no-sidebar-on-mobile) {
    display: none;
  }

  /* Show sidebar on larger screens OR if preference mode is active on small screens */
  @when (min-width: 768px) or (.sidebar-on-mobile) {
    display: block;
  }
}

            

              
                Copy
              
            
          

இந்த அளவிலான நிபந்தனை ஸ்டைலிங், குறிப்பிட்ட சூழல்கள் மற்றும் பயனர் தொடர்புகளுக்கு ஏற்ப மிகவும் சிக்கலான UI நடத்தைகளை அனுமதிக்கிறது.

தொடரியல் மற்றும் சிறந்த நடைமுறைகள்

@when-இன் அடிப்படை தொடரியல் நேரடியானது:

            selector {
  property: value;
  @when (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

பல நிபந்தனைகளை இணைக்கும்போது, தொடரியல் பின்வருமாறு மாறுகிறது:

            selector {
  property: value;
  @when (condition1) and (condition2) {
    property: value;
  }
  @when (condition1) or (condition2) {
    property: value;
  }
  @when not (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

முக்கிய சிறந்த நடைமுறைகள்:

• வாசிப்புத்திறனுக்கு முன்னுரிமை: @when ஸ்டைல்களை சுருக்கமாக மாற்றினாலும், புரிந்துகொள்ள கடினமாக இருக்கும் அதிகப்படியான சிக்கலான நிபந்தனைகளைத் தவிர்க்கவும். தேவைப்பட்டால் சிக்கலான தர்க்கத்தை தனித்தனி விதிகளாக பிரிக்கவும்.
• படிப்படியான மேம்பாடு: உங்கள் @when விதிகளால் இலக்கு வைக்கப்படும் அம்சங்களை ஆதரிக்காத உலாவிகள் அல்லது சூழல்களுக்கு எப்போதும் ஒரு மாற்று வழியை வழங்கவும், குறிப்பாக @supports உடன் பயன்படுத்தும்போது.
• செயல்திறன்: @when பொதுவாக திறமையானது என்றாலும், பாகுபடுத்தும் செயல்திறனை பாதிக்கக்கூடிய அதிகப்படியான சிக்கலான நிபந்தனை தர்க்கத்தில் கவனமாக இருங்கள், இருப்பினும் இது வழக்கமான பயன்பாட்டில் அரிதாகவே ஒரு பிரச்சனையாகும்.
• உலாவி ஆதரவு: @when மற்றும் அதன் துணை at-rules-க்கான உலாவி ஆதரவை கவனத்தில் கொள்ளுங்கள். அதன் அறிமுகத்தின்படி, பயன்பாடு அதிகரித்து வருகிறது, ஆனால் உங்கள் இலக்கு உலாவிகளில் சோதிப்பது அவசியம். சமீபத்திய இணக்கத்தன்மை தகவல்களைச் சரிபார்க்க Can I Use போன்ற கருவிகளைப் பயன்படுத்தவும்.
• உலகளாவிய அணுகல்: உலகளாவிய பார்வையாளர்களுக்காக வடிவமைக்கும்போது, உலகெங்கிலும் பரவலாக உள்ள சாதன அளவுகள் மற்றும் தெளிவுத்திறன்களுக்கு ஏற்ப @when-ஐ @media உடன் பயன்படுத்தவும். வெவ்வேறு நெட்வொர்க் நிலைமைகளையும் கருத்தில் கொள்ளுங்கள்; அனிமேஷன்களைத் தவிர்க்க விரும்பும் பயனர்களுக்காக prefers-reduced-motion மீடியா வினவல்களை @when-க்குள் பயன்படுத்தலாம்.
• பராமரிப்புத்திறன்: தொடர்புடைய ஸ்டைல்களை ஒன்றாக வைத்திருக்க @when-ஐப் பயன்படுத்தவும். ஒரு பண்பின் மதிப்பு ஒரு நிபந்தனையின் அடிப்படையில் மாறினால், இயல்புநிலை மற்றும் நிபந்தனை மதிப்புகள் இரண்டையும் ஒரே விதித் தொகுதிக்குள் வைத்திருப்பது, அவற்றை வெவ்வேறு @media வினவல்களில் சிதறடிப்பதற்குப் பதிலாக, பராமரிக்க எளிதானது.

உலாவி ஆதரவு மற்றும் எதிர்காலக் கண்ணோட்டம்

@when at-rule என்பது CSS உலகில் ஒப்பீட்டளவில் ஒரு புதிய கூடுதலாகும். அதன் ஆரம்ப பரவலான பயன்பாட்டின்படி, இது Chrome, Firefox, Safari, மற்றும் Edge போன்ற நவீன உலாவிகளில் ஆதரிக்கப்படுகிறது. இருப்பினும், குறிப்பிட்ட பதிப்புகள் மற்றும் அம்சங்களுக்கான சமீபத்திய உலாவி இணக்கத்தன்மை தரவை எப்போதும் சரிபார்ப்பது முக்கியம்.

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

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

முடிவுரை

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

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