സിഎസ്എസ് കണ്ടെയ്നർ ക്വറി സൈസ് കണക്കുകൂട്ടൽ: കണ്ടെയ്നർ അളവുകളുടെ നിർണ്ണയം

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

എന്താണ് കണ്ടെയ്നർ ക്വറികൾ? ഒരു ലഘുവിവരണം

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

നിങ്ങൾക്ക് ഒരു കാർഡ് ഘടകം ഉണ്ടെന്ന് കരുതുക. മീഡിയ ക്വറികൾ ഉപയോഗിച്ച്, കാർഡിന്റെ രൂപം വ്യൂപോർട്ടിന്റെ വീതി അനുസരിച്ച് മാറും. കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിച്ച്, കാർഡിന്റെ രൂപം അത് സ്ഥിതിചെയ്യുന്ന കണ്ടെയ്നറിന്റെ വീതിയെ അടിസ്ഥാനമാക്കി മാറും, മൊത്തത്തിലുള്ള വ്യൂപോർട്ട് വലുപ്പത്തെ പരിഗണിക്കാതെ തന്നെ. ഇത് ഘടകത്തെ കൂടുതൽ വഴക്കമുള്ളതും വിവിധ ലേഔട്ടുകളിൽ പുനരുപയോഗിക്കാൻ കഴിയുന്നതുമാക്കുന്നു.

കണ്ടെയ്ൻമെൻ്റ് കോൺടെക്സ്റ്റ് നിർവചിക്കുന്നു

സൈസ് കണക്കുകൂട്ടലിലേക്ക് കടക്കുന്നതിന് മുൻപ്, ഒരു കണ്ടെയ്ൻമെൻ്റ് കോൺടെക്സ്റ്റ് എങ്ങനെ സ്ഥാപിക്കാമെന്ന് മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഇത് container-type, container-name എന്നീ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

container-type

container-type പ്രോപ്പർട്ടി കണ്ടെയ്ൻമെൻ്റിൻ്റെ തരം നിർവചിക്കുന്നു. ഇതിന് താഴെ പറയുന്ന മൂല്യങ്ങൾ എടുക്കാൻ കഴിയും:

• size: സൈസ് കണ്ടെയ്ൻമെൻ്റ് സ്ഥാപിക്കുന്നു. കണ്ടെയ്നറിന്റെ ഇൻലൈൻ-സൈസ് (തിരശ്ചീന എഴുത്ത് മോഡിൽ വീതി, ലംബ എഴുത്ത് മോഡിൽ ഉയരം) കണ്ടെയ്നർ ക്വറികളുടെ അടിസ്ഥാനമായി മാറുന്നു. വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ള കണക്കുകൂട്ടലുകൾക്ക് ഇത് ഏറ്റവും സാധാരണവും പ്രസക്തവുമായ തരമാണ്.
• inline-size: size-ന് തുല്യമാണ്, ഇൻലൈൻ-സൈസ് കണ്ടെയ്ൻമെൻ്റ് വ്യക്തമായി വ്യക്തമാക്കുന്നു.
• layout: ലേഔട്ട് കണ്ടെയ്ൻമെൻ്റ് സ്ഥാപിക്കുന്നു. കണ്ടെയ്നർ ഒരു പുതിയ ഫോർമാറ്റിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കുന്നു, അതിന്റെ പിൻഗാമികളെ ചുറ്റുമുള്ള ലേഔട്ടിനെ ബാധിക്കുന്നതിൽ നിന്ന് തടയുന്നു. ഇത് വലുപ്പത്തിന്റെ കണക്കുകൂട്ടലിനെ നേരിട്ട് ബാധിക്കുന്നില്ല, പക്ഷേ കണ്ടെയ്നറിന് ലഭ്യമായ സ്ഥലത്തെ ബാധിച്ചേക്കാം.
• style: സ്റ്റൈൽ കണ്ടെയ്ൻമെൻ്റ് സ്ഥാപിക്കുന്നു. കണ്ടെയ്നറിലെ പ്രോപ്പർട്ടികളിലെ മാറ്റങ്ങൾ അതിന് പുറത്തുള്ള സ്റ്റൈലുകളെ ബാധിക്കില്ല. layout പോലെ, ഇത് വലുപ്പത്തിന്റെ കണക്കുകൂട്ടലിനെ നേരിട്ട് ബാധിക്കുന്നില്ല.
• paint: പെയിന്റ് കണ്ടെയ്ൻമെൻ്റ് സ്ഥാപിക്കുന്നു. കണ്ടെയ്നർ ഒരു സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കുകയും അതിന്റെ പിൻഗാമികളെ അതിന്റെ അതിരുകൾക്ക് പുറത്ത് പെയിന്റ് ചെയ്യുന്നതിൽ നിന്ന് തടയുകയും ചെയ്യുന്നു. വീണ്ടും, ഇത് വലുപ്പത്തിന്റെ കണക്കുകൂട്ടലുമായി നേരിട്ട് ബന്ധപ്പെട്ടിട്ടില്ല.
• content: ലേഔട്ട്, സ്റ്റൈൽ, പെയിന്റ് കണ്ടെയ്ൻമെൻ്റ് എന്നിവ സ്ഥാപിക്കുന്നു.
• normal: എലമെൻ്റ് ഒരു കണ്ടെയ്നർ അല്ല.

