CSS Containment அளவு கணக்கீடு: யூகிக்கக்கூடிய தளவமைப்புகளுக்கு கண்டெய்னர் பரிமாணங்களைத் தனிமைப்படுத்துதல்

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

CSS Containment-ஐப் புரிந்துகொள்ளுதல்

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

• செயல்திறன் மேம்படுத்தல்: குறிப்பிட்ட கூறுகளுக்கு ரெண்டரிங்கைக் கட்டுப்படுத்துவதன் மூலம், உலாவி தேவையற்ற மறுகணக்கீடுகள் மற்றும் மறுவரைவுகளைத் தவிர்க்க முடியும், இது குறிப்பாக சிக்கலான தளவமைப்புகளில் குறிப்பிடத்தக்க செயல்திறன் மேம்பாடுகளுக்கு வழிவகுக்கிறது.
• தளவமைப்பு யூகிக்கக்கூடிய தன்மை: ஒரு கட்டுப்படுத்தப்பட்ட கூறுக்குள் ஏற்படும் மாற்றங்கள் அதற்கு வெளியே உள்ள கூறுகளை பாதிக்காது என்பதை containment உறுதி செய்கிறது, இது தளவமைப்புகளை மேலும் யூகிக்கக்கூடியதாகவும், பிழைத்திருத்தம் செய்வதை எளிதாக்குகிறது.
• மேம்படுத்தப்பட்ட பராமரிப்புத்திறன்: சிக்கலான தளவமைப்புகளை சிறிய, கட்டுப்படுத்தப்பட்ட கூறுகளாகப் பிரிப்பது குறியீடு அமைப்பை மேம்படுத்துகிறது மற்றும் பயன்பாட்டைப் பராமரிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது.

`contain` பண்பு பல மதிப்புகளை ஏற்றுக்கொள்கிறது, ஒவ்வொன்றும் ரெண்டரிங் செயல்முறையின் வெவ்வேறு அம்சங்களைக் கட்டுப்படுத்துகிறது:

• `none`: கூறுக்கு எந்த கட்டுப்பாடும் பயன்படுத்தப்படவில்லை (இயல்புநிலை).
• `layout`: கூறு ஒரு புதிய தளவமைப்பு வடிவமைப்பு சூழலை நிறுவுகிறது.
• `paint`: கூறு அதன் வழித்தோன்றல்களை வெட்டுகிறது.
• `size`: கூறின் அளவு அதன் உள்ளடக்கங்களிலிருந்து சுயாதீனமானது.
• `style`: கூறு மற்றும் அதன் வழித்தோன்றல்களைத் தவிர மற்றவற்றிலும் தாக்கத்தை ஏற்படுத்தக்கூடிய பண்புகளுக்கு.
• `content`: `layout paint style`-க்கு சமமானது.
• `strict`: `layout paint size style`-க்கு சமமானது.

`contain: size`-க்குள் ஒரு ஆழமான பார்வை

`contain: size` உலாவியிடம் கூறின் அளவு அதன் உள்ளடக்கத்திலிருந்து சுயாதீனமானது என்று அறிவுறுத்துகிறது. இதன் பொருள், கூறின் உள்ளடக்கம் பூஜ்ஜிய அளவு கொண்டது போல அது ரெண்டர் செய்யப்படும். உலாவி பின்னர் வெளிப்படையாகக் குறிப்பிடப்பட்ட பரிமாணங்களைப் (எ.கா., `width` மற்றும் `height` பண்புகள்) அல்லது உள்ளார்ந்த பரிமாணங்களைப் பயன்படுத்தி கூறின் அளவைத் தீர்மானிக்கிறது. இரண்டும் கிடைக்கவில்லை என்றால், அது 0 அகலம் மற்றும் உயரத்துடன் ரெண்டர் செய்யப்படும்.

`contain: size` எவ்வாறு செயல்படுகிறது

