CSS கண்டெய்ன்மென்ட் நிலை 3: செயல்திறனுக்கான மேம்பட்ட லேஅவுட் மற்றும் பெயின்ட் தனிமைப்படுத்தலில் தேர்ச்சி பெறுதல்

தொடர்ந்து மாறிவரும் வலை மேம்பாட்டு உலகில், செயல்திறனை மேம்படுத்துவது மிக முக்கியமானது. வலைத்தளங்கள் மிகவும் சிக்கலானதாகவும், ஊடாடும் தன்மையுடனும் மாறும் போது, டெவலப்பர்களுக்கு லேஅவுட் மற்றும் ரெண்டரிங்கை திறமையாக நிர்வகிக்க வலுவான கருவிகள் தேவைப்படுகின்றன. CSS கண்டெய்ன்மென்ட் நிலை 3, உங்கள் ஆவணத்தின் பகுதிகளைத் தனிமைப்படுத்த உங்களை அனுமதிக்கும் சக்திவாய்ந்த பண்புகளின் தொகுப்பை வழங்குகிறது, இது குறிப்பிடத்தக்க செயல்திறன் மேம்பாடுகளுக்கும் மற்றும் மேம்பட்ட பராமரிப்புத்தன்மைக்கும் வழிவகுக்கிறது. இந்தக் கட்டுரை CSS கண்டெய்ன்மென்ட் நிலை 3-ன் நுணுக்கங்களை ஆராய்ந்து, உலகளாவிய வலை மேம்பாட்டிற்கான நடைமுறை எடுத்துக்காட்டுகள் மற்றும் நுண்ணறிவுகளை வழங்கும்.

CSS கண்டெய்ன்மென்ட் என்றால் என்ன?

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

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

நான்கு கண்டெய்ன்மென்ட் மதிப்புகள்

CSS கண்டெய்ன்மென்ட் நிலை 3, contain பண்பிற்கான நான்கு முதன்மை மதிப்புகளை அறிமுகப்படுத்துகிறது. ஒவ்வொரு மதிப்பும் வெவ்வேறு அளவிலான தனிமைப்படுத்தலைக் குறிக்கிறது:

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

கண்டெய்ன்மென்ட் மதிப்புகளை விரிவாகப் புரிந்துகொள்ளுதல்

contain: none;

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

contain: layout;

contain: layout; பயன்படுத்துவது, எலிமெண்ட் மற்றும் அதன் டெசன்டென்ட்களின் லேஅவுட் ஆவணத்தின் மற்ற பகுதிகளிலிருந்து சுயாதீனமானது என்று பிரவுசருக்குச் சொல்கிறது. இதன் பொருள், எலிமெண்ட்டின் சைல்ட் எலிமெண்ட்டுகளில் ஏற்படும் மாற்றங்கள், கண்டெய்ன் செய்யப்பட்ட எலிமெண்ட்டுக்கு வெளியே உள்ள எலிமெண்ட்டுகளுக்கான லேஅவுட் மறு கணக்கீடுகளைத் தூண்டாது. இது டைனமிக் பட்டியல்கள், ஊடாடும் கூறுகள் அல்லது மூன்றாம் தரப்பு விட்ஜெட்டுகள் போன்ற சிக்கலான அல்லது அடிக்கடி மாறும் லேஅவுட்களைக் கொண்ட பக்கத்தின் பகுதிகளுக்கு குறிப்பாகப் பயனளிக்கிறது.

எடுத்துக்காட்டு: நிகழ்நேர பங்கு விலைகளைக் காட்டும் ஒரு சிக்கலான டாஷ்போர்டு விட்ஜெட்டை கற்பனை செய்து பாருங்கள். விலைகள் மாறும்போது விட்ஜெட்டின் லேஅவுட் அடிக்கடி புதுப்பிக்கப்படுகிறது. விட்ஜெட்டின் கண்டெய்னருக்கு contain: layout; பயன்படுத்துவதன் மூலம், இந்த லேஅவுட் புதுப்பிப்புகள் டாஷ்போர்டின் மற்ற பகுதிகளைப் பாதிப்பதைத் தடுக்கலாம், இது ஒரு மென்மையான மற்றும் அதிக ரெஸ்பான்சிவ் பயனர் அனுபவத்திற்கு வழிவகுக்கும்.

contain: paint;

