സിഎസ്എസ് കണ്ടെയ്നർ ക്വറി പോളിഫിൽ: ബ്രൗസറുകളിലുടനീളമുള്ള റെസ്‌പോൺസീവ് വിടവ് നികത്തുന്നു

ആധുനിക വെബ് ഡെവലപ്‌മെന്റിന്റെ ഒരു അടിസ്ഥാന ശിലയാണ് റെസ്‌പോൺസീവ് ഡിസൈൻ, വെബ്സൈറ്റുകൾ വിവിധ സ്ക്രീൻ വലുപ്പങ്ങൾക്കും ഉപകരണങ്ങൾക്കും അനുയോജ്യമായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു. വ്യൂപോർട്ട് വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ള മീഡിയ ക്വറികൾ പരമ്പരാഗത സമീപനമാണെങ്കിലും, സിഎസ്എസ് കണ്ടെയ്നർ ക്വറികൾ റെസ്‌പോൺസീവ്നസ് നേടുന്നതിന് കൂടുതൽ സൂക്ഷ്മവും ഘടക-കേന്ദ്രീകൃതവുമായ മാർഗ്ഗം വാഗ്ദാനം ചെയ്യുന്നു. എന്നിരുന്നാലും, കണ്ടെയ്നർ ക്വറികൾക്കുള്ള ബ്രൗസർ പിന്തുണ ഇതുവരെ സാർവത്രികമായിട്ടില്ല. ഇവിടെയാണ് കണ്ടെയ്നർ ക്വറി പോളിഫിൽ സഹായത്തിനെത്തുന്നത്.

എന്താണ് സിഎസ്എസ് കണ്ടെയ്നർ ക്വറികൾ?

വ്യൂപോർട്ട് വലുപ്പത്തെ ആശ്രയിക്കുന്ന മീഡിയ ക്വറികളിൽ നിന്ന് വ്യത്യസ്തമായി, കണ്ടെയ്നർ ക്വറികൾ മൊത്തത്തിലുള്ള സ്ക്രീൻ വലുപ്പം പരിഗണിക്കാതെ, അവയുടെ കണ്ടെയ്നർ എലമെന്റിന്റെ അളവുകൾ അടിസ്ഥാനമാക്കി സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു വെബ്സൈറ്റിലെ വിവിധ സന്ദർഭങ്ങളുമായി പൊരുത്തപ്പെടുന്ന പുനരുപയോഗിക്കാവുന്ന ഘടകങ്ങൾ നിർമ്മിക്കുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഉദാഹരണത്തിന്, ഒരു പ്രൊഡക്റ്റ് കാർഡ് വീതിയുള്ള പ്രധാന ഉള്ളടക്ക ഏരിയയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഇടുങ്ങിയ സൈഡ്‌ബാറിൽ സ്ഥാപിക്കുമ്പോൾ വ്യത്യസ്തമായി പ്രദർശിപ്പിക്കാൻ കഴിയും. ഒരു വാർത്താ അഗ്രഗേറ്റർ വെബ്സൈറ്റ് സങ്കൽപ്പിക്കുക: ഒരു വാർത്താ ഘടകം പ്രധാന പേജിൽ ഒരു വലിയ ചിത്രവും പൂർണ്ണ തലക്കെട്ടും കാണിച്ചേക്കാം, പക്ഷേ ഒരു സൈഡ്‌ബാറിനുള്ളിൽ ചെറുതാക്കിയ തലക്കെട്ടോടുകൂടി ഒരു ചെറിയ ഫോർമാറ്റിലേക്ക് ചുരുങ്ങാം. അത്തരം അഡാപ്റ്റബിൾ കമ്പോണന്റ് ഡിസൈനിന് കണ്ടെയ്നർ ക്വറികൾ സഹായിക്കുന്നു.

സിഎസ്എസ്-ലെ കണ്ടെയ്നർ ക്വറിയുടെ ഒരു അടിസ്ഥാന ഉദാഹരണം ഇതാ:

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, @container നിയമത്തിനുള്ളിലെ സ്റ്റൈലുകൾ .card എന്ന ക്ലാസുള്ള എലമെന്റുകളിൽ അവയുടെ കണ്ടെയ്നർ എലമെന്റിന് കുറഞ്ഞത് 400 പിക്സൽ വീതിയുണ്ടെങ്കിൽ മാത്രമേ പ്രയോഗിക്കപ്പെടുകയുള്ളൂ. കണ്ടെയ്നറിന്റെ അളവുകളെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത ലേഔട്ടുകളും സ്റ്റൈലുകളും നിർവചിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് കൂടുതൽ ഫ്ലെക്സിബിളും പുനരുപയോഗിക്കാവുന്നതുമായ കമ്പോണന്റുകളിലേക്ക് നയിക്കുന്നു.

