mobile-first responsive strategy என்றால் என்ன, மற்றும் container query-கள் அதில் எப்படிப் பொருந்துகின்றன?

Question

Accepted Answer

**Mobile-first** என்பது உங்கள் base style-களை **மிகச் சிறிய திரைக்காக** எழுதி, பின்னர் `min-width` media query-களைக் கொண்டு பெரிய திரைகளுக்கு சிக்கலை *சேர்ப்பது* — desktop-இல் தொடங்கி பின்னர் விஷயங்களை அகற்றுவதைக் காட்டிலும்.

## நடைமுறையில் mobile-first

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**Mobile-first ஏன் வெல்கிறது:** base CSS குறைந்தபட்சமாக இருக்கிறது (mobile-க்கு அதற்குத் தேவையானது மட்டுமே கிடைக்கிறது — பலவீனமான சாதனங்களில் செயல்திறனுக்கு நல்லது), மேலும் நீங்கள் சிக்கலை *அடுக்கடுக்காகச் சேர்க்கிறீர்கள்*, இது அதை override செய்வது/அகற்றுவதை விட எளிதாக யோசிக்கக்கூடியது. content ஒரு column-லிருந்து பலவாக இயற்கையாக மீண்டும் பாயும் விதத்துடனும் இது பொருந்துகிறது.

## media query-களின் வரம்பு

Media query-கள் **viewport**-க்கு — முழு window-க்கு — பதிலளிக்கின்றன. ஆனால் ஒரு மறுபயன்பாட்டுக்குரிய component (சொல்லுங்கள் ஒரு card) ஒரே page-இல் ஒரு அகலமான main பகுதியில் *அல்லது* ஒரு குறுகலான sidebar-இல் தோன்றலாம். *component*-க்கு உண்மையில் எவ்வளவு இடம் இருக்கிறது என்பதை viewport அகலத்தால் சொல்ல முடியாது.

## Container query-கள் இதைத் தீர்க்கின்றன

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

இப்போது அதே card, *அதன் container* ≥400px ஆக இருக்கும்போதெல்லாம் — அது திரை பெரியதாக இருப்பதாலோ அல்லது அது ஒரு அகலமான column-இல் இருப்பதாலோ — தானாகவே ஒரு horizontal layout-க்கு மாறுகிறது. component உண்மையாகவே **சூழல்-சார்பற்றதாகவும் மறுபயன்படுத்தக்கூடியதாகவும்** ஆகிறது.

## இவை ஒன்றையொன்று நிறைவு செய்கின்றன

- **Media query-கள்** — page-நிலை layout, உலகளாவிய breakpoint-கள், பயனர் விருப்பத்தேர்வுகள் (dark mode, reduced motion).
- **Container query-கள்** — மறுபயன்பாட்டுக்குரிய component-களுக்கான component-நிலை responsiveness.

## இது ஏன் முக்கியம்

Mobile-first, responsive CSS-ஐ இலகுவாகவும் பராமரிக்கக்கூடியதாகவும் வைத்திருக்கிறது.

Container query-கள் ஒரு முக்கிய முன்னேற்றம்: component-கள் தங்கள் *சொந்த* கிடைக்கும் இடத்திற்குப் பதிலளிக்க அவை அனுமதிக்கின்றன, இது ஒரே component பல சூழல்களில் வந்திறங்கும் component-அடிப்படையிலான கட்டமைப்பில் (design system-கள், மறுபயன்பாட்டுக்குரிய card-கள்/widget-கள்) நீங்கள் சரியாகத் தேவைப்படுவது.