M

MLOG

മലയാളം

ടെയിൽവിൻഡ് സിഎസ്എസ് കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ കണ്ടെത്തുക: റെസ്പോൺസീവ് ഡിസൈനുകൾക്കായുള്ള എലമെന്റ്-അധിഷ്ഠിത ബ്രേക്ക്‌പോയിന്റുകൾ. വ്യൂപോർട്ടിനെയല്ല, കണ്ടെയ്നർ വലുപ്പങ്ങളെ അടിസ്ഥാനമാക്കി ലേഔട്ടുകൾ എങ്ങനെ ക്രമീകരിക്കാമെന്ന് പഠിക്കുക.

ടെയിൽവിൻഡ് സിഎസ്എസ് കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ: റെസ്പോൺസീവ് ഡിസൈനിനായുള്ള എലമെന്റ്-അധിഷ്ഠിത ബ്രേക്ക്‌പോയിന്റുകൾ

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

പരമ്പരാഗത മീഡിയ ക്വറികളുടെ പരിമിതികൾ മനസ്സിലാക്കൽ

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

ഉദാഹരണത്തിന്, ഒരു ഉൽപ്പന്നത്തിന്റെ വിവരങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ഒരു കാർഡ് ഘടകം പരിഗണിക്കുക. മൊത്തത്തിലുള്ള വ്യൂപോർട്ടിന്റെ വലുപ്പം പരിഗണിക്കാതെ, വലിയ സ്ക്രീനുകളിൽ ഉൽപ്പന്നത്തിന്റെ ചിത്രങ്ങൾ തിരശ്ചീനമായും ചെറിയ കണ്ടെയ്നറുകളിൽ ലംബമായും പ്രദർശിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. പരമ്പราഗത മീഡിയ ക്വറികൾ ഉപയോഗിച്ച് ഇത് നിയന്ത്രിക്കുന്നത് ബുദ്ധിമുട്ടാണ്, പ്രത്യേകിച്ചും ഈ കാർഡ് ഘടകം വ്യത്യസ്ത വലുപ്പത്തിലുള്ള കണ്ടെയ്നറുകളുള്ള വിവിധ സന്ദർഭങ്ങളിൽ ഉപയോഗിക്കുമ്പോൾ.

ടെയിൽവിൻഡ് സിഎസ്എസ് കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ പരിചയപ്പെടുത്തുന്നു

ഒരു കണ്ടെയ്നിംഗ് എലമെന്റിന്റെ വലുപ്പത്തെയോ മറ്റ് സവിശേഷതകളെയോ അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം നൽകിക്കൊണ്ട് കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ ഈ പരിമിതികളെ അഭിസംബോധന ചെയ്യുന്നു. ടെയിൽവിൻഡ് സിഎസ്എസ് നിലവിൽ കണ്ടെയ്നർ ക്വറികളെ ഒരു പ്രധാന ഫീച്ചറായി പിന്തുണയ്ക്കുന്നില്ല, അതിനാൽ ഈ പ്രവർത്തനം നേടുന്നതിന് നമ്മൾ ഒരു പ്ലഗിൻ ഉപയോഗിക്കും.

എന്താണ് എലമെന്റ്-അധിഷ്ഠിത ബ്രേക്ക്‌പോയിന്റുകൾ?

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

കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ ഉപയോഗിച്ച് ടെയിൽവിൻഡ് സിഎസ്എസ് സജ്ജീകരിക്കുന്നു (പ്ലഗിൻ സമീപനം)

ടെയിൽവിൻഡ് സിഎസ്എസിന് അന്തർനിർമ്മിതമായ കണ്ടെയ്നർ ക്വറി പിന്തുണ ഇല്ലാത്തതിനാൽ, നമ്മൾ `tailwindcss-container-queries` എന്നൊരു പ്ലഗിൻ ഉപയോഗിക്കും.