വെല്ലുവിളി: ബ്രൗസർ അനുയോജ്യത

കണ്ടെയ്നർ ക്വറികൾക്ക് പ്രചാരം ലഭിക്കുന്നുണ്ടെങ്കിലും, എല്ലാ പ്രധാന ബ്രൗസറുകളിലും പൂർണ്ണ പിന്തുണ ഇപ്പോഴും പുരോഗമിച്ചുകൊണ്ടിരിക്കുന്ന ഒരു കാര്യമാണ്. ഇതിനർത്ഥം, ചില ഉപയോക്താക്കൾക്ക് പഴയ ബ്രൗസറുകളിലോ അല്ലെങ്കിൽ ഈ ഫീച്ചർ നേറ്റീവ് ആയി നടപ്പിലാക്കിയിട്ടില്ലാത്തവയിലോ ഉദ്ദേശിച്ച റെസ്‌പോൺസീവ് സ്വഭാവം അനുഭവിക്കാൻ കഴിഞ്ഞേക്കില്ല. ഈ പൊരുത്തക്കേട് ഒരു മോശം ഉപയോക്തൃ അനുഭവത്തിനും വിവിധ പ്ലാറ്റ്‌ഫോമുകളിലും ഉപകരണങ്ങളിലും പൊരുത്തമില്ലാത്ത ദൃശ്യ ലേഔട്ടുകൾക്കും ഇടയാക്കും. ഉദാഹരണത്തിന്, ബ്രൗസറുകൾക്കായി വേഗത കുറഞ്ഞ അപ്‌ഡേറ്റ് സൈക്കിളുകളുള്ള പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾക്കോ അല്ലെങ്കിൽ പഴയ എന്റർപ്രൈസ് സോഫ്റ്റ്‌വെയർ ഉപയോഗിക്കുന്ന ഓർഗനൈസേഷനുകൾക്കോ ഉദ്ദേശിച്ച അനുഭവം ആക്‌സസ് ചെയ്യാൻ കഴിഞ്ഞേക്കില്ല. ഇത് പരിഹരിക്കുന്നതിൽ പരാജയപ്പെടുന്നത് വിവരങ്ങളിലേക്കുള്ള അസമമായ പ്രവേശനത്തിന് കാരണമാകും.

പരിഹാരം: കണ്ടെയ്നർ ക്വറി പോളിഫിൽ

ഒരു പോളിഫിൽ എന്നത് പഴയ ബ്രൗസറുകളിൽ ഇല്ലാത്ത പ്രവർത്തനം നൽകുന്ന ഒരു കോഡ് (സാധാരണയായി ജാവാസ്ക്രിപ്റ്റ്) ആണ്. കണ്ടെയ്നർ ക്വറികളുടെ കാര്യത്തിൽ, നേറ്റീവ് പിന്തുണയില്ലാത്ത ബ്രൗസറുകളെ @container നിയമങ്ങൾക്കുള്ളിൽ നിർവചിച്ചിരിക്കുന്ന സ്റ്റൈലുകൾ മനസ്സിലാക്കാനും പ്രയോഗിക്കാനും ഒരു പോളിഫിൽ പ്രാപ്തമാക്കുന്നു. ഒരു പോളിഫിൽ ഉപയോഗിക്കുന്നത് ഡെവലപ്പർമാർക്ക് അവരുടെ ഉപയോക്തൃ അടിത്തറയുടെ വലിയൊരു ഭാഗത്തിന് അനുയോജ്യത നഷ്ടപ്പെടുത്താതെ, ഇന്ന് കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കാൻ അനുവദിക്കുന്നു.

ശരിയായ പോളിഫിൽ തിരഞ്ഞെടുക്കുന്നു

നിരവധി കണ്ടെയ്നർ ക്വറി പോളിഫില്ലുകൾ ലഭ്യമാണ്. പ്രചാരമുള്ള ചില ഓപ്ഷനുകൾ ഇവയാണ്:

