ما وظائف وميزات CSS الحديثة التي تبسط التخطيط (clamp، aspect-ratio، subgrid)؟

Question

Accepted Answer

أضاف CSS الحديث وظائف وخصائص تحل محل فئات كاملة من حيل 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)` توفر **طباعة/تباعد سائل** يتغير بسلاسة مع viewport لكن يبقى ضمن الحدود — مما يحل محل عدة نقاط فاصلة من استعلامات `font-size` media بسطر واحد.

## 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%` سيئة السمعة. الآن إنها إعلان واحد — وتحتفظ بمساحة (جيد ل 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()` اختر الأصغر/الأكبر من القيم، مما يسمح بجعل خاصية واحدة responsive بدون استعلام media (مثل "90% واسع، لكن لا يتجاوز 1200px أبداً").

## subgrid — محاذاة الشبكات المتداخلة

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

`subgrid` يسمح لشبكة متداخلة **بوراثة خطوط المسار الأب**، بحيث تتماشى العناصر عبر بطاقات منفصلة (العناوين، المحتويات، الأزرار) تماماً على صفوف مشتركة — كان مستحيلاً سابقاً بدون ارتفاعات ثابتة.

## gap في كل مكان & مساعدات منطقية

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

## لماذا يهم

تلغي هذه الميزات حيل طويلة الأمد: `clamp()`/`min()`/`max()` تحل محل أكوام من استعلامات media للحجم السائل، `aspect-ratio` تحل محل حيلة padding وتحمي من تحول التخطيط، و `subgrid` تحل مشكلة المحاذاة عبر المكونات.

تجعل التخطيطات responsive والمتناسبة أبسط بكثير وأكثر قوة — CSS الحديث يفعل بشكل تصريحي ما كان يحتاج JS أو حيل غير مستقرة.