വലുപ്പത്തിന്റെ കണക്കുകൂട്ടലിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതിനാൽ, നമ്മൾ പ്രധാനമായും container-type: size;, container-type: inline-size; എന്നിവയുമായി പ്രവർത്തിക്കും.

container-name

container-name പ്രോപ്പർട്ടി കണ്ടെയ്നറിന് ഒരു പേര് നൽകുന്നു. ഒരു പേജിൽ ഒന്നിലധികം കണ്ടെയ്നറുകൾ ഉള്ളപ്പോൾ, കണ്ടെയ്നർ ക്വറികൾ എഴുതുമ്പോൾ നിർദ്ദിഷ്ട കണ്ടെയ്നറുകളെ ലക്ഷ്യമിടാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

.card-container {
  container-type: size;
  container-name: card;
}

@container card (min-width: 300px) {
  .card-content {
    font-size: 1.2em;
  }
}

ഈ ഉദാഹരണത്തിൽ, .card-container എന്ന എലമെൻ്റ് "card" എന്ന് പേരുള്ള ഒരു സൈസ് കണ്ടെയ്നറായി നിർവചിച്ചിരിക്കുന്നു. കണ്ടെയ്നറിന്റെ വീതി കുറഞ്ഞത് 300px ആകുമ്പോൾ കണ്ടെയ്നർ ക്വറി ഈ പ്രത്യേക കണ്ടെയ്നറിനെ ലക്ഷ്യമിടുകയും .card-content-ൽ സ്റ്റൈലുകൾ പ്രയോഗിക്കുകയും ചെയ്യുന്നു.

കണ്ടെയ്നർ അളവ് നിർണ്ണയം: പ്രധാന തത്വങ്ങൾ

കണ്ടെയ്നർ ക്വറി സൈസ് കണക്കുകൂട്ടലിന്റെ അടിസ്ഥാന തത്വം, കണ്ടെയ്നർ ക്വറികൾ വിലയിരുത്താൻ ഉപയോഗിക്കുന്ന അളവുകൾ കണ്ടെയ്നറിന്റെ കണ്ടന്റ് ബോക്സ് അളവുകളാണ് എന്നതാണ്. ഇതിനർത്ഥം:

• ഉപയോഗിക്കുന്ന വീതി, പാഡിംഗ്, ബോർഡർ, മാർജിൻ എന്നിവ ഒഴികെയുള്ള, കണ്ടെയ്നറിനുള്ളിലെ കണ്ടന്റ് ഏരിയയുടെ വീതിയാണ്.
• ഉപയോഗിക്കുന്ന ഉയരം, പാഡിംഗ്, ബോർഡർ, മാർജിൻ എന്നിവ ഒഴികെയുള്ള, കണ്ടെയ്നറിനുള്ളിലെ കണ്ടന്റ് ഏരിയയുടെ ഉയരമാണ്.