ഘട്ടം 1: പ്ലഗിൻ ഇൻസ്റ്റാൾ ചെയ്യുക

ആദ്യം, npm അല്ലെങ്കിൽ yarn ഉപയോഗിച്ച് പ്ലഗിൻ ഇൻസ്റ്റാൾ ചെയ്യുക:

npm install -D tailwindcss-container-queries

അല്ലെങ്കിൽ

yarn add -D tailwindcss-container-queries

ഘട്ടം 2: ടെയിൽവിൻഡ് സിഎസ്എസ് കോൺഫിഗർ ചെയ്യുക

അടുത്തതായി, നിങ്ങളുടെ `tailwind.config.js` ഫയലിൽ പ്ലഗിൻ ചേർക്കുക:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('tailwindcss-container-queries'),
  ],
}

ഘട്ടം 3: പ്ലഗിൻ ഉപയോഗിക്കുക

ഇനി നിങ്ങൾക്ക് നിങ്ങളുടെ ടെയിൽവിൻഡ് സിഎസ്എസ് ക്ലാസുകളിൽ കണ്ടെയ്നർ ക്വറി വേരിയന്റുകൾ ഉപയോഗിക്കാം.

നിങ്ങളുടെ ഘടകങ്ങളിൽ കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ ഉപയോഗിക്കുന്നത്

കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ ആദ്യം `container` യൂട്ടിലിറ്റി ക്ലാസ് ഉപയോഗിച്ച് ഒരു കണ്ടെയ്നിംഗ് എലമെന്റ് നിർവചിക്കേണ്ടതുണ്ട്. അതിനുശേഷം, കണ്ടെയ്നറിന്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നതിന് നിങ്ങൾക്ക് കണ്ടെയ്നർ ക്വറി വേരിയന്റുകൾ ഉപയോഗിക്കാം.

ഒരു കണ്ടെയ്നർ നിർവചിക്കുന്നു

നിങ്ങൾ കണ്ടെയ്നറായി ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന എലമെന്റിലേക്ക് `container` ക്ലാസ് ചേർക്കുക. നിർദ്ദിഷ്ട ബ്രേക്ക്‌പോയിന്റുകൾ നിർവചിക്കുന്നതിന് നിങ്ങൾക്ക് ഒരു പ്രത്യേക കണ്ടെയ്നർ തരം (ഉദാഹരണത്തിന്, `container-sm`, `container-md`, `container-lg`, `container-xl`, `container-2xl`) ചേർക്കാനും അല്ലെങ്കിൽ കണ്ടെയ്നറിന്റെ പേര് ഇഷ്ടാനുസൃതമാക്കാൻ `container-query` പ്ലഗിൻ ഉപയോഗിക്കാനും കഴിയും.

<div class="container ...">
  <!-- ഉള്ളടക്കം ഇവിടെ -->
</div>

കണ്ടെയ്നർ വലുപ്പത്തെ അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നു

കണ്ടെയ്നറിന്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കി സോപാധികമായി സ്റ്റൈലുകൾ പ്രയോഗിക്കാൻ കണ്ടെയ്നർ ക്വറി പ്രിഫിക്സുകൾ ഉപയോഗിക്കുക.

ഉദാഹരണം:

<div class="container sm:text-sm md:text-base lg:text-lg xl:text-xl">
  ഈ ടെക്സ്റ്റിന്റെ വലുപ്പം കണ്ടെയ്നറിന്റെ വീതി അനുസരിച്ച് മാറും.
</div>

ഈ ഉദാഹരണത്തിൽ, ടെക്സ്റ്റിന്റെ വലുപ്പം താഴെ പറയുന്ന രീതിയിൽ മാറും:

പ്രായോഗിക ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

കൂടുതൽ ഫ്ലെക്സിബിളും പുനരുപയോഗിക്കാവുന്നതുമായ ഘടകങ്ങൾ നിർമ്മിക്കാൻ കണ്ടെയ്നർ ക്വറികൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിന്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നമുക്ക് പരിശോധിക്കാം.

