Hangi modern CSS işlevleri ve özellikleri düzeni basitleştirir (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

Modern CSS, medya sorgusunun tamamını ve JavaScript hack'lerinin tamamını değiştiren işlevler ve özellikler eklemiştir. Öne çıkanlar:

## clamp() — akışkan, sınırlı değerler

```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)` **akışkan tipografi/boşluk** sağlar ve viewport ile düzgün şekilde ölçeklenir, ancak sınırlar içinde kalır — birçok kesme noktasının `font-size` medya sorgularını tek bir satırla değiştirir.

## aspect-ratio — oranları koru

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

Daha önce, duyarlı bir 16:9 kutusunu korumak, kötü ünlü `padding-bottom: 56.25%` hile gerektiriyordu. Şimdi bu tek bir bildirim — ve resimleri yüklemeden önce alan ayırır (CLS için iyi).

## 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()` küçük/büyük değeri seçer, bir özelliğin medya sorgusu olmadan duyarlı olmasına izin verir (örn. "% 90 geniş, ancak hiçbir zaman 1200px'den fazla olmayan").

## subgrid — iç içe geçmiş ızgaraları hizala

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

`subgrid`, iç içe geçmiş bir ızgaranın **ana öğesinin parça satırlarını miras almasına** izin verir, bu nedenle ayrı kartlar üzerindeki öğeler (başlıklar, gövdeler, düğmeler) paylaşılan satırlarda mükemmelen hizalanır — daha önce sabit yükseklikler olmadan imkansızdı.

## her yerde boşluk & mantıksal yardımcılar

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

## Neden önemli

Bu özellikler uzun süreli hack'leri ortadan kaldırır: `clamp()`/`min()`/`max()` akışkan boyutlandırma için medya sorgusu yığınlarını değiştirir, `aspect-ratio` dolgu hile'sini değiştirir ve düzen kaydırmasını korur ve `subgrid` bileşenler arasında hizalamayı çözer.

Duyarlı, orantılı düzenleri önemli ölçüde daha basit ve daha sağlam hale getirirler — modern CSS, bildirimsel olarak daha önce JS veya kırılgan hileler gerektiren şeyi yapar.