കണ്ടെയ്നറിന്റെ വലുപ്പത്തെ ബാധിക്കുന്ന വിവിധ സിഎസ്എസ് പ്രോപ്പർട്ടികളുമായി ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നമുക്ക് വിശദീകരിക്കാം:

1. വ്യക്തമായ വീതിയും ഉയരവും

കണ്ടെയ്നറിന് വ്യക്തമായി നിർവചിക്കപ്പെട്ട width അല്ലെങ്കിൽ height ഉണ്ടെങ്കിൽ, ഈ മൂല്യങ്ങൾ (ബോക്സ്-സൈസിംഗ് കണക്കിലെടുത്ത ശേഷം) കണ്ടന്റ് ബോക്സ് അളവുകളെ നേരിട്ട് സ്വാധീനിക്കുന്നു.

ഉദാഹരണം:

.container {
  width: 500px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
  container-type: size;
}

ഈ സാഹചര്യത്തിൽ, box-sizing: border-box; സജ്ജീകരിച്ചിരിക്കുന്നതിനാൽ, കണ്ടെയ്നറിന്റെ ആകെ വീതി (പാഡിംഗും ബോർഡറും ഉൾപ്പെടെ) 500px ആണ്. കണ്ടെയ്നർ ക്വറിക്ക് ഉപയോഗിക്കുന്ന കണ്ടന്റ് ബോക്സ് വീതി താഴെ പറയുന്ന രീതിയിൽ കണക്കാക്കുന്നു:

കണ്ടന്റ് ബോക്സ് വീതി = വീതി - പാഡിംഗ്-ലെഫ്റ്റ് - പാഡിംഗ്-റൈറ്റ് - ബോർഡർ-ലെഫ്റ്റ് - ബോർഡർ-റൈറ്റ്

കണ്ടന്റ് ബോക്സ് വീതി = 500px - 20px - 20px - 5px - 5px = 450px

അതുകൊണ്ട്, കണ്ടെയ്നർ ക്വറി 450px വീതിയെ അടിസ്ഥാനമാക്കി വിലയിരുത്തും.

പകരം box-sizing: content-box; ആണ് സജ്ജീകരിച്ചിരുന്നതെങ്കിൽ (ഇതാണ് ഡിഫോൾട്ട്), കണ്ടന്റ് ബോക്സ് വീതി 500px ആയിരിക്കും, കണ്ടെയ്നറിന്റെ ആകെ വീതി 550px ആയിരിക്കും.

2. ഓട്ടോ വീതിയും ഉയരവും

കണ്ടെയ്നറിന്റെ വീതിയോ ഉയരമോ auto ആയി സജ്ജീകരിക്കുമ്പോൾ, ബ്രൗസർ ഉള്ളടക്കവും ലഭ്യമായ സ്ഥലവും അടിസ്ഥാനമാക്കി അളവുകൾ കണക്കാക്കുന്നു. കണ്ടെയ്നറിന്റെ ഡിസ്പ്ലേ തരം (ഉദാഹരണത്തിന്, ബ്ലോക്ക്, ഇൻലൈൻ-ബ്ലോക്ക്, ഫ്ലെക്സ്, ഗ്രിഡ്) അതിന്റെ പാരൻ്റിൻ്റെ ലേഔട്ട് എന്നിവ അനുസരിച്ച് ഈ കണക്കുകൂട്ടൽ കൂടുതൽ സങ്കീർണ്ണമായേക്കാം.

ബ്ലോക്ക്-ലെവൽ എലമെൻ്റുകൾ: width: auto; ഉള്ള ബ്ലോക്ക്-ലെവൽ എലമെൻ്റുകൾക്ക്, വീതി സാധാരണയായി അതിന്റെ പാരൻ്റ് കണ്ടെയ്നറിനുള്ളിലെ ലഭ്യമായ തിരശ്ചീന ഇടം (മാർജിൻ കുറച്ച്) നിറയ്ക്കാൻ വികസിക്കുന്നു. ഉയരം എലമെൻ്റിനുള്ളിലെ ഉള്ളടക്കത്താൽ നിർണ്ണയിക്കപ്പെടുന്നു.

