Kokie šiuolaikiniai CSS funkcionalumai ir savybės supaprastina maketą (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

Šiuolaikinis CSS pridėjo funkcijas ir savybes, kurios pakeičia dideles `media-query` ir JavaScript gudruolių kategorijas. Išsiskiriantys:

## clamp() — sklandžios, ribojamos reikšmės

```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)` suteikia **sklandžią tipografiją/tarpus**, kurie sklandžiai keičiasi su rodinio dydžiu, bet išlieka ribose — pakeičiant kelių tūpiklių `font-size` media užklausas viena eilute.

## aspect-ratio — palaikyti proporcijas

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

Prieš tai, saugant atsakomingą 16:9 laukelį, reikėjo žinomo `padding-bottom: 56.25%` triuko. Dabar tai viena deklaracija — ir ji rezervuoja vietą (gerai CLS) prieš įkeliant vaizdulius.

## 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()` pasirenka mažesnę/didesnę iš reikšmių, leidžiant vienai savybei būti atsakomingai be media užklausos (pvz., "90% plati, bet ne daugiau nei 1200px").

## subgrid — sulygiuoti įdėtus tinklelius

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

`subgrid` leidžia įdėtam tinkleliui **paveldėti jo tėvinio takelių linijas**, todėl elementai keliuose kortelėse (antraštės, kūnai, mygtukai) puikiai sulygiuoti bendrose eilutėse — anksčiau tai buvo neįmanoma be fiksuotų aukščių.

## gap visur ir loginiai pagalbininkai

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

## Kodėl tai svarbu

Šios savybės eliminuoja ilgai naudotus triukus: `clamp()`/`min()`/`max()` pakeičia media užklausų krūvas sklandžiam dydžiui, `aspect-ratio` pakeičia padding triuką ir apsaugo maketą nuo poslinkio, o `subgrid` sprendžia tarpkomponentinį sulygiavimą.

Jie daro atsakomagus, proporcingus maketavimus drastiškai paprastesnius ir patikimesnius — šiuolaikinis CSS deklaratyviai daro tai, kas anksčiau reikėjo JS arba trapių gudruolių.