ഉദാഹരണം 1: ഉൽപ്പന്ന കാർഡ്

ഒരു ചിത്രവും കുറച്ച് ടെക്സ്റ്റും പ്രദർശിപ്പിക്കുന്ന ഒരു ഉൽപ്പന്ന കാർഡ് പരിഗണിക്കുക. വലിയ കണ്ടെയ്നറുകളിൽ ചിത്രത്തെ ടെക്സ്റ്റിന് അടുത്തായി തിരശ്ചീനമായും ചെറിയ കണ്ടെയ്നറുകളിൽ ടെക്സ്റ്റിന് മുകളിലായി ലംബമായും പ്രദർശിപ്പിക്കാൻ നമ്മൾ ആഗ്രഹിക്കുന്നു.

<div class="container flex flex-col md:flex-row items-center border rounded-lg shadow-md overflow-hidden"
>
  <img
    class="w-full h-48 md:w-48 md:h-full object-cover"
    src="product-image.jpg"
    alt="ഉൽപ്പന്നത്തിന്റെ ചിത്രം"
  />
  <div class="p-4"
  >
    <h3 class="text-xl font-semibold mb-2"
    >ഉൽപ്പന്നത്തിന്റെ പേര്</h3>
    <p class="text-gray-700"
    >ഉൽപ്പന്നത്തിന്റെ വിവരണം ഇവിടെ നൽകുക. ഈ കാർഡ് അതിന്റെ കണ്ടെയ്നർ വലുപ്പത്തിനനുസരിച്ച് ക്രമീകരിക്കുന്നു, കണ്ടെയ്നറിന്റെ വീതി അനുസരിച്ച് ചിത്രം തിരശ്ചീനമായോ ലംബമായോ പ്രദർശിപ്പിക്കുന്നു.</p>
    <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
    >കാർട്ടിലേക്ക് ചേർക്കുക</button>
  </div>
</div>

ഈ ഉദാഹരണത്തിൽ, `flex-col`, `md:flex-row` എന്നീ ക്ലാസുകൾ കണ്ടെയ്നറിന്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കി ലേഔട്ടിന്റെ ദിശ നിയന്ത്രിക്കുന്നു. ചെറിയ കണ്ടെയ്നറുകളിൽ, കാർഡ് ഒരു കോളമായും, ഇടത്തരം വലുപ്പമുള്ളതും അതിൽ വലുതുമായ കണ്ടെയ്നറുകളിൽ ഒരു വരിയായും ആയിരിക്കും.

ഉദാഹരണം 2: നാവിഗേഷൻ മെനു

ഒരു നാവിഗേഷൻ മെനുവിന് ലഭ്യമായ സ്ഥലത്തിനനുസരിച്ച് അതിന്റെ ലേഔട്ട് ക്രമീകരിക്കാൻ കഴിയും. വലിയ കണ്ടെയ്നറുകളിൽ മെനു ഇനങ്ങൾ തിരശ്ചീനമായി പ്രദർശിപ്പിക്കാം, അതേസമയം ചെറിയ കണ്ടെയ്നറുകളിൽ അവ ലംബമായോ ഡ്രോപ്പ്ഡൗൺ മെനുവിലോ പ്രദർശിപ്പിക്കാം.

<div class="container"
>
  <nav class="bg-gray-100 p-4 rounded-lg"
  >
    <ul class="flex md:flex-row flex-col gap-4"
    >
      <li><a href="#" class="hover:text-blue-500"
      >ഹോം</a></li>
      <li><a href="#" class="hover:text-blue-500"
      >ഞങ്ങളെക്കുറിച്ച്</a></li>
      <li><a href="#" class="hover:text-blue-500"
      >സേവനങ്ങൾ</a></li>
      <li><a href="#" class="hover:text-blue-500"
      >ബന്ധപ്പെടുക</a></li>
    </ul>
  </nav>