ഇൻലൈൻ-ബ്ലോക്ക് എലമെൻ്റുകൾ: width: auto;, height: auto; എന്നിവയുള്ള ഇൻലൈൻ-ബ്ലോക്ക് എലമെൻ്റുകൾക്ക്, അളവുകൾ ഉള്ളടക്കത്താൽ നിർണ്ണയിക്കപ്പെടുന്നു. എലമെൻ്റ് അതിന്റെ ഉള്ളടക്കത്തിന് അനുയോജ്യമായ രീതിയിൽ ചുരുങ്ങുന്നു.

ഫ്ലെക്സ്ബോക്സും ഗ്രിഡ് കണ്ടെയ്നറുകളും: ഫ്ലെക്സ്ബോക്സിനും ഗ്രിഡ് കണ്ടെയ്നറുകൾക്കും കൂടുതൽ സങ്കീർണ്ണമായ ലേഔട്ട് അൽഗോരിതങ്ങളുണ്ട്. അവയുടെ ചൈൽഡ് എലമെൻ്റുകളുടെ അളവുകളും, flex-grow, flex-shrink, grid-template-columns, grid-template-rows തുടങ്ങിയ പ്രോപ്പർട്ടികളും കണ്ടെയ്നറിന്റെ വലുപ്പത്തെ സ്വാധീനിക്കുന്നു.

ഉദാഹരണം (ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ചുള്ള ഓട്ടോ വീതി):

.container {
  display: flex;
  flex-direction: row;
  width: auto;
  container-type: size;
}

.item {
  flex: 1;
  min-width: 100px;
}

ഈ ഉദാഹരണത്തിൽ, .container ന് width: auto; ഉണ്ട്. ഇതിന്റെ വീതി ലഭ്യമായ സ്ഥലവും അതിന്റെ ചൈൽഡ് എലമെൻ്റുകളുടെ flex പ്രോപ്പർട്ടികളും അനുസരിച്ച് നിർണ്ണയിക്കപ്പെടും. പാരൻ്റ് കണ്ടെയ്നറിന് 600px വീതിയും, രണ്ട് .item എലമെൻ്റുകൾക്ക് flex: 1;, min-width: 100px; എന്നിവയുമുണ്ടെങ്കിൽ, കണ്ടെയ്നറിന്റെ വീതി മിക്കവാറും 600px ആയിരിക്കും (കണ്ടെയ്നറിലെ പാഡിംഗ്/ബോർഡർ കുറച്ച്).

3. മിൻ-വിഡ്ത്തും മാക്സ്-വിഡ്ത്തും

min-width, max-width പ്രോപ്പർട്ടികൾ കണ്ടെയ്നറിന്റെ വീതിയെ നിയന്ത്രിക്കുന്നു. യഥാർത്ഥ വീതി, സാധാരണ വീതി കണക്കുകൂട്ടലിന്റെ ഫലമായി, min-width, max-width മൂല്യങ്ങൾക്കിടയിൽ ക്ലാംപ് ചെയ്യപ്പെടും.

ഉദാഹരണം:

.container {
  width: auto;
  min-width: 300px;
  max-width: 800px;
  container-type: size;
}

ഈ സാഹചര്യത്തിൽ, കണ്ടെയ്നറിന്റെ വീതി ലഭ്യമായ ഇടം നിറയ്ക്കാൻ വികസിക്കും, പക്ഷേ അത് 300px-ൽ കുറവോ 800px-ൽ കൂടുതലോ ആകില്ല. കണ്ടെയ്നർ ക്വറി ഈ ക്ലാംപ് ചെയ്ത വീതിയെ അടിസ്ഥാനമാക്കി വിലയിരുത്തും.

4. ശതമാനത്തിലുള്ള വീതികൾ

