CSS கண்டெய்னர் குவெரி பாலிஃபில்: உலாவிகளுக்கிடையே ரெஸ்பான்சிவ் இடைவெளியை இணைத்தல்

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

CSS கண்டெய்னர் குவெரிகள் என்றால் என்ன?

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

CSS இல் ஒரு கண்டெய்னர் குவெரியின் அடிப்படை எடுத்துக்காட்டு இங்கே:

            
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
}

            

              
                Copy
              
            
          

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

சவால்: உலாவி இணக்கத்தன்மை

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

தீர்வு: கண்டெய்னர் குவெரி பாலிஃபில்

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

சரியான பாலிஃபில்லைத் தேர்ந்தெடுப்பது

பல கண்டெய்னர் குவெரி பாலிஃபில்கள் கிடைக்கின்றன. சில பிரபலமான விருப்பங்கள் பின்வருமாறு:

• EQCSS: இது ஒரு ஜாவாஸ்கிரிப்ட் லைப்ரரி ஆகும், இது CSS-ஐ எலிமெண்ட் குவெரிகள் மற்றும் பலவற்றோடு விரிவுபடுத்துகிறது.
• container-query-polyfill: இது CSS கண்டெய்னர் குவெரிகளுக்கான ஒரு பிரத்யேக பாலிஃபில் ஆகும், இது பொதுவாக ஒரு சிறிய தடம் கொண்டது மற்றும் கண்டெய்னர் குவெரி விவரக்குறிப்பை செயல்படுத்துவதில் மட்டுமே கவனம் செலுத்துகிறது.
• polyfill-library: இது ஒரு மெட்டா-பாலிஃபில் சேவையாகும், இது பயனர் முகவர் கண்டறிதலின் அடிப்படையில் பாலிஃபில்களை வழங்குகிறது, தேவையான பாலிஃபில்கள் மட்டுமே ஏற்றப்படுவதை உறுதி செய்கிறது.

சிறந்த தேர்வு உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகள் மற்றும் தேவைகளைப் பொறுத்தது. கருத்தில் கொள்ள வேண்டியவை:

• தொகுப்பு அளவு: பெரிய பாலிஃபில்கள் பக்க ஏற்றுதல் நேரத்தை அதிகரிக்கக்கூடும், இது பயனர் அனுபவத்தை எதிர்மறையாக பாதிக்கலாம், குறிப்பாக மொபைல் சாதனங்களில் அல்லது மெதுவான இணைய இணைப்புகள் உள்ள பகுதிகளில்.
• செயல்திறன்: பாலிஃபில்கள் ஒரு செயல்திறன் மேல்நிலையை அறிமுகப்படுத்தலாம், ஏனெனில் அவை CSS விதிகளை அலசி വ്യാഖ്യാനிக்க வேண்டும்.
• சார்புகள்: சில பாலிஃபில்கள் பிற லைப்ரரிகளைச் சார்ந்திருக்கலாம், இது உங்கள் திட்டத்தில் சிக்கலைச் சேர்க்கும்.
• அம்சங்களின் தொகுப்பு: சில பாலிஃபில்கள் அடிப்படை கண்டெய்னர் குவெரி ஆதரவுக்கு அப்பால் கூடுதல் அம்சங்களை வழங்குகின்றன.

குறைந்தபட்ச மேல்நிலையுடன் கூடிய எளிய கண்டெய்னர் குவெரி ஆதரவுக்கு, container-query-polyfill பெரும்பாலும் ஒரு நல்ல தேர்வாகும். உங்களுக்கு மேலும் மேம்பட்ட அம்சங்கள் தேவைப்பட்டால் அல்லது ஏற்கனவே பிற நோக்கங்களுக்காக EQCSS-ஐப் பயன்படுத்தினால், அது ஒரு பொருத்தமான விருப்பமாக இருக்கலாம்.

கண்டெய்னர் குவெரி பாலிஃபில்லை செயல்படுத்துதல்

உங்கள் திட்டத்தில் container-query-polyfill ஐ செயல்படுத்துவதற்கான படிப்படியான வழிகாட்டி இங்கே:

1. நிறுவல்

நீங்கள் npm அல்லது yarn ஐப் பயன்படுத்தி பாலிஃபில்லை நிறுவலாம்:

            
npm install container-query-polyfill

            

              
                Copy
              
            
          

அல்லது:

            
yarn add container-query-polyfill

            

              
                Copy
              
            
          

2. இறக்குமதி மற்றும் துவக்கம்

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

            
import containerQueryPolyfill from 'container-query-polyfill';

