CSS @scope விதி: நவீன வலை மேம்பாட்டிற்கான ஸ்டைல் என்கேப்சுலேஷனில் தேர்ச்சி பெறுதல்

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

ஸ்டைல் என்கேப்சுலேஷனைப் புரிந்துகொள்ளுதல்

ஸ்டைல் என்கேப்சுலேஷன் என்பது DOM (Document Object Model)-இன் ஒரு குறிப்பிட்ட பகுதிக்குள் ஸ்டைல்களை தனிமைப்படுத்தும் திறனைக் குறிக்கிறது, இது அந்த நியமிக்கப்பட்ட வரம்பிற்கு வெளியே உள்ள கூறுகளைப் பாதிப்பதைத் தடுக்கிறது. கூறு அடிப்படையிலான கட்டமைப்புகளுக்கும், ஒரு கூறுக்காக வரையறுக்கப்பட்ட ஸ்டைல்கள் தற்செயலாக மற்ற கூறுகளின் தோற்றத்தை மாற்றுவதைத் தடுப்பதற்கும் இது அவசியமானது.

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

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

CSS பெயரிடும் மரபுகள் (BEM, OOCSS, SMACSS) மற்றும் CSS-in-JS லைப்ரரிகள் போன்ற நுட்பங்கள் இந்த சவால்களை எதிர்கொள்ள முயன்றாலும், @scope விதி உண்மையான ஸ்டைல் என்கேப்சுலேஷனை அடைய ஒரு நேட்டிவ் CSS தீர்வை வழங்குகிறது.

CSS @scope விதியை அறிமுகப்படுத்துதல்

@scope விதி, சில ஸ்டைல்கள் பொருந்தும் ஒரு குறிப்பிட்ட DOM துணை மரத்தை வரையறுக்க உங்களை அனுமதிக்கிறது. இது உங்கள் CSS விதிகளின் வரம்பைக் கட்டுப்படுத்த ஒரு வழியை வழங்குகிறது, அவை கசிந்து உங்கள் பயன்பாட்டின் பிற பகுதிகளைப் பாதிப்பதைத் தடுக்கிறது. @scope விதியின் அடிப்படை தொடரியல் பின்வருமாறு:

            @scope (<scope-root>) to (<scope-limit>)? {
  /* CSS rules */
}
            

              
                Copy
              
            
          

• <scope-root>: இது ஸ்கோப்பின் தொடக்க புள்ளியை வரையறுக்கும் உறுப்பு. @scope விதிக்குள் உள்ள ஸ்டைல்கள் இந்த உறுப்பு மற்றும் அதன் வழித்தோன்றல்களுக்குப் பொருந்தும்.
• <scope-limit> (விருப்பத்தேர்வு): இது ஸ்டைல்கள் இனி பொருந்தாத எல்லையைக் குறிப்பிடுகிறது. இது தவிர்க்கப்பட்டால், ஸ்கோப் <scope-root>-இன் அனைத்து வழித்தோன்றல்களுக்கும் நீட்டிக்கப்படும்.

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

உதாரணம்: ஒரு கார்டு கூறை ஸ்டைலிங் செய்தல்

HTML:

            <div class="card">
  <h2 class="card__title">Product Title</h2>
  <p class="card__description">A brief description of the product.</p>
  <button class="card__button">Add to Cart</button>
</div>
            

              
                Copy
              
            
          