ഒരു കണ്ടെയ്നറിന് ശതമാനത്തിലുള്ള വീതിയുണ്ടെങ്കിൽ, അതിന്റെ കണ്ടെയ്നിംഗ് ബ്ലോക്കിന്റെ വീതിയുടെ ശതമാനമായി വീതി കണക്കാക്കുന്നു. റെസ്പോൺസിവ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു സാധാരണ രീതിയാണിത്.

ഉദാഹരണം:

.container {
  width: 80%;
  container-type: size;
}

കണ്ടെയ്നിംഗ് ബ്ലോക്കിന് 1000px വീതിയുണ്ടെങ്കിൽ, കണ്ടെയ്നറിന്റെ വീതി 800px ആയിരിക്കും. കണ്ടെയ്നർ ക്വറി പിന്നീട് ഈ കണക്കാക്കിയ വീതിയെ അടിസ്ഥാനമാക്കി വിലയിരുത്തും.

5. contain പ്രോപ്പർട്ടി

വലുപ്പത്തിന്റെ കണക്കുകൂട്ടലിനെ നേരിട്ട് ബാധിക്കുന്നില്ലെങ്കിലും, contain പ്രോപ്പർട്ടി കണ്ടെയ്നറിന്റെയും അതിന്റെ പിൻഗാമികളുടെയും ലേഔട്ടിനെയും റെൻഡറിംഗിനെയും കാര്യമായി സ്വാധീനിക്കുന്നു. contain: layout;, contain: paint;, അല്ലെങ്കിൽ contain: content; എന്നിവ ഉപയോഗിക്കുന്നത് കണ്ടെയ്നറിനെയും അതിന്റെ ചൈൽഡ് എലമെൻ്റുകളെയും വേർതിരിക്കാനും, അതുവഴി പ്രകടനവും പ്രവചനാത്മകതയും മെച്ചപ്പെടുത്താനും കഴിയും. ഈ വേർതിരിക്കൽ കണ്ടെയ്നറിന് ലഭ്യമായ സ്ഥലത്തെ പരോക്ഷമായി സ്വാധീനിച്ചേക്കാം, വീതിയോ ഉയരമോ `auto` ആയി സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ അതിന്റെ അന്തിമ വലുപ്പത്തെ ബാധിക്കാം.

കൂടുതൽ നിർദ്ദിഷ്ടമായ ഒരു `contain` മൂല്യം ഇതിനകം സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ, `container-type` പരോക്ഷമായി `contain: size;` സജ്ജീകരിക്കുന്നു എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. കണ്ടെയ്നറിന്റെ വലുപ്പം അതിന്റെ പാരൻ്റിൽ നിന്നും സഹോദര എലമെൻ്റുകളിൽ നിന്നും സ്വതന്ത്രമാണെന്ന് ഇത് ഉറപ്പാക്കുന്നു, കണ്ടെയ്നർ ക്വറികളെ വിശ്വസനീയമാക്കുന്നു.

വിവിധ ലേഔട്ടുകളിലുടനീളമുള്ള പ്രായോഗിക ഉദാഹരണങ്ങൾ

വിവിധ ലേഔട്ട് സാഹചര്യങ്ങളിൽ കണ്ടെയ്നർ ക്വറി സൈസ് കണക്കുകൂട്ടൽ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിന്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം.

ഉദാഹരണം 1: ഒരു ഗ്രിഡ് ലേഔട്ടിലെ കാർഡ് ഘടകം

ഒരു ഗ്രിഡ് ലേഔട്ടിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഒരു കാർഡ് ഘടകം സങ്കൽപ്പിക്കുക. ഗ്രിഡിനുള്ളിലെ അതിന്റെ വീതിയെ അടിസ്ഥാനമാക്കി കാർഡിന്റെ രൂപം പൊരുത്തപ്പെടണമെന്ന് നമ്മൾ ആഗ്രഹിക്കുന്നു.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  container-type: size;
  padding: 15px;
  border: 1px solid #ccc;
}

.card h2 {
  font-size: 1.2em;
}

@container (max-width: 350px) {
  .card h2 {
    font-size: 1em;
  }
}

