தமிழ்

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

டெயில்விண்ட் CSS கண்டெய்னர் குவரீஸ்: உறுப்பு-அடிப்படையிலான ரெஸ்பான்சிவ் வடிவமைப்பு

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

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

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

கண்டெய்னர் குவரீஸ்களின் நன்மைகள்

டெயில்விண்ட் CSS உடன் கண்டெய்னர் குவரீஸ்களை அமைத்தல்

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

`tailwindcss-container-queries` செருகுநிரலைப் பயன்படுத்துதல்

`tailwindcss-container-queries` செருகுநிரல் உங்கள் டெயில்விண்ட் CSS பணிப்பாய்வுகளில் கண்டெய்னர் குவரீஸ்களை ஒருங்கிணைக்க ஒரு வசதியான வழியை வழங்குகிறது. தொடங்குவதற்கு, நீங்கள் செருகுநிரலை நிறுவ வேண்டும்:

npm install tailwindcss-container-queries

அடுத்து, உங்கள் `tailwind.config.js` கோப்பில் செருகுநிரலைச் சேர்க்கவும்:

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

இந்த செருகுநிரல் உங்கள் டெயில்விண்ட் CSS வகுப்புகளில் புதிய வகைகளைத் தானாகச் சேர்க்கிறது, இது கொள்கலன் அளவுகளின் அடிப்படையில் பாணிகளைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. எடுத்துக்காட்டாக, உங்கள் உள்ளமைவில் வரையறுக்கப்பட்ட ஒரு சிறிய அளவில் கொள்கலன் இருக்கும்போது பெரிய உரை அளவைப் பயன்படுத்த `cq-sm:text-lg` ஐப் பயன்படுத்தலாம்.

கண்டெய்னர் அளவுகளை கட்டமைத்தல்

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      containerQueries: {
        'xs': '200px',
        'sm': '480px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
      },
    },
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

இந்த உள்ளமைவில், நாம் ஐந்து கண்டெய்னர் அளவுகளை வரையறுத்துள்ளோம்: `xs`, `sm`, `md`, `lg`, மற்றும் `xl`, ஒவ்வொன்றும் ஒரு குறிப்பிட்ட அகலத்துடன் தொடர்புடையது. உங்கள் திட்டத்தின் தேவைகளுக்கு ஏற்ப நீங்கள் மேலும் அளவுகளைச் சேர்க்கலாம் அல்லது ஏற்கனவே உள்ளவற்றை மாற்றியமைக்கலாம்.

டெயில்விண்ட் CSS இல் கண்டெய்னர் குவரீஸ்களை செயல்படுத்துதல்

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

ஒரு கொள்கலனை வரையறுத்தல்

முதலில், உங்கள் குவரீஸ்களுக்கு எந்த உறுப்பு கொள்கலனாக செயல்படும் என்பதை நீங்கள் வரையறுக்க வேண்டும். இது உறுப்புக்கு `container-query` வகுப்பைச் சேர்ப்பதன் மூலம் செய்யப்படுகிறது. நீங்கள் `container-[name]` (எ.கா., `container-card`) ஐப் பயன்படுத்தி ஒரு கொள்கலன் பெயரையும் குறிப்பிடலாம். இந்த பெயர், ஒரு கூறுக்குள் பல கொள்கலன்கள் இருந்தால், குறிப்பிட்ட கொள்கலன்களை குறிவைக்க உங்களை அனுமதிக்கிறது.

<div class="container-query container-card">
  <!-- கூறின் உள்ளடக்கம் -->
</div>

கொள்கலன் அளவின் அடிப்படையில் பாணிகளைப் பயன்படுத்துதல்

நீங்கள் கொள்கலனை வரையறுத்தவுடன், கொள்கலனின் அகலத்தின் அடிப்படையில் பாணிகளைப் பயன்படுத்த `cq-[size]:` வகைகளைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக, கொள்கலன் அளவின் அடிப்படையில் உரையின் அளவை மாற்ற, நீங்கள் பின்வருவனவற்றைப் பயன்படுத்தலாம்:

<div class="container-query container-card p-4 bg-gray-100 rounded-lg shadow-md"
     >
  <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
  >ரெஸ்பான்சிவ் தலைப்பு</h2>
  <p class="text-gray-700 cq-sm:text-lg"
  >இது கொள்கலன் அளவிற்கு ஏற்ப மாறும் ஒரு பத்தி.  இந்த கூறு அதன் கொள்கலனின் அளவை அடிப்படையாகக் கொண்டு அதன் தோற்றத்தை சரிசெய்யும்.
  </p>
</div>

இந்த எடுத்துக்காட்டில், தலைப்பு இயல்பாக `text-xl` ஆகவும், கொள்கலன் குறைந்தது `sm` அளவில் இருக்கும்போது `text-2xl` ஆகவும், கொள்கலன் குறைந்தது `md` அளவில் இருக்கும்போது `text-3xl` ஆகவும் இருக்கும். கொள்கலன் குறைந்தது `sm` அளவில் இருக்கும்போது பத்தி உரையின் அளவும் `text-lg` ஆக மாறும்.

உதாரணம்: ஒரு ரெஸ்பான்சிவ் கார்டு கூறு

கொள்கலன் அளவின் அடிப்படையில் அதன் அமைப்பை மாற்றியமைக்கும் ஒரு ரெஸ்பான்சிவ் கார்டு கூறின் முழுமையான உதாரணத்தை உருவாக்குவோம்.

<div class="container-query container-card p-4 bg-white rounded-lg shadow-md flex flex-col cq-md:flex-row items-center"
     >
  <img src="https://via.placeholder.com/150" alt="இடப்பிடி படம்" class="w-24 h-24 rounded-full mb-4 cq-md:mb-0 cq-md:mr-4">
  <div class="text-center cq-md:text-left"
  >
    <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
    >ரெஸ்பான்சிவ் கார்டு</h2>
    <p class="text-gray-700 cq-sm:text-lg"
    >இந்த கூறு அதன் கொள்கலனின் அளவை அடிப்படையாகக் கொண்டு அதன் தோற்றத்தை சரிசெய்யும். கிடைக்கும் இடத்தைப் பொறுத்து படமும் உரையும் வித்தியாசமாக சீரமைக்கப்படும்.
    </p>
    <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
    >மேலும் அறிக</a>
  </div>
</div>

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

மேம்பட்ட கண்டெய்னர் குவரீ நுட்பங்கள்

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

கொள்கலன் பெயர்களைப் பயன்படுத்துதல்

நீங்கள் `container-[name]` வகுப்பைப் பயன்படுத்தி உங்கள் கொள்கலன்களுக்கு பெயர்களை ஒதுக்கலாம். இது ஒரு கூறு படிநிலைக்குள் குறிப்பிட்ட கொள்கலன்களைக் குறிவைக்க உங்களை அனுமதிக்கிறது. உதாரணமாக:

<div class="container-query container-primary">
  <div class="container-query container-secondary">
    <p class="cq-primary-sm:text-lg cq-secondary-md:text-xl">இந்த உரை இரண்டு கொள்கலன்களுக்கும் ஏற்ப மாறும்.</p>
  </div>
</div>

இந்த எடுத்துக்காட்டில், `container-primary` குறைந்தது `sm` அளவில் இருக்கும்போது உரையின் அளவு `text-lg` ஆகவும், `container-secondary` குறைந்தது `md` அளவில் இருக்கும்போது `text-xl` ஆகவும் இருக்கும்.

கொள்கலன் பாணிகளைக் கேள்விக்குட்படுத்துதல்

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

சிக்கலான லேஅவுட்களுடன் வேலை செய்தல்

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

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

கண்டெய்னர் குவரீஸ்களின் பயனுள்ள மற்றும் பராமரிக்கக்கூடிய பயன்பாட்டை உறுதிப்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

ரெஸ்பான்சிவ் வடிவமைப்பிற்கான உலகளாவிய கருத்தாய்வுகள்

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

உலகளாவிய ரெஸ்பான்சிவ் வடிவமைப்பின் எடுத்துக்காட்டுகள்

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

முடிவுரை

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

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