CSS:

            @scope (.card) {
  .card {
    border: 1px solid #ccc;
    padding: 16px;
    margin-bottom: 16px;
  }

  .card__title {
    font-size: 1.2em;
    margin-bottom: 8px;
  }

  .card__description {
    color: #555;
  }

  .card__button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், @scope (.card) விதியானது, பிளாக்கிற்குள் வரையறுக்கப்பட்ட ஸ்டைல்கள் .card உறுப்புக்குள் உள்ள கூறுகளுக்கு மட்டுமே பொருந்துவதை உறுதி செய்கிறது. இது உங்கள் பயன்பாட்டின் மற்ற பகுதிகளுடன் ஏற்படக்கூடிய எந்தவொரு ஸ்டைல் முரண்பாடுகளையும் தடுக்கிறது.

ஸ்கோப் எல்லைகளுக்கு `to` என்ற முக்கிய சொல்லைப் பயன்படுத்துதல்

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

உதாரணம்: `to` மூலம் வரம்பைக் கட்டுப்படுத்துதல்

உங்களிடம் உள்ளமைக்கப்பட்ட துணைமெனுக்களுடன் ஒரு நேவிகேஷன் மெனு இருக்கும் ஒரு சூழ்நிலையைக் கவனியுங்கள். துணைமெனுக்களில் உள்ள இணைப்புகளிலிருந்து வேறுபட்ட முறையில் மெனுவின் முதல் மட்டத்தில் உள்ள இணைப்புகளை ஸ்டைல் செய்ய விரும்புகிறீர்கள்.

HTML:

            <nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item"><a href="#" class="navigation__link">Home</a></li>
    <li class="navigation__item">
      <a href="#" class="navigation__link">Products</a>
      <ul class="navigation__submenu">
        <li class="navigation__submenu-item"><a href="#" class="navigation__submenu-link">Category 1</a></li>
        <li class="navigation__submenu-item"><a href="#" class="navigation__submenu-link">Category 2</a></li>
      </ul>
    </li>
    <li class="navigation__item"><a href="#" class="navigation__link">Services</a></li>
  </ul>
</nav>
            

              
                Copy
              
            
          

CSS:

            @scope (.navigation) to (.navigation__submenu) {
  .navigation__link {
    color: #333;
    font-weight: bold;
  }
}

.navigation__submenu-link {
  color: #777;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், @scope (.navigation) to (.navigation__submenu) விதியானது, தடித்த எழுத்துரு எடை மற்றும் அடர் நிறத்தை நேவிகேஷன் மெனுவின் முதல் மட்டத்தில் உள்ள இணைப்புகளுக்கு மட்டுமே பயன்படுத்துகிறது. to என்ற முக்கிய சொல் இந்த ஸ்டைல்கள் .navigation__submenu-க்குள் உள்ள இணைப்புகளைப் பாதிக்காது என்பதை உறுதி செய்கிறது. .navigation__submenu-link-க்கான தனி விதி, துணைமெனு இணைப்புகளை ஒரு லேசான நிறத்தில் ஸ்டைல் செய்கிறது.

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

@scope விதி நவீன வலை மேம்பாட்டிற்கு பல நன்மைகளை வழங்குகிறது:

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

பிற ஸ்டைல் என்கேப்சுலேஷன் நுட்பங்களுடன் ஒப்பீடு

@scope விதி ஸ்டைல் என்கேப்சுலேஷனுக்கான ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், அது மற்ற நுட்பங்களுடன் எவ்வாறு ஒப்பிடுகிறது என்பதைப் புரிந்துகொள்வது அவசியம்:

CSS பெயரிடும் மரபுகள் (BEM, OOCSS, SMACSS)

BEM (Block, Element, Modifier), OOCSS (Object-Oriented CSS), மற்றும் SMACSS (Scalable and Modular Architecture for CSS) போன்ற CSS பெயரிடும் மரபுகள் CSS வகுப்புகளுக்கு பெயரிடுவதற்கான வழிகாட்டுதல்களை வழங்குவதன் மூலம் CSS-இன் அமைப்பு மற்றும் பராமரிப்புத்தன்மையை மேம்படுத்துவதை நோக்கமாகக் கொண்டுள்ளன. இந்த மரபுகள் ஸ்பெசிஃபிசிட்டி முரண்பாடுகளைக் குறைக்கவும் குறியீடு வாசிப்புத்தன்மையை மேம்படுத்தவும் உதவக்கூடும் என்றாலும், அவை உண்மையான ஸ்டைல் என்கேப்சுலேஷனை வழங்காது. இந்த மரபுகளைப் பயன்படுத்தி வரையறுக்கப்பட்ட ஸ்டைல்கள் கவனமாக நிர்வகிக்கப்படாவிட்டால், பயன்பாட்டின் மற்ற பகுதிகளைப் பாதிக்கக்கூடும்.

CSS மாட்யூல்கள்

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

ஷேடோ DOM

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

CSS-in-JS

CSS-in-JS லைப்ரரிகள் உங்கள் JavaScript குறியீட்டிற்குள் நேரடியாக CSS ஸ்டைல்களை எழுத உங்களை அனுமதிக்கின்றன. இந்த லைப்ரரிகள் பொதுவாக தானியங்கி வகுப்புப் பெயர் உருவாக்கம் மற்றும் ஸ்கோப்பிங் போன்ற நுட்பங்களைப் பயன்படுத்தி, ஸ்டைல்கள் வரையறுக்கப்பட்ட கூறுக்கு தனிமைப்படுத்தப்படுவதை உறுதி செய்கின்றன. CSS-in-JS டைனமிக் ஸ்டைலிங், குறியீடு மறுபயன்பாடு, மற்றும் மேம்படுத்தப்பட்ட செயல்திறன் போன்ற நன்மைகளை வழங்க முடியும், ஆனால் இது உங்கள் பில்ட் செயல்முறைக்கு சிக்கலைச் சேர்க்கலாம் மற்றும் எல்லா திட்டங்களுக்கும் பொருத்தமானதாக இருக்காது.

முக்கிய வேறுபாடுகளை சுருக்கமாகக் காட்டும் ஒரு அட்டவணை இங்கே:

உலாவி ஆதரவு மற்றும் பாலிஃபில்கள்

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

@scope விதிக்கான தற்போதைய உலாவி ஆதரவை சரிபார்க்க Can I use போன்ற ஆதாரங்களை நீங்கள் பயன்படுத்தலாம். நீங்கள் பழைய உலாவிகளை ஆதரிக்க வேண்டுமானால், JavaScript-ஐப் பயன்படுத்தி @scope விதியின் ஒரு ஃபால்பேக் செயலாக்கத்தை வழங்கும் ஒரு பாலிஃபில்லைப் பயன்படுத்தலாம்.

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

@scope விதியை最大限மாகப் பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

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

நிஜ-உலக உதாரணங்கள் மற்றும் பயன்பாட்டு வழக்குகள்

@scope விதியை பல்வேறு நிஜ-உலக சூழ்நிலைகளில் பயன்படுத்தலாம்:

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

உதாரணம்: ஒரு மோடல் கூறை ஸ்டைலிங் செய்தல்

முற்றிலுமாக தனிமைப்படுத்தப்பட்ட ஸ்டைலிங் இருக்க வேண்டிய ஒரு மோடல் கூறை கவனியுங்கள்.

HTML:

            <div class="modal">
  <div class="modal__content">
    <h2 class="modal__title">Confirmation</h2>
    <p class="modal__message">Are you sure you want to proceed?</p>
    <div class="modal__buttons">
      <button class="modal__button modal__button--confirm">Confirm</button>
      <button class="modal__button modal__button--cancel">Cancel</button>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

CSS:

            @scope (.modal) {
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal__content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
  }

  .modal__title {
    font-size: 1.5em;
    margin-bottom: 10px;
  }

  .modal__button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .modal__button--confirm {
    background-color: green;
    color: white;
  }

  .modal__button--cancel {
    background-color: red;
    color: white;
  }
}

            

              
                Copy
              
            
          

முடிவுரை

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