Fungsi dan fitur CSS modern apa yang menyederhanakan tata letak (clamp, aspect-ratio, subgrid)?

Question

IT Interview Practice · Accepted Answer

CSS modern telah menambahkan fungsi dan properti yang menggantikan seluruh kategori media-query dan JavaScript hack. Fitur-fitur terbaik:

## clamp() — nilai fluida, terbatas

```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)` memberikan **tipografi/spasi fluida** yang diskalakan dengan mulus sesuai viewport tetapi tetap berada dalam batas — menggantikan beberapa breakpoint `font-size` media query dengan satu baris.

## aspect-ratio — pertahankan proporsi

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

Sebelum ini, mempertahankan kotak responsif 16:9 memerlukan hack terkenal `padding-bottom: 56.25%`. Sekarang hanya satu deklarasi — dan itu menyediakan ruang (baik untuk CLS) sebelum gambar dimuat.

## 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()` memilih nilai yang lebih kecil/lebih besar, membuat satu properti responsif tanpa media query (misalnya "lebar 90%, tetapi tidak pernah lebih dari 1200px").

## subgrid — selaraskan grid bertingkat

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

`subgrid` memungkinkan grid bertingkat **mewarisi garis trek induk**, sehingga item di berbagai kartu (judul, isi, tombol) selaras sempurna pada baris bersama — sebelumnya mustahil tanpa tinggi tetap.

## gap di mana-mana & pembantu logis

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

## Mengapa penting

Fitur ini menghilangkan hack berumur panjang: `clamp()`/`min()`/`max()` menggantikan tumpukan media query untuk pengukuran fluida, `aspect-ratio` menggantikan hack padding dan melindungi dari pergeseran tata letak, dan `subgrid` menyelesaikan penyelarasan lintas komponen.

Mereka membuat tata letak responsif dan proporsional secara dramatis lebih sederhana dan tangguh — CSS modern melakukannya secara deklaratif apa yang sebelumnya memerlukan JS atau trik yang rapuh.

clamp() — nilai fluida, terbatas

aspect-ratio — pertahankan proporsi

min() / max()

subgrid — selaraskan grid bertingkat

gap di mana-mana & pembantu logis

Mengapa penting

Soalan berkaitan