containerQueryPolyfill();

            

              
                Copy
              
            
          

3. விருப்பத்தேர்வு: நிபந்தனைக்குட்பட்ட ஏற்றுதல்

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

            
if (!('container' in document.documentElement.style)) {
  import('container-query-polyfill').then(module => {
    module.default();
  });
}

            

              
                Copy
              
            
          

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

4. CSS இல் கண்டெய்னர் குவெரிகளை எழுதுதல்

இப்போது நீங்கள் வழக்கமாக செய்வது போலவே உங்கள் CSS இல் கண்டெய்னர் குவெரிகளை எழுதலாம்:

            
.container {
  container-type: inline-size; /* Or 'size' for both width and height */
}

.item {
  background-color: lightblue;
  padding: 10px;
}

@container (min-width: 300px) {
  .item {
    background-color: lightgreen;
  }
}

@container (min-width: 600px) {
  .item {
    background-color: lightcoral;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .container என்பது குவெரிக்கான உள்ளடக்க சூழலை வரையறுக்கிறது. container-type: inline-size; என்ற பண்பு, குவெரி கண்டெய்னரின் இன்லைன் அளவை (கிடைமட்ட எழுத்து முறைகளில் அகலம்) அடிப்படையாகக் கொண்டிருக்க வேண்டும் என்பதைக் குறிப்பிடுகிறது. .item உறுப்பு கண்டெய்னரின் அகலத்தைப் பொறுத்து அதன் பின்னணி நிறத்தை மாற்றும்.

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

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

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

1. தகவமைக்கக்கூடிய ஊடுருவல் மெனுக்கள்

கண்டெய்னர் குவெரிகள் வெவ்வேறு கண்டெய்னர் அளவுகளுக்கு ஏற்றவாறு ஊடுருவல் மெனுக்களை உருவாக்கப் பயன்படும். எடுத்துக்காட்டாக, ஒரு கிடைமட்ட ஊடுருவல் மெனு ஒரு குறுகிய பக்கப்பட்டியில் வைக்கும்போது ஒரு ஹாம்பர்கர் மெனுவாக சுருங்கலாம்.

            
.nav-container {
  container-type: inline-size;
  display: flex;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: 10px;
}

.hamburger-button {
  display: none;
  cursor: pointer;
}

@container (max-width: 500px) {
  .nav-list {
    display: none;
  }

  .hamburger-button {
    display: block;
  }
}

            

              
                Copy
              
            
          

கண்டெய்னர் அகலம் 500 பிக்சல்களுக்குக் குறைவாக இருக்கும்போது ஊடுருவல் பட்டியல் எவ்வாறு மறைக்கப்பட்டு ஒரு ஹாம்பர்கர் பொத்தான் காட்டப்படுகிறது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது.

2. டைனமிக் தயாரிப்பு பட்டியல்கள்

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

            
.product-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product-card {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-description {
  display: none;
}

@container (min-width: 400px) {
  .product-card {
    width: calc(50% - 10px);
  }

  .product-description {
    display: block;
  }
}

            

              
                Copy
              
            
          

கண்டெய்னர் அகலம் 400 பிக்சல்களுக்கு மேல் இருக்கும்போது தயாரிப்பு அட்டை அகலம் எவ்வாறு சரிசெய்யப்பட்டு தயாரிப்பு விளக்கம் காட்டப்படுகிறது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது.

3. ரெஸ்பான்சிவ் அச்சுக்கலை

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

            
.text-container {
  container-type: inline-size;
  font-size: 16px;
  line-height: 1.5;
}

@container (min-width: 600px) {
  .text-container {
    font-size: 18px;
    line-height: 1.6;
  }
}

@container (min-width: 900px) {
  .text-container {
    font-size: 20px;
    line-height: 1.7;
  }
}

            

              
                Copy
              
            
          

கண்டெய்னர் அகலம் அதிகரிக்கும்போது எழுத்துரு அளவு மற்றும் வரி உயரம் எவ்வாறு அதிகரிக்கப்படுகிறது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது.

சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) பரிசீலனைகள்

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

• உரை நீளம்: வெவ்வேறு மொழிகளில் கணிசமாக வேறுபட்ட உரை நீளங்கள் இருக்கலாம். எடுத்துக்காட்டாக, ஜெர்மன் வார்த்தைகள் ஆங்கில வார்த்தைகளை விட நீளமாக இருக்கும். இது உங்கள் கூறுகளின் தளவமைப்பையும் உங்கள் கண்டெய்னர் குவெரிகளின் செயல்திறனையும் பாதிக்கலாம். நீண்ட உரை சரங்களுக்கு இடமளிக்க உங்கள் கண்டெய்னர் குவெரிகளில் உள்ள பிரேக் பாயிண்ட்களை நீங்கள் சரிசெய்ய வேண்டியிருக்கலாம்.
• வலமிருந்து இடமாக (RTL) மொழிகள்: அரபு மற்றும் ஹீப்ரு போன்ற சில மொழிகள் வலமிருந்து இடமாக எழுதப்படுகின்றன. RTL மொழிகளுக்கான தளவமைப்புகளை வடிவமைக்கும்போது, உங்கள் கூறுகளும் கண்டெய்னர் குவெரிகளும் சரியாகப் பிரதிபலிக்கப்படுவதை உறுதி செய்ய வேண்டும். CSS தர்க்கரீதியான பண்புகள் (எ.கா., margin-left என்பதற்குப் பதிலாக margin-inline-start) இதற்கு மிகவும் உதவியாக இருக்கும்.
• கலாச்சார வேறுபாடுகள்: வெவ்வேறு கலாச்சாரங்களுக்கு காட்சி வடிவமைப்பு மற்றும் தளவமைப்பில் வெவ்வேறு விருப்பங்கள் இருக்கலாம். எடுத்துக்காட்டாக, சில கலாச்சாரங்கள் மிகவும் குறைந்தபட்ச வடிவமைப்புகளை விரும்புகின்றன, மற்றவை அதிக அலங்கார வடிவமைப்புகளை விரும்புகின்றன. இந்த கலாச்சார விருப்பங்களைப் பிரதிபலிக்க உங்கள் ஸ்டைல்களையும் கண்டெய்னர் குவெரிகளையும் நீங்கள் சரிசெய்ய வேண்டியிருக்கலாம்.
• எண் மற்றும் தேதி வடிவங்கள்: வெவ்வேறு பிராந்தியங்களில் எண் மற்றும் தேதி வடிவங்கள் கணிசமாக வேறுபடுகின்றன. உங்கள் கூறுகள் எண்கள் அல்லது தேதிகளைக் காட்டினால், அவை பயனரின் இருப்பிடத்திற்கு சரியாக வடிவமைக்கப்பட்டுள்ளதை உறுதி செய்ய வேண்டும். இது கண்டெய்னர்களுக்குள் உள்ள உள்ளடக்கத்துடன் அதிகம் தொடர்புடையது, ஆனால் குறிப்பாக நீண்ட தேதி சரங்களுடன் ஒட்டுமொத்த அளவைப் பாதிக்கலாம்.
• வெவ்வேறு இருப்பிடங்களுடன் சோதனை: உங்கள் கண்டெய்னர் குவெரிகளும் தளவமைப்புகளும் வெவ்வேறு பிராந்தியங்களைச் சேர்ந்த பயனர்களுக்கு நன்றாக வேலை செய்வதை உறுதிப்படுத்த உங்கள் வலைத்தளத்தை வெவ்வேறு இருப்பிடங்களுடன் முழுமையாக சோதிக்கவும்.

எடுத்துக்காட்டாக, ஒரு விலையைக் காட்டும் ஒரு தயாரிப்பு அட்டையைக் கவனியுங்கள். அமெரிக்காவில், விலை "$19.99" ஆகக் காட்டப்படலாம். ஜெர்மனியில், அது "19,99 $" ஆகக் காட்டப்படலாம். வெவ்வேறு நீளம் மற்றும் நாணய சின்னத்தின் இடம் அட்டையின் தளவமைப்பைப் பாதிக்கலாம், இதற்கு வெவ்வேறு கண்டெய்னர் குவெரி பிரேக் பாயிண்ட்கள் தேவைப்படலாம். நெகிழ்வான தளவமைப்புகள் (எ.கா., flexbox அல்லது grid) மற்றும் சார்பு அலகுகள் (எ.கா., em அல்லது rem) பயன்படுத்துவது இந்த சிக்கல்களைத் தணிக்க உதவும்.

அணுகல்தன்மை பரிசீலனைகள்

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

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

முடிவுரை

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

கண்டெய்னர் அடிப்படையிலான ரெஸ்பான்சிவ் தன்மையின் சக்தியைத் தழுவி, உங்கள் வலை உருவாக்கத் திறன்களை அடுத்த கட்டத்திற்கு உயர்த்துங்கள்!