contain: paint; பண்பு, எலிமெண்ட் மற்றும் அதன் டெசன்டென்ட்களின் பெயிண்டிங் ஆவணத்தின் மற்ற பகுதிகளிலிருந்து சுயாதீனமானது என்று பிரவுசருக்குத் தெரிவிக்கிறது. இதன் பொருள், எலிமெண்ட் அல்லது அதன் சைல்ட் எலிமெண்ட்டுகளில் ஏற்படும் மாற்றங்கள், கண்டெய்ன் செய்யப்பட்ட எலிமெண்ட்டுக்கு வெளியே ரீபெயின்ட்களைத் தூண்டாது. ரீபெயின்ட்கள் செலவு மிகுந்த செயல்பாடுகள், எனவே அவற்றைக் குறைப்பது செயல்திறனுக்கு முக்கியமானது.

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

contain: style;

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

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

contain: size;

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

எடுத்துக்காட்டு: ஒரு கருத்துப் பகுதியுடன் கூடிய ஒரு செய்தி கட்டுரையை கற்பனை செய்து பாருங்கள். கருத்துகளின் எண்ணிக்கை மற்றும் அவற்றின் நீளம் கணிசமாக மாறுபடலாம். கருத்துப் பகுதியின் கண்டெய்னருக்கு contain: size; பயன்படுத்துவதன் மூலம், கருத்துப் பகுதியில் ஏற்படும் மாற்றங்கள் கட்டுரையின் லேஅவுட்டைப் பாதிப்பதைத் தடுக்கலாம்.

contain: content;

contain: content; சுருக்கெழுத்து layout, paint, மற்றும் style கண்டெய்ன்மென்ட்டின் சக்திவாய்ந்த கலவையாகும். இது ஒரு விரிவான அளவிலான தனிமைப்படுத்தலை வழங்குகிறது, எலிமெண்ட் மற்றும் அதன் உள்ளடக்கங்கள் ஆவணத்தின் மற்ற பகுதிகளிலிருந்து பெரும்பாலும் சுயாதீனமாக இருப்பதை உறுதி செய்கிறது. எந்த குறிப்பிட்ட மதிப்புகளைப் பயன்படுத்துவது என்று உங்களுக்குத் தெரியாதபோது கண்டெய்ன்மென்ட்டைப் பயன்படுத்த இது ஒரு நல்ல தொடக்கப் புள்ளியாகும்.

contain: strict;

contain: strict; சுருக்கெழுத்து size, layout, paint, மற்றும் style கண்டெய்ன்மென்ட்டை இணைப்பதன் மூலம் வலுவான அளவிலான தனிமைப்படுத்தலை வழங்குகிறது. இது அதிகபட்ச மேம்படுத்தல் திறனை வழங்குகிறது, ஆனால் அதிக கட்டுப்பாடுகளுடன் வருகிறது. இந்த மதிப்பை நியாயமாகப் பயன்படுத்துவது முக்கியம், ஏனெனில் சரியாகப் புரிந்து கொள்ளாவிட்டால் அது சில நேரங்களில் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும்.

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

CSS கண்டெய்ன்மென்ட் நிஜ உலக சூழ்நிலைகளில் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை விளக்க சில நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகளை ஆராய்வோம்.

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

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

            
<ul class="search-results">
  <li style="contain: layout;">...</li>
  <li style="contain: layout;">...</li>
  <li style="contain: layout;">...</li>
</ul>

            

              
                Copy
              
            
          

2. மோடல் விண்டோக்கள் மற்றும் ஓவர்லேக்களை மேம்படுத்துதல்

மோடல் விண்டோக்கள் மற்றும் ஓவர்லேக்கள் தோன்றும்போதோ அல்லது மறையும்போதோ முழுப் பக்கத்தின் ரீபெயின்ட்களையும் தூண்டுகின்றன. மோடலின் கண்டெய்னருக்கு contain: paint; பயன்படுத்துவதன் மூலம், ரீபெயின்ட்களை மோடலுக்கு மட்டுமே கட்டுப்படுத்தலாம், இதன் விளைவாக மென்மையான மாற்றம் மற்றும் மேம்பட்ட செயல்திறன் கிடைக்கும்.

            
<div class="modal" style="contain: paint;">
  ...content...
</div>

            

              
                Copy
              
            
          

3. மூன்றாம் தரப்பு விட்ஜெட்டுகளைத் தனிமைப்படுத்துதல்