ഈ ഉദാഹരണത്തിൽ, .grid-container ഒരു റെസ്പോൺസിവ് ഗ്രിഡ് ലേഔട്ട് സൃഷ്ടിക്കുന്നു. .card എലമെൻ്റ് ഒരു സൈസ് കണ്ടെയ്നറാണ്. കണ്ടെയ്നർ ക്വറി കാർഡിന്റെ വീതി 350px-ൽ കുറവോ തുല്യമോ ആണോ എന്ന് പരിശോധിക്കുന്നു. അങ്ങനെയെങ്കിൽ, കാർഡിനുള്ളിലെ h2 എലമെൻ്റിൻ്റെ ഫോണ്ട് വലുപ്പം കുറയുന്നു. ഇത് ഗ്രിഡിനുള്ളിൽ ലഭ്യമായ സ്ഥലത്തിനനുസരിച്ച് കാർഡിന് അതിന്റെ ഉള്ളടക്കം പൊരുത്തപ്പെടുത്താൻ അനുവദിക്കുന്നു.

ഉദാഹരണം 2: സൈഡ്ബാർ നാവിഗേഷൻ

ലഭ്യമായ വീതിയെ അടിസ്ഥാനമാക്കി അതിന്റെ ലേഔട്ട് പൊരുത്തപ്പെടുത്തേണ്ട ഒരു സൈഡ്ബാർ നാവിഗേഷൻ ഘടകം പരിഗണിക്കുക.

.sidebar {
  width: 250px;
  container-type: size;
  background-color: #f0f0f0;
  padding: 10px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 5px;
}

.sidebar a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #333;
}

@container (max-width: 200px) {
  .sidebar a {
    text-align: center;
    padding: 5px;
  }
}

ഈ ഉദാഹരണത്തിൽ, .sidebar 250px സ്ഥിര വീതിയുള്ള ഒരു സൈസ് കണ്ടെയ്നറാണ്. കണ്ടെയ്നർ ക്വറി സൈഡ്ബാറിന്റെ വീതി 200px-ൽ കുറവോ തുല്യമോ ആണോ എന്ന് പരിശോധിക്കുന്നു. അങ്ങനെയെങ്കിൽ, സൈഡ്ബാറിനുള്ളിലെ ലിങ്കുകളുടെ ടെക്സ്റ്റ് അലൈൻമെൻ്റ് സെന്ററിലേക്ക് മാറ്റുകയും പാഡിംഗ് കുറയ്ക്കുകയും ചെയ്യുന്നു. ചെറിയ സ്ക്രീനുകളിലേക്കോ ഇടുങ്ങിയ ലേഔട്ടുകളിലേക്കോ സൈഡ്ബാർ പൊരുത്തപ്പെടുത്തുന്നതിന് ഇത് ഉപയോഗപ്രദമാകും.

ഉദാഹരണം 3: ചിത്രത്തിന്റെ വലുപ്പം ക്രമീകരിക്കുന്നു

ഒരു കണ്ടെയ്നറിനുള്ളിലെ ചിത്രങ്ങളുടെ വലുപ്പം ക്രമീകരിക്കാനും കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കാം.

.image-container {
  width: 400px;
  container-type: size;
}

.image-container img {
  width: 100%;
  height: auto;
}

@container (max-width: 300px) {
  .image-container img {
    max-height: 200px;
    object-fit: cover;
  }
}

ഇവിടെ, .image-container ആണ് സൈസ് കണ്ടെയ്നർ. കണ്ടെയ്നറിന്റെ വീതി 300px-ൽ കുറവോ തുല്യമോ ആണോ എന്ന് കണ്ടെയ്നർ ക്വറി പരിശോധിക്കുന്നു. അങ്ങനെയെങ്കിൽ, ചിത്രത്തിന്റെ max-height 200px ആയി സജ്ജീകരിക്കുകയും, ചിത്രം അതിന്റെ ആസ്പെക്റ്റ് റേഷ്യോ മാറ്റാതെ ലഭ്യമായ ഇടം നിറയ്ക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ object-fit: cover; പ്രയോഗിക്കുകയും ചെയ്യുന്നു. ഇത് വിവിധ വലുപ്പത്തിലുള്ള കണ്ടെയ്നറുകളിൽ ചിത്രങ്ങൾ എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന് നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