எப்போது `contain: size` பயன்படுத்தப்படுகிறதோ, அப்போது உலாவி கூறின் அளவு கணக்கீட்டை அடிப்படையில் தனிமைப்படுத்துகிறது. இந்த தனிமைப்படுத்தலுக்கு பல முக்கியமான விளைவுகள் உள்ளன:

• வெளிப்படையான பரிமாணங்கள் முன்னுரிமை பெறுகின்றன: நீங்கள் கூறின் `width` மற்றும் `height`-ஐ வெளிப்படையாக அமைத்தால், உள்ளடக்கத்தைப் பொருட்படுத்தாமல் உலாவி அந்த மதிப்புகளைப் பயன்படுத்தும்.
• உள்ளார்ந்த பரிமாணங்கள் கிடைத்தால் பயன்படுத்தப்படும்: வெளிப்படையான பரிமாணங்கள் வழங்கப்படாவிட்டால், உலாவி கூறின் உள்ளார்ந்த பரிமாணங்களைப் பயன்படுத்தும் (எ.கா., ஒரு படத்தின் இயல்பான அளவு அல்லது வெளிப்படையான அகலம் அல்லது உயரக் கட்டுப்பாடுகள் இல்லாத உரை உள்ளடக்கத்தின் அளவு).
• தகவல் இல்லையென்றால் பூஜ்ஜிய பரிமாணங்கள்: வெளிப்படையான அல்லது உள்ளார்ந்த பரிமாணங்கள் எதுவும் கிடைக்கவில்லை என்றால், கூறு பூஜ்ஜிய அகலம் மற்றும் உயரத்துடன் ரெண்டர் செய்யப்படும். இது கவனமாகக் கையாளப்படாவிட்டால் எதிர்பாராத தளவமைப்பு சிக்கல்களுக்கு வழிவகுக்கும்.

எடுத்துக்காட்டு: அடிப்படை `contain: size`

பின்வரும் HTML-ஐக் கவனியுங்கள்:

            
<div class="container">
  <p>This is some content inside the container.</p>
</div>

            

              
                Copy
              
            
          

