என்றாவது நவீன CSS செயல்பாடுகள் மற்றும் அம்சங்கள் தளவமைப்பை எளிமைப்படுத்துகின்றன (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

நவீன CSS ஆனது மீடியா-கேரி மற்றும் JavaScript வேலைக்களை பூரணமாக மாற்றக்கூடிய செயல்பாடுகள் மற்றும் பண்புகளைச் சேர்த்துள்ளது. குறிப்பிடத்தக்கவை:

## clamp() — திரவ, வரம்புள்ள மதிப்புகள்

```css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/*               │       │     └── maximum (never bigger than 3rem) */
/*               │       └──────── preferred (scales with viewport) */
/*               └──────────────── minimum (never smaller than 1.5rem) */
```

`clamp(min, preferred, max)` **திரவ அச்சுக்்கலை/இடைவெளியை** வழங்குகிறது, இது பார்வை துறை முழுவதும் மென்மையாக அளவாக ஆனால் வரம்புக்குள் இருக்கும் — பல முறிவு புள்ளிகளின் `font-size` மீடியா வினவல்களை ஒரு வரியுடன் மாற்றுகிறது।

## aspect-ratio — விகிதாசாரத்தை பராமரிக்கவும்

```css
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; }                    /* perfect square at any width */
```

இதற்கு முன், ஒரு வினையுள்ள 16:9 பெட்டியைக் கட்டுப்படுத்துவதற்கு कুখ్यात `padding-bottom: 56.25%` தந்திரம் தேவையாயிருந்தது. இப்போது இது ஒரு பிரகடனம் — மற்றும் சிற்றுருப் பதிவுசெய்யப்பட்டதற்கு முன் இடத்தை ஒதுக்கக்கூடும் (CLS க்கு நல்லது)।

## min() / max()

```css
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); }       /* whichever is LARGER → a minimum floor */
```

`min()`/`max()` சிறிய/பெரிய மதிப்பைத் தேர்ந்தெடுக்கவும், ஒரு சொத்து மீடியா கேரி இல்லாமல் வினையுள்ளதாக இருக்க அனுமதிக்கவும் (எ.கா "90% அகலம், ஆனால் 1200px ஐ விட அதிகமில்லை")।

## subgrid — பிணைந்த கட்ட வரிசைகளை சீரமைக்கவும்

```css
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
```

`subgrid` ஒரு பிணைந்த கட்டத்திற்கு **அதன் பெற்றோரின் பாதை கோட்டை மரபுரிமை செய்வதை** அனுமதிக்கிறது, எனவே தனித்த அட்டைகளிலுள்ள உருப்படிகள் (தலைப்புகள், உடல்கள், பொத்தான்கள்) பகிரப்பட்ட வரிகளில் சிறந்தமாக சீரமைக்கப்படுகின்றன — முன்னர் நிலையான உচ்சதைகள் இல்லாமல் சாத்தியமாக இல்லை।

## எல்லா இடங்களிலும் இடைவெளி & தர்க்க உதவிகள்

```css
.flex { display: flex; gap: 1rem; }   /* gap now works in flexbox, not just grid */
```

## அது ஏன் முக்கியமாக உள்ளது

இந்த அம்சங்கள் நீண்ட கால வேலைக்களை நீக்குகின்றன: `clamp()`/`min()`/`max()` திரவ அளவுக்கான மீடியா வினவலின் கசை மாற்றுகிறது, `aspect-ratio` பணி திரட்டை மாற்றுகிறது மற்றும் தளவமைப்பு மாற்றத்திற்கு பாதுகாப்பு அளிக்கிறது, மற்றும் `subgrid` உপাদানங்களுக்கு இடையে சீரமைப்பை தீர்க்கிறது।

ியாணை, விகிதாசாரமான தளவமைப்புகளை வியத்திற்குரியமாக எளிதாக்கு் மற்றும் மேலும் வலுவாக்கு — நவீன CSS தெளிவாக என்ன குறிப்பிட்டு முன்னர் JS அல்லது குறைந்த வேலைக்களுக்கு தேவைப்பட்டது.