جدید CSS فنکشنز اور خصوصیات جو لے آؤٹ کو سادہ بناتی ہیں (clamp، aspect-ratio، subgrid)؟

Question

Accepted Answer

جدید CSS نے فنکشنز اور properties شامل کی ہیں جو media-query اور 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)` **سیال typography/spacing** دیتا ہے جو viewport کے ساتھ آسانی سے سکیل ہوتا ہے لیکن حدود میں رہتا ہے — کئی breakpoints کے `font-size` media queries کو ایک لائن سے بدل دیتا ہے۔

## 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 */
```

اس سے پہلے، responsive 16:9 باکس رکھنے کے لیے `padding-bottom: 56.25%` کی بدنام ترکیب درکار تھی۔ اب یہ ایک declaration ہے — اور یہ space محفوظ رکھتا ہے (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()` اقدار میں سے چھوٹی/بڑی منتخب کرتے ہیں، ایک property کو media query کے بغیر responsive بناتے ہیں (مثال کے طور پر "90% چوڑا، لیکن کبھی 1200px سے زیادہ نہیں")۔

## subgrid — nested grids کو محاذ میں رکھیں

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

`subgrid` ایک nested grid کو **اپنی parent کی track lines کو وراثت میں دیتا ہے**، تاہم الگ الگ cards (titles، bodies، buttons) میں items مشترکہ rows پر بالکل محاذ میں رہیں — پہلے fixed heights کے بغیر ممکن نہ تھا۔

## gap ہر جگہ اور منطقی معاونین

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

## یہ کیوں اہم ہے

یہ خصوصیات طویل المدتی ترکیبوں کو ختم کرتی ہیں: `clamp()`/`min()`/`max()` سیال sizing کے لیے media queries کے stacks کو بدلتے ہیں، `aspect-ratio` padding کی ترکیب کو بدلتا ہے اور layout shift سے محفوظ رکھتا ہے، اور `subgrid` cross-component alignment کو حل کرتا ہے۔

یہ responsive، proportional layouts کو بہت سادہ اور زیادہ مضبوط بناتے ہیں — جدید CSS وہ کام declaratively کرتا ہے جو پہلے JS یا نازک ترکیبوں کی ضرورت تھی۔