சமூக ஊடக ஊட்டங்கள் அல்லது விளம்பர பேனர்கள் போன்ற மூன்றாம் தரப்பு விட்ஜெட்டுகள், பெரும்பாலும் எதிர்பாராத ஸ்டைலிங் முரண்பாடுகள் அல்லது செயல்திறன் சிக்கல்களை அறிமுகப்படுத்தலாம். விட்ஜெட்டின் கண்டெய்னருக்கு contain: style; பயன்படுத்துவதன் மூலம், அதன் ஸ்டைல்களைத் தனிமைப்படுத்தி, உங்கள் தளத்தின் மற்ற பகுதிகளைப் பாதிப்பதைத் தடுக்கலாம். கூடுதலாக, கூடுதல் செயல்திறன் நன்மைகளுக்கு contain: layout; மற்றும் contain: paint; பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

            
<div class="widget-container" style="contain: style layout paint;">
  ...widget code...
</div>

            

              
                Copy
              
            
          

4. நீண்ட பக்கங்களில் ஸ்க்ரோல் செயல்திறனை மேம்படுத்துதல்

பல பிரிவுகளைக் கொண்ட நீண்ட பக்கங்கள் மோசமான ஸ்க்ரோல் செயல்திறனால் பாதிக்கப்படலாம். தனிப்பட்ட பிரிவுகளுக்கு contain: paint; அல்லது contain: content; பயன்படுத்துவதன் மூலம், ஸ்க்ரோலிங்கின் போது ரெண்டரிங்கை மேம்படுத்த பிரவுசருக்கு உதவலாம்.

            
<section style="contain: paint;">
  ...content...
</section>

            

              
                Copy
              
            
          

5. டைனமிக் உள்ளடக்கப் பகுதிகளை நிர்வகித்தல்

கருத்துப் பகுதிகள், ஷாப்பிங் கார்ட்கள் அல்லது நிகழ்நேர தரவுக் காட்சிகள் போன்ற டைனமிக் உள்ளடக்கங்களைக் கொண்ட பகுதிகள் contain: size;, contain: layout; மற்றும் contain: paint; ஆகியவற்றிலிருந்து பயனடையலாம். இது உள்ளடக்க மாற்றங்களை அந்தப் பகுதிக்குத் தனிமைப்படுத்துகிறது, அவை முழுப் பக்கத்தின் ரீஃப்ளோக்கள் அல்லது ரீபெயின்ட்களை ஏற்படுத்துவதைத் தடுக்கிறது.

            
<div class="dynamic-area" style="contain: size layout paint;">
  ...dynamic content...
</div>

            

              
                Copy
              
            
          

CSS கண்டெய்ன்மென்ட்டைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

