Wane ayyukan CSS na zamani da sifofi da suka sauki tsarin (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

CSS na zamani ya kara ayyuka da kaddarorin da suka maye gurbin jerin dabaru-alhaki media da abubuwan JavaScript ba daidai ba. Shukunanin gida:

## clamp() — cikakke ƙiyaye

```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)` yana ba da **adadi/nisantsi masu ƙarfi** wanda ke daidaitawa saikwaici tare da fasalin gida amma ya kasance a cikin iyakokin — maye gurbin bukatuwar cikakke media queries `font-size` tare da layin daya.

## aspect-ratio — kiyaye rababodan daidai

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

Kafilaɗin da, kiyaye akwatin 16:9 wanda ba tarayya ba ya buƙaci shaɗin `padding-bottom: 56.25%`. Yanzu, gida gida ne — kuma yana ajiyar sarari (kyau don CLS) kafin alluran karuwa.

## 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()` zaɓa ƙarami/babbar ƙima, yana ba da daya abubuwa don zama tarayya ba tare da media query (misali "90% faɗa, amma ba wuce 1200px ba").

## subgrid — daidaita grids masu nada

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

`subgrid` yana ba da samari grid wanda ya jajjaɓa layin waje na uwar sa, don abubuwa a keɓe kayyai (taken, jiki, buttons) daidai-daidai a kan layukan da aka raba — a gida ba mai yiwuwa ba tare da tsayin da aka kaɓa ba.

## rakumi a ko'ina da taimakon logician

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

## Me ya sa yana da mahimmanci

Wa abubuwa waɗannan suna kawar da shareɗun nan da suka gabata: `clamp()`/`min()`/`max()` maye abubuwan media queries gajere don girman ɗigunan, `aspect-ratio` maye shaɗin padding kuma yana karbar fuscar layout, kuma `subgrid` ya warware daidaitawa ta tsakani-abin.

Suna sa tsarin waje na mai karƙatakurwa da daidai-daidai a taƙashi da ɗumiya — CSS na zamani yana buɗa saniyarche abin da ya buƙaci JS ko karkatai maras kyau.