• EQCSS: എലമെന്റ് ക്വറികളും മറ്റും ഉപയോഗിച്ച് സിഎസ്എസ് വികസിപ്പിക്കുന്ന ഒരു ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി.
• container-query-polyfill: സിഎസ്എസ് കണ്ടെയ്നർ ക്വറികൾക്കായി സമർപ്പിച്ചിരിക്കുന്ന ഒരു പോളിഫിൽ, ഇതിന് സാധാരണയായി ചെറിയ ഫുട്പ്രിന്റ് ഉണ്ട്, കൂടാതെ കണ്ടെയ്നർ ക്വറി സ്പെസിഫിക്കേഷൻ നടപ്പിലാക്കുന്നതിൽ മാത്രം ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു.
• polyfill-library: യൂസർ ഏജന്റ് കണ്ടെത്തലിനെ അടിസ്ഥാനമാക്കി പോളിഫില്ലുകൾ നൽകുന്ന ഒരു മെറ്റാ-പോളിഫിൽ സേവനം, ആവശ്യമായ പോളിഫില്ലുകൾ മാത്രം ലോഡ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ പ്രത്യേക ആവശ്യകതകളെയും നിബന്ധനകളെയും ആശ്രയിച്ചിരിക്കും മികച്ച തിരഞ്ഞെടുപ്പ്. പരിഗണനകളിൽ ഉൾപ്പെടുന്നവ:

• ബണ്ടിൽ വലുപ്പം: വലിയ പോളിഫില്ലുകൾ പേജ് ലോഡ് സമയം വർദ്ധിപ്പിക്കും, ഇത് ഉപയോക്തൃ അനുഭവത്തെ പ്രതികൂലമായി ബാധിക്കും, പ്രത്യേകിച്ചും മൊബൈൽ ഉപകരണങ്ങളിലോ വേഗത കുറഞ്ഞ ഇന്റർനെറ്റ് കണക്ഷനുകളുള്ള പ്രദേശങ്ങളിലോ.
• പ്രകടനം: പോളിഫില്ലുകൾക്ക് ഒരു പ്രകടന ഓവർഹെഡ് ഉണ്ടാക്കാൻ കഴിയും, കാരണം അവ സിഎസ്എസ് നിയമങ്ങൾ പാഴ്‌സ് ചെയ്യുകയും വ്യാഖ്യാനിക്കുകയും ചെയ്യേണ്ടതുണ്ട്.
• ഡിപൻഡൻസികൾ: ചില പോളിഫില്ലുകൾ മറ്റ് ലൈബ്രറികളെ ആശ്രയിച്ചിരിക്കാം, ഇത് നിങ്ങളുടെ പ്രോജക്റ്റിന് സങ്കീർണ്ണത വർദ്ധിപ്പിക്കും.
• ഫീച്ചർ സെറ്റ്: ചില പോളിഫില്ലുകൾ അടിസ്ഥാന കണ്ടെയ്നർ ക്വറി പിന്തുണയ്‌ക്ക് പുറമെ അധിക ഫീച്ചറുകൾ വാഗ്ദാനം ചെയ്യുന്നു.

കുറഞ്ഞ ഓവർഹെഡുള്ള ലളിതമായ കണ്ടെയ്നർ ക്വറി പിന്തുണയ്ക്ക്, 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
              
            
          

ഈ കോഡ് സ്നിപ്പെറ്റ് ബ്രൗസർ സിഎസ്എസിലെ container പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കുന്നു. ഇല്ലെങ്കിൽ, അത് ഡൈനാമിക് ആയി പോളിഫിൽ ഇമ്പോർട്ട് ചെയ്ത് ഇനിഷ്യലൈസ് ചെയ്യുന്നു. ഈ സമീപനം ഇതിനകം നേറ്റീവ് പിന്തുണയുള്ള ബ്രൗസറുകൾക്കായി അനാവശ്യമായി പോളിഫിൽ ലോഡ് ചെയ്യുന്നത് ഒഴിവാക്കുന്നു, അങ്ങനെ പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നു.

4. സിഎസ്എസിൽ കണ്ടെയ്നർ ക്വറികൾ എഴുതുന്നു