CSS கண்டெய்ன்மென்ட்டை திறம்படப் பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• contain: content; அல்லது contain: strict; உடன் தொடங்கவும்: எந்த குறிப்பிட்ட கண்டெய்ன்மென்ட் மதிப்புகளைப் பயன்படுத்துவது என்று உங்களுக்குத் தெரியாதபோது, contain: content; அல்லது contain: strict; உடன் தொடங்கவும். இந்த சுருக்கெழுத்துக்கள் ஒரு நல்ல தொடக்கப் புள்ளியை வழங்குகின்றன மற்றும் ஒரு விரிவான அளவிலான தனிமைப்படுத்தலை வழங்குகின்றன.
• செயல்திறனை அளவிடவும்: கண்டெய்ன்மென்ட்டைப் பயன்படுத்துவதன் செயல்திறன் தாக்கத்தை அளவிட பிரவுசர் டெவலப்பர் கருவிகளைப் பயன்படுத்தவும். கண்டெய்ன்மென்ட் மிகப்பெரிய நன்மைகளை வழங்கும் பகுதிகளை அடையாளம் காணவும். Chrome DevTools' Performance tab போன்ற கருவிகள் ரீபெயின்ட் மற்றும் லேஅவுட் தடைகளை அடையாளம் காண உதவும்.
• அதிகப்படியான கண்டெய்ன்மென்ட்டைத் தவிர்க்கவும்: கண்டெய்ன்மென்ட்டை கண்மூடித்தனமாகப் பயன்படுத்த வேண்டாம். அதிகப்படியான கண்டெய்ன்மென்ட் சில நேரங்களில் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும் அல்லது ரெண்டரிங்கை மேம்படுத்த பிரவுசரின் திறனைத் தடுக்கலாம். உண்மையிலேயே தேவைப்படும் இடத்தில் மட்டுமே கண்டெய்ன்மென்ட்டைப் பயன்படுத்தவும்.
• முழுமையாகச் சோதிக்கவும்: கண்டெய்ன்மென்ட்டைப் பயன்படுத்திய பிறகு உங்கள் வலைத்தளத்தை முழுமையாகச் சோதித்து, அது எந்த காட்சிப் பிழைகள் அல்லது செயல்பாட்டுச் சிக்கல்களை அறிமுகப்படுத்தவில்லை என்பதை உறுதிப்படுத்தவும். கிராஸ்-பிரவுசர் இணக்கத்தன்மையை உறுதிப்படுத்த வெவ்வேறு பிரவுசர்கள் மற்றும் சாதனங்களில் சோதிக்கவும்.
• பிரவுசர் இணக்கத்தன்மையைக் கருத்தில் கொள்ளுங்கள்: CSS கண்டெய்ன்மென்ட் நவீன பிரவுசர்களால் பரவலாக ஆதரிக்கப்பட்டாலும், பழைய பிரவுசர்களுடனான இணக்கத்தன்மையைக் கருத்தில் கொள்வது அவசியம். கண்டெய்ன்மென்ட்டை ஆதரிக்காத பிரவுசர்களுக்கு ஃபால்பேக் நடத்தையை வழங்க ஃபீச்சர் கண்டறிதல் அல்லது பாலிஃபில்களைப் பயன்படுத்தவும். (கீழேயுள்ள பிரவுசர் இணக்கத்தன்மை பகுதியைப் பார்க்கவும்)
• உங்கள் கண்டெய்ன்மென்ட் உத்தியை ஆவணப்படுத்தவும்: உங்கள் CSS குறியீட்டில் கண்டெய்ன்மென்ட்டின் பயன்பாட்டை தெளிவாக ஆவணப்படுத்தவும். இது மற்ற டெவலப்பர்கள் ஏன் கண்டெய்ன்மென்ட் பயன்படுத்தப்பட்டது என்பதைப் புரிந்துகொள்ளவும், தற்செயலாக அதை அகற்றுவதைத் தவிர்க்கவும் உதவும்.

பிரவுசர் இணக்கத்தன்மை

CSS கண்டெய்ன்மென்ட் Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன பிரவுசர்களால் பரவலாக ஆதரிக்கப்படுகிறது. இருப்பினும், பழைய பிரவுசர்களுக்கான ஆதரவு குறைவாகவோ அல்லது இல்லாமலோ இருக்கலாம். CSS கண்டெய்ன்மென்ட்டைப் பயன்படுத்துவதற்கு முன்பு, உங்கள் பயனர்கள் பயன்படுத்த வாய்ப்புள்ள பிரவுசர்களால் அது ஆதரிக்கப்படுகிறதா என்பதை உறுதிப்படுத்த Can I use போன்ற வலைத்தளங்களில் உள்ள பிரவுசர் இணக்கத்தன்மை அட்டவணையைச் சரிபார்ப்பது அவசியம்.

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

மேம்பட்ட கண்டெய்ன்மென்ட் உத்திகள்

அடிப்படை கண்டெய்ன்மென்ட் மதிப்புகளுக்கு அப்பால், செயல்திறன் மற்றும் பராமரிப்புத்தன்மையை மேலும் மேம்படுத்த நீங்கள் பயன்படுத்தக்கூடிய மேம்பட்ட உத்திகள் உள்ளன.

1. பிற மேம்படுத்தல் நுட்பங்களுடன் கண்டெய்ன்மென்ட்டை இணைத்தல்

CSS கண்டெய்ன்மென்ட் மற்ற செயல்திறன் மேம்படுத்தல் நுட்பங்களுடன் இணைக்கப்படும்போது சிறப்பாகச் செயல்படுகிறது, அவை:

• DOM அளவைக் குறைத்தல்: DOM-ல் உள்ள எலிமெண்ட்டுகளின் எண்ணிக்கையைக் குறைப்பது ரெண்டரிங் செயல்திறனை கணிசமாக மேம்படுத்தும்.
• அனிமேஷன்களுக்கு CSS டிரான்ஸ்ஃபார்ம்கள் மற்றும் ஒபாசிட்டியைப் பயன்படுத்துதல்: மற்ற பண்புகளை அனிமேட் செய்வதை விட CSS டிரான்ஸ்ஃபார்ம்கள் மற்றும் ஒபாசிட்டியை அனிமேட் செய்வது பொதுவாக அதிக செயல்திறன் கொண்டது.
• ஈவென்ட் ஹேண்ட்லர்களை டிபவுன்சிங் மற்றும் த்ராட்லிங் செய்தல்: ஈவென்ட் ஹேண்ட்லர் செயல்படுத்தப்படும் அதிர்வெண்ணைக் கட்டுப்படுத்துவது அதிகப்படியான லேஅவுட் மற்றும் ரீபெயின்ட் செயல்பாடுகளைத் தடுக்கலாம்.
• படங்கள் மற்றும் பிற சொத்துக்களை லேஸி லோடிங் செய்தல்: படங்கள் மற்றும் பிற சொத்துக்கள் தேவைப்படும்போது மட்டும் ஏற்றுவது ஆரம்ப பக்க ஏற்றுதல் நேரத்தைக் குறைக்கும்.

2. வெப் காம்போனென்ட்ஸ்களுடன் கண்டெய்ன்மென்ட்டைப் பயன்படுத்துதல்

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

3. டைனமிக் கண்டெய்ன்மென்ட்

சில சந்தர்ப்பங்களில், சில நிபந்தனைகளின் அடிப்படையில் நீங்கள் டைனமிக்காக கண்டெய்ன்மென்ட்டைப் பயன்படுத்தவோ அல்லது அகற்றவோ வேண்டியிருக்கலாம். எடுத்துக்காட்டாக, பக்கத்தின் ஒரு பகுதி வியூபோர்ட்டில் தெரியும் போது மட்டுமே அதற்கு contain: paint; ஐப் பயன்படுத்தலாம்.

            
const element = document.querySelector('.my-element');

function checkVisibility() {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );

  if (isVisible) {
    element.style.contain = 'paint';
  } else {
    element.style.contain = 'none';
  }
}

window.addEventListener('scroll', checkVisibility);
window.addEventListener('resize', checkVisibility);
checkVisibility(); // Initial check

            

              
                Copy
              
            
          

CSS கண்டெய்ன்மென்ட்டின் எதிர்காலம்

CSS கண்டெய்ன்மென்ட் ஒரு வளர்ந்து வரும் தொழில்நுட்பமாகும். வலை பிரவுசர்கள் மற்றும் CSS விவரக்குறிப்புகள் தொடர்ந்து முன்னேறும்போது, கண்டெய்ன்மென்ட் மாதிரியில் மேலும் செம்மைப்படுத்துதல்கள் மற்றும் மேம்பாடுகளை நாம் எதிர்பார்க்கலாம். எதிர்கால மேம்பாடுகள் பின்வருவனவற்றை உள்ளடக்கியிருக்கலாம்:

• மேலும் நுணுக்கமான கண்டெய்ன்மென்ட் மதிப்புகள்: லேஅவுட், ஸ்டைல் மற்றும் பெயின்ட் தனிமைப்படுத்தல் மீது மேலும் நுண்ணிய கட்டுப்பாட்டை வழங்கும் புதிய கண்டெய்ன்மென்ட் மதிப்புகள்.
• மேம்படுத்தப்பட்ட பிரவுசர் மேம்படுத்தல்கள்: பிரவுசர்கள் CSS கண்டெய்ன்மென்ட்டை அடிப்படையாகக் கொண்ட மேலும் அதிநவீன மேம்படுத்தல் உத்திகளை உருவாக்கலாம், இது இன்னும் ಹೆಚ್ಚಿನ செயல்திறன் ஆதாயங்களுக்கு வழிவகுக்கும்.
• பிற CSS அம்சங்களுடன் ஒருங்கிணைப்பு: CSS கிரிட் மற்றும் ஃப்ளெக்ஸ்பாக்ஸ் போன்ற பிற CSS அம்சங்களுடன் தடையற்ற ஒருங்கிணைப்பு, மேலும் சக்திவாய்ந்த மற்றும் திறமையான லேஅவுட்களை உருவாக்க.

உலகளாவிய பரிசீலனைகள்

CSS கண்டெய்ன்மென்ட்டைச் செயல்படுத்தும்போது, வலைத்தள செயல்திறன் மற்றும் பயனர் அனுபவத்தைப் பாதிக்கக்கூடிய உலகளாவிய காரணிகளைக் கருத்தில் கொள்வது முக்கியம்:

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

முடிவுரை

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

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

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