மற்றும் அதனுடன் தொடர்புடைய CSS:

            
.container {
  contain: size;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், `.container` கூறுக்கு `contain: size` பயன்படுத்தப்பட்டுள்ளது. நாம் `width` மற்றும் `height`-ஐ வெளிப்படையாக அமைத்துள்ளதால், கண்டெய்னர் எப்போதும் 300px அகலமும் 200px உயரமும் கொண்டிருக்கும், உள்ளே எவ்வளவு உள்ளடக்கம் இருந்தாலும் சரி. உள்ளடக்கம் இந்த பரிமாணங்களை மீறினால், அது வழிந்து செல்லும் (overflow).

எடுத்துக்காட்டு: வெளிப்படையான பரிமாணங்கள் இல்லை

இப்போது, CSS-இலிருந்து வெளிப்படையான `width` மற்றும் `height`-ஐ அகற்றுவோம்:

            
.container {
  contain: size;
  border: 1px solid black;
}

            

              
                Copy
              
            
          

இந்த நிலையில், கண்டெய்னர் பூஜ்ஜிய அகலம் மற்றும் உயரம் கொண்டிருக்கும், ஏனென்றால் நாம் எந்த வெளிப்படையான பரிமாணங்களையும் வழங்கவில்லை, மற்றும் `contain: size` காரணமாக உள்ளடக்கம் அளவு கணக்கீட்டிற்கு பங்களிக்கவில்லை. கூறு திறம்பட சுருங்கிவிடும்.

`contain: size`-க்கான பயன்பாட்டு வழக்குகள்

`contain: size` என்பது ஒரு கூறின் அளவை அதன் உள்ளடக்கத்திலிருந்து சுயாதீனமாக கட்டுப்படுத்த விரும்பும் சூழ்நிலைகளில் குறிப்பாக பயனுள்ளதாக இருக்கும். இங்கே சில பொதுவான பயன்பாட்டு வழக்குகள் உள்ளன:

1. பதிலி கூறுகள் (Placeholder Elements)

சமநேரமற்ற முறையில் ஏற்றப்படும் உள்ளடக்கத்திற்காக இடத்தை ஒதுக்க, பதிலி கூறுகளை உருவாக்க `contain: size`-ஐப் பயன்படுத்தலாம். இது உள்ளடக்கம் இறுதியில் தோன்றும்போது தளவமைப்பு மாற்றங்களைத் தடுக்கிறது.

எடுத்துக்காட்டு: ஒரு பதிலியுடன் ஒரு படத்தைச் ஏற்றுதல்

            
<div class="image-container">
  <img id="my-image" src="" alt="Placeholder Image">
</div>

            

              
                Copy
              
            
          

            
.image-container {
  width: 400px;
  height: 300px;
  contain: size;
  background-color: #f0f0f0;
}

#my-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the container */
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், `.image-container` ஒரு நிலையான அகலம் மற்றும் உயரம் மற்றும் `contain: size` ஆகியவற்றைக் கொண்டுள்ளது. படம் ஏற்றப்படும்போது பதிலி பின்னணி நிறம் காட்சி கருத்தை வழங்குகிறது. ஜாவாஸ்கிரிப்ட் மூலம் `img` குறிச்சொல்லின் `src` பண்பு மாறும் வகையில் புதுப்பிக்கப்படும்போது, தளவமைப்பு நிலையானதாக இருக்கும்.

2. விகித விகிதங்களைக் கட்டுப்படுத்துதல் (Controlling Aspect Ratios)

`contain: size`-ஐ மற்ற CSS நுட்பங்களுடன் இணைத்து கூறுகளின் உள்ளடக்கத்தைப் பொருட்படுத்தாமல் குறிப்பிட்ட விகித விகிதங்களைப் பராமரிக்கலாம்.

எடுத்துக்காட்டு: 16:9 விகித விகிதத்தைப் பராமரித்தல்

            
<div class="aspect-ratio-container">
  <div class="content">
    <p>Content that needs to fit within the aspect ratio.</p>
  </div>
</div>

            

              
                Copy
              
            
          

            
.aspect-ratio-container {
  width: 100%;
  contain: size;
  position: relative;
}

.aspect-ratio-container::before {
  content: "";
  display: block;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
}

.aspect-ratio-container .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

            

              
                Copy
              
            
          

இங்கே, `::before` போலி-கூறு `padding-bottom`-ஐப் பயன்படுத்தி விகித விகிதத்தை உருவாக்குகிறது. `contain: size` கண்டெய்னரின் அளவு `width` மற்றும் போலி-கூறின் `padding-bottom` மூலம் தீர்மானிக்கப்படுவதை உறுதிசெய்கிறது, `.content` கூறுக்குள் உள்ள உள்ளடக்கத்தால் அல்ல. இந்த அணுகுமுறை உள்ளடக்கம் மாறினாலும் விகித விகிதம் பராமரிக்கப்படுவதை உறுதி செய்கிறது.

3. மெய்நிகர் பட்டியல்களுடன் செயல்திறனை மேம்படுத்துதல்

மெய்நிகர் பட்டியல்களில் (எ.கா., தெரியும் உருப்படிகளை மட்டும் ரெண்டர் செய்யும் பட்டியல்கள்), `contain: size` சில உருப்படிகள் மட்டுமே மாறும்போது முழு பட்டியலுக்கும் தளவமைப்பை மறுகணக்கீடு செய்வதைத் தடுத்து செயல்திறனை மேம்படுத்த உதவும்.

எடுத்துக்காட்டு: ஒரு மெய்நிகர் பட்டியல் உருப்படியை உருவாக்குதல்

            
<div class="list-item">
  <p>Item content here.</p>
</div>

            

              
                Copy
              
            
          

            
.list-item {
  width: 100%;
  height: 50px; /* Fixed height for each item */
  contain: size;
}

            

              
                Copy
              
            
          

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

4. சிக்கலான கூறுகளில் தளவமைப்பு யூகிக்கக்கூடிய தன்மையை மேம்படுத்துதல்

கூடு கட்டப்பட்ட கூறுகள் மற்றும் மாறும் உள்ளடக்கத்துடன் கூடிய சிக்கலான UI கூறுகளில், `contain: size` ஒரு கூறின் அளவு அதன் குழந்தைகளின் மாற்றங்களால் பாதிக்கப்படவில்லை என்பதை உறுதி செய்வதன் மூலம் தளவமைப்பு யூகிக்கக்கூடிய தன்மையை மேம்படுத்த முடியும்.

எடுத்துக்காட்டு: தலைப்பு மற்றும் உடலுடன் கூடிய ஒரு கார்டு கூறு

            
<div class="card">
  <div class="card-header">
    <h2>Card Title</h2>
  </div>
  <div class="card-body">
    <p>Card content here.</p>
  </div>
</div>

            

              
                Copy
              
            
          

            
.card {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  contain: size;
}

.card-header {
  padding: 10px;
  background-color: #f0f0f0;
}

.card-body {
  padding: 10px;
}

            

              
                Copy
              
            
          

`contain: size`-உடன், கார்டின் பரிமாணங்கள் தலைப்பு மற்றும் உடலில் உள்ள உள்ளடக்கத்தைப் பொருட்படுத்தாமல் 300x200 பிக்சல்களில் நிலையானதாக இருக்கும். இது தளவமைப்பை எளிதாக்குகிறது மற்றும் உள்ளடக்கம் புதுப்பிக்கப்படும்போது கார்டின் அளவில் எதிர்பாராத மாற்றங்களைத் தடுக்கிறது.

`contain: size`-ஐ மற்ற containment மதிப்புகளுடன் இணைத்தல்

`contain: size`-ஐ மற்ற containment மதிப்புகளுடன் திறம்பட இணைத்து மேலும் விரிவான ரெண்டரிங் தனிமைப்படுத்தலை அடையலாம். எடுத்துக்காட்டாக, `contain: layout` மற்றும் `contain: paint` உடன் இணைத்து ஒரு முற்றிலும் சுயாதீனமான ரெண்டரிங் சூழலை உருவாக்கலாம்.

எடுத்துக்காட்டு: `contain: content`-ஐப் பயன்படுத்துதல்

            
.container {
  contain: content;
  width: 400px;
  height: 300px;
  border: 1px solid blue;
}

            

              
                Copy
              
            
          

`contain: content` என்பது `contain: layout paint style`-க்கான ஒரு சுருக்கமாகும். வெளிப்படையான `width` மற்றும் `height`-உடன் பயன்படுத்தும்போது, இது கண்டெய்னரின் ரெண்டரிங்கை திறம்பட தனிமைப்படுத்துகிறது. கண்டெய்னருக்குள் எந்த மாற்றங்களும் கண்டெய்னருக்கு வெளியே உள்ள கூறுகளின் தளவமைப்பு, பெயிண்டிங் அல்லது ஸ்டைலைப் பாதிக்காது.

எடுத்துக்காட்டு: `contain: strict`-ஐப் பயன்படுத்துதல்

            
.container {
  contain: strict;
  width: 400px;
  height: 300px;
  border: 1px solid green;
}

            

              
                Copy
              
            
          

`contain: strict` என்பது `contain: layout paint size style`-க்கான ஒரு சுருக்கமாகும். இது containment-இன் முழுமையான வடிவத்தை வழங்குகிறது. உலாவி கூறை ஒரு முற்றிலும் சுயாதீனமான ரெண்டரிங் சூழலாகக் கருதுகிறது, அதன் அளவு, தளவமைப்பு, பெயிண்டிங் மற்றும் ஸ்டைல் அனைத்தும் ஆவணத்தின் மற்ற பகுதிகளிலிருந்து தனிமைப்படுத்தப்பட்டுள்ளன.

கருத்தாய்வுகள் மற்றும் சாத்தியமான இடர்ப்பாடுகள்

`contain: size` குறிப்பிடத்தக்க நன்மைகளை வழங்கினாலும், சாத்தியமான சிக்கல்கள் மற்றும் கருத்தாய்வுகள் குறித்து அறிந்திருப்பது முக்கியம்:

• வழிதல் (Overflow): உள்ளடக்கம் குறிப்பிடப்பட்ட பரிமாணங்களை மீறும்போது, வழிதல் ஏற்படும். வழிதல் எவ்வாறு கையாளப்படுகிறது என்பதைக் கட்டுப்படுத்த `overflow` பண்பைப் பயன்படுத்த வேண்டியிருக்கலாம் (எ.கா., `overflow: auto`, `overflow: scroll`, அல்லது `overflow: hidden`).
• பூஜ்ஜிய பரிமாணங்கள்: நீங்கள் வெளிப்படையான அல்லது உள்ளார்ந்த பரிமாணங்களை வழங்கவில்லை என்றால், கூறு பூஜ்ஜிய அகலம் மற்றும் உயரம் கொண்டிருக்கும். நீங்கள் அதை எதிர்பார்க்கவில்லை என்றால் இது தளவமைப்பு சிக்கல்களுக்கு வழிவகுக்கும்.
• உலாவி இணக்கத்தன்மை: `contain` நவீன உலாவிகளில் பரவலாக ஆதரிக்கப்பட்டாலும், இணக்கத்தன்மையைச் சரிபார்த்து, தேவைப்பட்டால் பழைய உலாவிகளுக்கு ஃபால்பேக்குகளை வழங்குவது எப்போதும் ஒரு நல்ல யோசனையாகும். தற்போதைய ஆதரவு நிலையைச் சரிபார்க்க Can I Use போன்ற கருவிகளைப் பயன்படுத்தலாம்.

அணுகல்தன்மை கருத்தாய்வுகள்

`contain: size`-ஐப் பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது அவசியம். உள்ளடக்கம் வழிந்து சென்றாலும் அல்லது மறைக்கப்பட்டிருந்தாலும், மாற்றுத்திறனாளிகளுக்கு உள்ளடக்கம் இன்னும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். உள்ளடக்கம் மற்றும் அதன் அமைப்பு பற்றிய சொற்பொருள் தகவல்களை வழங்க பொருத்தமான ARIA பண்புகளைப் பயன்படுத்தவும்.

`contain: size`-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

`contain: size`-ஐ திறம்பட பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

• எப்போதும் பரிமாணங்களை வழங்கவும்: எதிர்பாராத பூஜ்ஜிய-பரிமாண சிக்கல்களைத் தவிர்க்க `contain: size`-உடன் உள்ள கூறுகளுக்கு `width` மற்றும் `height`-ஐ வெளிப்படையாக அமைக்கவும்.
• வழிதலைக் கையாளவும்: குறிப்பிடப்பட்ட பரிமாணங்களை மீறும் உள்ளடக்கத்தை நிர்வகிக்க `overflow` பண்பைப் பயன்படுத்தவும். சூழலின் அடிப்படையில் பொருத்தமான வழிதல் நடத்தையைத் தேர்வுசெய்யவும்.
• முழுமையாக சோதிக்கவும்: `contain: size` எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த, உங்கள் தளவமைப்புகளை வெவ்வேறு உள்ளடக்கம் மற்றும் திரை அளவுகளுடன் சோதிக்கவும்.
• மற்ற containment மதிப்புகளுடன் பயன்படுத்தவும்: மேலும் விரிவான ரெண்டரிங் தனிமைப்படுத்தலை அடைய `contain: size`-ஐ மற்ற containment மதிப்புகளுடன் (எ.கா., `contain: layout`, `contain: paint`, `contain: style`) இணைக்கவும்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: `contain: size`-ஐப் பயன்படுத்தும்போதும், மாற்றுத்திறனாளிகளுக்கு உள்ளடக்கம் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும்.

முடிவுரை

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