ഇപ്പോൾ നിങ്ങൾക്ക് സാധാരണ ചെയ്യുന്നതുപോലെ നിങ്ങളുടെ സിഎസ്എസിൽ കണ്ടെയ്നർ ക്വറികൾ എഴുതാൻ കഴിയും:

            
.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 ഭാഷകൾക്കായി ലേഔട്ടുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ, നിങ്ങളുടെ ഘടകങ്ങളും കണ്ടെയ്നർ ക്വറികളും ശരിയായി മിറർ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കണം. സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടികൾ (ഉദാഹരണത്തിന്, margin-left എന്നതിന് പകരം margin-inline-start) ഇതിന് വളരെ സഹായകമാകും.
• സാംസ്കാരിക വ്യത്യാസങ്ങൾ: വ്യത്യസ്ത സംസ്കാരങ്ങൾക്ക് ദൃശ്യ രൂപകൽപ്പനയിലും ലേഔട്ടിലും വ്യത്യസ്ത മുൻഗണനകൾ ഉണ്ടായിരിക്കാം. ഉദാഹരണത്തിന്, ചില സംസ്കാരങ്ങൾ മിനിമലിസ്റ്റ് ഡിസൈനുകൾ ഇഷ്ടപ്പെടുമ്പോൾ, മറ്റുള്ളവർ കൂടുതൽ അലങ്കരിച്ച ഡിസൈനുകൾ ഇഷ്ടപ്പെടുന്നു. ഈ സാംസ്കാരിക മുൻഗണനകൾ പ്രതിഫലിപ്പിക്കുന്നതിന് നിങ്ങളുടെ സ്റ്റൈലുകളും കണ്ടെയ്നർ ക്വറികളും ക്രമീകരിക്കേണ്ടി വന്നേക്കാം.
• നമ്പർ, തീയതി ഫോർമാറ്റുകൾ: വിവിധ പ്രദേശങ്ങളിൽ നമ്പർ, തീയതി ഫോർമാറ്റുകൾ കാര്യമായി വ്യത്യാസപ്പെട്ടിരിക്കുന്നു. നിങ്ങളുടെ ഘടകങ്ങൾ നമ്പറുകളോ തീയതികളോ പ്രദർശിപ്പിക്കുന്നുണ്ടെങ്കിൽ, അവ ഉപയോക്താവിന്റെ ലൊക്കേലിനായി ശരിയായി ഫോർമാറ്റ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കണം. ഇത് കണ്ടെയ്നറുകൾക്കുള്ളിലെ ഉള്ളടക്കവുമായി കൂടുതൽ ബന്ധപ്പെട്ടിരിക്കുന്നു, പക്ഷേ മൊത്തത്തിലുള്ള വലുപ്പത്തെ ബാധിച്ചേക്കാം, പ്രത്യേകിച്ച് നീളമുള്ള തീയതി സ്ട്രിംഗുകൾ ഉപയോഗിക്കുമ്പോൾ.
• വിവിധ ലൊക്കേലുകൾ ഉപയോഗിച്ച് ടെസ്റ്റ് ചെയ്യുക: നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറികളും ലേഔട്ടുകളും വിവിധ പ്രദേശങ്ങളിൽ നിന്നുള്ള ഉപയോക്താക്കൾക്ക് നന്നായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ വിവിധ ലൊക്കേലുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റ് സമഗ്രമായി പരിശോധിക്കുക.

ഉദാഹരണത്തിന്, ഒരു വില പ്രദർശിപ്പിക്കുന്ന ഒരു പ്രൊഡക്റ്റ് കാർഡ് പരിഗണിക്കുക. യുഎസ്-ൽ, വില "$19.99" എന്ന് പ്രദർശിപ്പിച്ചേക്കാം. ജർമ്മനിയിൽ, അത് "19,99 $" എന്ന് പ്രദർശിപ്പിച്ചേക്കാം. വ്യത്യസ്ത നീളവും കറൻസി ചിഹ്നത്തിന്റെ സ്ഥാനവും കാർഡിന്റെ ലേഔട്ടിനെ ബാധിച്ചേക്കാം, ഇതിന് വ്യത്യസ്ത കണ്ടെയ്നർ ക്വറി ബ്രേക്ക്‌പോയിന്റുകൾ ആവശ്യമായി വന്നേക്കാം. ഫ്ലെക്സിബിൾ ലേഔട്ടുകളും (ഉദാഹരണത്തിന്, ഫ്ലെക്സ്ബോക്സ് അല്ലെങ്കിൽ ഗ്രിഡ്) ആപേക്ഷിക യൂണിറ്റുകളും (ഉദാഹരണത്തിന്, em അല്ലെങ്കിൽ rem) ഉപയോഗിക്കുന്നത് ഈ പ്രശ്നങ്ങൾ ലഘൂകരിക്കാൻ സഹായിക്കും.

പ്രവേശനക്ഷമത പരിഗണനകൾ

കണ്ടെയ്നർ ക്വറികൾ നടപ്പിലാക്കുകയും ഒരു പോളിഫിൽ ഉപയോഗിക്കുകയും ചെയ്യുമ്പോൾ, പ്രവേശനക്ഷമത എല്ലായ്പ്പോഴും ഒരു പ്രധാന മുൻഗണനയായിരിക്കണം. നിങ്ങളുടെ റെസ്‌പോൺസീവ് ഡിസൈനുകൾ പ്രവേശനക്ഷമമാണെന്ന് ഉറപ്പാക്കുന്നതിനുള്ള ചില പരിഗണനകൾ ഇതാ:

• സെമാന്റിക് എച്ച്ടിഎംഎൽ: നിങ്ങളുടെ ഉള്ളടക്കം ഘടനാപരമാക്കാൻ സെമാന്റിക് എച്ച്ടിഎംഎൽ എലമെന്റുകൾ ഉപയോഗിക്കുക. ഇത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകൾക്ക് വ്യക്തവും യുക്തിസഹവുമായ ഒരു ഘടന നൽകുന്നു.
• ഫോക്കസ് മാനേജ്മെന്റ്: കണ്ടെയ്നർ ക്വറികളെ അടിസ്ഥാനമാക്കി ലേഔട്ട് മാറുമ്പോൾ ഫോക്കസ് ശരിയായി കൈകാര്യം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക. ഉപയോക്താക്കൾക്ക് കീബോർഡ് ഉപയോഗിച്ച് വെബ്സൈറ്റിൽ നാവിഗേറ്റ് ചെയ്യാൻ കഴിയണം, ഫോക്കസ് ഓർഡർ യുക്തിസഹവും സ്വാഭാവികവുമായിരിക്കണം.
• നിറങ്ങളുടെ കോൺട്രാസ്റ്റ്: കണ്ടെയ്നർ വലുപ്പമോ ഉപകരണമോ പരിഗണിക്കാതെ, ടെക്സ്റ്റിനും പശ്ചാത്തല നിറങ്ങൾക്കുമിടയിൽ മതിയായ വർണ്ണ കോൺട്രാസ്റ്റ് നിലനിർത്തുന്നുവെന്ന് ഉറപ്പാക്കുക.
• ടെക്സ്റ്റ് വലുപ്പം മാറ്റൽ: ലേഔട്ട് തകർക്കുകയോ ഉള്ളടക്കം നഷ്ടപ്പെടുകയോ ചെയ്യാതെ ടെക്സ്റ്റ് വലുപ്പം മാറ്റാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക. കണ്ടെയ്നർ ക്വറികൾ ഉപയോക്താക്കളെ അവരുടെ മുൻഗണനകൾക്കനുസരിച്ച് ടെക്സ്റ്റ് വലുപ്പം ക്രമീകരിക്കുന്നതിൽ നിന്ന് തടയരുത്.
• സഹായ സാങ്കേതികവിദ്യകൾ ഉപയോഗിച്ച് ടെസ്റ്റ് ചെയ്യുക: വികലാംഗരായ ഉപയോക്താക്കൾക്ക് ഇത് പ്രവേശനക്ഷമമാണെന്ന് ഉറപ്പാക്കാൻ സ്ക്രീൻ റീഡറുകളും മറ്റ് സഹായ സാങ്കേതികവിദ്യകളും ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റ് പരിശോധിക്കുക.

ഉപസംഹാരം

കൂടുതൽ ഫ്ലെക്സിബിളും പുനരുപയോഗിക്കാവുന്നതുമായ കമ്പോണന്റുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ശക്തമായ ഉപകരണമാണ് സിഎസ്എസ് കണ്ടെയ്നർ ക്വറികൾ. ബ്രൗസർ പിന്തുണ ഇപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുകയാണെങ്കിലും, കണ്ടെയ്നർ ക്വറി പോളിഫിൽ ഇന്ന് കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കുന്നതിനുള്ള വിശ്വസനീയമായ മാർഗ്ഗം നൽകുന്നു, ഇത് എല്ലാ ഉപയോക്താക്കൾക്കും സ്ഥിരമായ അനുഭവം ഉറപ്പാക്കുന്നു. ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന മികച്ച രീതികൾ പാലിക്കുകയും അന്താരാഷ്ട്രവൽക്കരണവും പ്രവേശനക്ഷമതയും പരിഗണിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് യഥാർത്ഥത്തിൽ റെസ്‌പോൺസീവും ഉപയോക്തൃ-സൗഹൃദവുമായ വെബ്സൈറ്റുകൾ നിർമ്മിക്കാൻ കണ്ടെയ്നർ ക്വറികൾ പ്രയോജനപ്പെടുത്താം, ഏത് കണ്ടെയ്നർ വലുപ്പത്തിലും ഉപകരണത്തിലും തടസ്സമില്ലാതെ പൊരുത്തപ്പെടുന്നവ.

കണ്ടെയ്നർ-അധിഷ്ഠിത റെസ്‌പോൺസീവ്നസിന്റെ ശക്തി സ്വീകരിക്കുക, നിങ്ങളുടെ വെബ് ഡെവലപ്‌മെന്റ് കഴിവുകൾ അടുത്ത ഘട്ടത്തിലേക്ക് ഉയർത്തുക!