പ്രത്യേക സാഹചര്യങ്ങളും സാധ്യമായ അപകടങ്ങളും

കണ്ടെയ്നർ ക്വറികൾ ശക്തമാണെങ്കിലും, സാധ്യമായ പ്രശ്നങ്ങളെയും പ്രത്യേക സാഹചര്യങ്ങളെയും കുറിച്ച് അറിഞ്ഞിരിക്കേണ്ടത് പ്രധാനമാണ്.

1. വൃത്താകൃതിയിലുള്ള ആശ്രിതത്വം (Circular Dependencies)

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

2. പ്രകടന പരിഗണനകൾ

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

3. നെസ്റ്റിംഗ് കണ്ടെയ്നറുകൾ

കണ്ടെയ്നറുകൾ നെസ്റ്റ് ചെയ്യുമ്പോൾ, ഒരു ക്വറി ഏത് കണ്ടെയ്നറിനെയാണ് ലക്ഷ്യമിടുന്നതെന്ന് ശ്രദ്ധിക്കുക. അപ്രതീക്ഷിതമായ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാൻ ടാർഗെറ്റ് കണ്ടെയ്നർ വ്യക്തമാക്കുന്നതിന് container-name ഉപയോഗിക്കുക. കൂടാതെ, കണ്ടെയ്നർ ക്വറികൾ കണ്ടെയ്നറിന്റെ തൊട്ടടുത്തുള്ള ചൈൽഡ് എലമെൻ്റുകൾക്ക് മാത്രമേ ബാധകമാകൂ, ഡോം ട്രീയിൽ താഴെയുള്ള പിൻഗാമികൾക്ക് ബാധകമല്ലെന്ന് ഓർമ്മിക്കുക.

4. ബ്രൗസർ കോംപാറ്റിബിലിറ്റി

കണ്ടെയ്നർ ക്വറികളെ വളരെയധികം ആശ്രയിക്കുന്നതിന് മുമ്പ് ബ്രൗസർ കോംപാറ്റിബിലിറ്റി പരിശോധിക്കുന്നത് ഉറപ്പാക്കുക. പിന്തുണ അതിവേഗം വളരുന്നുണ്ടെങ്കിലും, പഴയ ബ്രൗസറുകൾ അവയെ പിന്തുണച്ചേക്കില്ല. പഴയ ബ്രൗസറുകൾക്കായി പോളിഫില്ലുകൾ ഉപയോഗിക്കുകയോ ഫാൾബാക്ക് സ്റ്റൈലുകൾ നൽകുകയോ ചെയ്യുന്നത് പരിഗണിക്കുക.

5. ഡൈനാമിക് ഉള്ളടക്കം

ഒരു കണ്ടെയ്നറിനുള്ളിലെ ഉള്ളടക്കം ഡൈനാമിക്കായി മാറുകയാണെങ്കിൽ (ഉദാഹരണത്തിന്, ജാവാസ്ക്രിപ്റ്റ് വഴി), കണ്ടെയ്നറിന്റെ വലുപ്പവും മാറിയേക്കാം, ഇത് കണ്ടെയ്നർ ക്വറികളെ ട്രിഗർ ചെയ്യും. നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഈ മാറ്റങ്ങൾ ശരിയായി കൈകാര്യം ചെയ്യുന്നുണ്ടെന്നും ലേഔട്ട് അതനുസരിച്ച് അപ്‌ഡേറ്റ് ചെയ്യുന്നുണ്ടെന്നും ഉറപ്പാക്കുക. കണ്ടെയ്നറിന്റെ ഉള്ളടക്കത്തിലെ മാറ്റങ്ങൾ കണ്ടെത്താനും കണ്ടെയ്നർ ക്വറികളുടെ പുനർമൂല്യനിർണ്ണയം ട്രിഗർ ചെയ്യാനും MutationObserver ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