</div>

ഇവിടെ, `flex md:flex-row flex-col` എന്നീ ക്ലാസുകൾ മെനു ഇനങ്ങളുടെ ലേഔട്ട് നിർണ്ണയിക്കുന്നു. ചെറിയ കണ്ടെയ്നറുകളിൽ, ഇനങ്ങൾ ലംബമായി അടുക്കി വെക്കും, ഇടത്തരം വലുപ്പമുള്ളതും അതിൽ വലുതുമായ കണ്ടെയ്നറുകളിൽ അവ തിരശ്ചീനമായി വിന്യസിക്കും.

വിപുലമായ സാങ്കേതിക വിദ്യകളും പരിഗണനകളും

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

കണ്ടെയ്നർ ബ്രേക്ക്‌പോയിന്റുകൾ ഇഷ്ടാനുസൃതമാക്കുന്നു

നിങ്ങളുടെ ഡിസൈനിന്റെ പ്രത്യേക ആവശ്യകതകൾക്ക് അനുസൃതമായി `tailwind.config.js` ഫയലിൽ കണ്ടെയ്നർ ബ്രേക്ക്‌പോയിന്റുകൾ ഇഷ്ടാനുസൃതമാക്കാൻ നിങ്ങൾക്ക് കഴിയും.

module.exports = {
  theme: {
    extend: {
      container: {
        screens: {
          '2xs': '320px',
          'xs': '480px',
          sm: '640px',
          md: '768px',
          lg: '1024px',
          xl: '1280px',
          '2xl': '1536px',
        },
      },
    },
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

ഇത് നിങ്ങളുടേതായ കണ്ടെയ്നർ വലുപ്പങ്ങൾ നിർവചിക്കാനും അവ നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറി വേരിയന്റുകളിൽ ഉപയോഗിക്കാനും അനുവദിക്കുന്നു.

കണ്ടെയ്നറുകൾ നെസ്റ്റ് ചെയ്യൽ

കൂടുതൽ സങ്കീർണ്ണമായ ലേഔട്ടുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് കണ്ടെയ്നറുകൾ നെസ്റ്റ് ചെയ്യാൻ കഴിയും. എന്നിരുന്നാലും, വളരെയധികം കണ്ടെയ്നറുകൾ നെസ്റ്റ് ചെയ്താൽ പ്രകടന പ്രശ്‌നങ്ങൾക്ക് സാധ്യതയുണ്ടെന്ന് ഓർമ്മിക്കുക.

കണ്ടെയ്നർ ക്വറികളും മീഡിയ ക്വറികളും സംയോജിപ്പിക്കുന്നു

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

കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ

വെല്ലുവിളികളും പരിഗണനകളും

കണ്ടെയ്നർ സ്റ്റൈൽ ക്വറികൾ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

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

ബ്രൗസർ പിന്തുണ മെച്ചപ്പെടുകയും കൂടുതൽ ഡെവലപ്പർമാർ ഈ ശക്തമായ സാങ്കേതികവിദ്യ സ്വീകരിക്കുകയും ചെയ്യുന്നതിനാൽ കണ്ടെയ്നർ ക്വറികളുടെ ഭാവി ശോഭനമാണ്. കണ്ടെയ്നർ ക്വറികൾ കൂടുതൽ വ്യാപകമാകുമ്പോൾ, കൂടുതൽ നൂതനമായ ടൂളുകളും മികച്ച രീതികളും ഉയർന്നുവരുമെന്ന് നമുക്ക് പ്രതീക്ഷിക്കാം, ഇത് യഥാർത്ഥത്തിൽ റെസ്പോൺസീവും പൊരുത്തപ്പെടുന്നതുമായ വെബ് ഡിസൈനുകൾ നിർമ്മിക്കുന്നത് കൂടുതൽ എളുപ്പമാക്കും.

ഉപസംഹാരം

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