കണ്ടെയ്നർ ക്വറികൾക്കുള്ള ആഗോള പരിഗണനകൾ

ഒരു ആഗോള പശ്ചാത്തലത്തിൽ കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കുമ്പോൾ, ഇനിപ്പറയുന്നവ പരിഗണിക്കുക:

• ടെക്സ്റ്റ് ഡയറക്ഷൻ (RTL/LTR): കണ്ടെയ്നർ ക്വറികൾ പ്രധാനമായും കണ്ടെയ്നറിന്റെ ഇൻലൈൻ-സൈസിലാണ് പ്രവർത്തിക്കുന്നത്. നിങ്ങളുടെ സ്റ്റൈലുകൾ ഇടത്തുനിന്ന് വലത്തോട്ടും (LTR) വലത്തുനിന്ന് ഇടത്തോട്ടും (RTL) ഉള്ള ടെക്സ്റ്റ് ഡയറക്ഷനുകളുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• ഇന്റർനാഷണലൈസേഷൻ (i18n): വിവിധ ഭാഷകൾക്ക് വ്യത്യസ്ത ടെക്സ്റ്റ് ദൈർഘ്യങ്ങൾ ഉണ്ടാകാം, ഇത് ഒരു കണ്ടെയ്നറിനുള്ളിലെ ഉള്ളടക്കത്തിന്റെ വലുപ്പത്തെ ബാധിച്ചേക്കാം. നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറികൾ ശരിയായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ വിവിധ ഭാഷകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക.
• ഫോണ്ട് ലോഡിംഗ്: ഫോണ്ട് ലോഡിംഗ് കണ്ടെയ്നറിന്റെ ഉള്ളടക്കത്തിന്റെ പ്രാരംഭ വലുപ്പത്തെ ബാധിച്ചേക്കാം. ഫോണ്ടുകൾ ലോഡ് ചെയ്യുമ്പോൾ ലേഔട്ട് ഷിഫ്റ്റുകൾ ഒഴിവാക്കാൻ `font-display: swap;` ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• പ്രവേശനക്ഷമത (Accessibility): നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറി അടിസ്ഥാനമാക്കിയുള്ള മാറ്റങ്ങൾ പ്രവേശനക്ഷമത നിലനിർത്തുന്നുവെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് വായിക്കാൻ പ്രയാസമുണ്ടാകുന്ന തരത്തിൽ ഫോണ്ട് വലുപ്പങ്ങൾ കുറയ്ക്കരുത്. എപ്പോഴും പ്രവേശനക്ഷമത ടൂളുകളും സഹായക സാങ്കേതികവിദ്യകളും ഉപയോഗിച്ച് പരീക്ഷിക്കുക.

കണ്ടെയ്നർ ക്വറികൾ ഡീബഗ്ഗിംഗ്

കണ്ടെയ്നർ ക്വറികൾ ഡീബഗ്ഗ് ചെയ്യുന്നത് ചിലപ്പോൾ ബുദ്ധിമുട്ടാണ്. ഇതാ ചില സഹായകമായ നുറുങ്ങുകൾ:

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

കണ്ടെയ്നർ ക്വറികളുടെ ഭാവി

കണ്ടെയ്നർ ക്വറികൾ ഇപ്പോഴും താരതമ്യേന പുതിയൊരു ഫീച്ചറാണ്, ഭാവിയിൽ അവയുടെ കഴിവുകൾ വികസിക്കാൻ സാധ്യതയുണ്ട്. ബ്രൗസർ പിന്തുണയിൽ മെച്ചപ്പെടുത്തലുകൾ, കൂടുതൽ സങ്കീർണ്ണമായ ക്വറി വ്യവസ്ഥകൾ, മറ്റ് സിഎസ്എസ് ഫീച്ചറുകളുമായി കൂടുതൽ മികച്ച സംയോജനം എന്നിവ പ്രതീക്ഷിക്കാം.

ഉപസംഹാരം

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