ฟังก์ชัน CSS สมัยใหม่และคุณสมบัติใดที่ช่วยลดความซับซ้อนของเลเอาต์ (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

CSS สมัยใหม่ได้เพิ่มฟังก์ชันและคุณสมบัติที่แทนที่หมวดหมู่ทั้งหมดของการค้นหาข่าว media และเทคนิค 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)` ให้ **typography/spacing แบบไหลบ่า** ที่ปรับขนาดได้อย่างราบรื่นด้วย viewport แต่ยังคงอยู่ภายในขอบเขต — แทนที่การ query `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 */
```

มาก่อนหน้านี้ การรักษาช่อง 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()` เลือกค่าที่เล็กกว่า/ใหญ่กว่า ทำให้คุณสมบัติหนึ่งตอบสนองได้โดยไม่ต้องใช้ media query (เช่น "กว้าง 90% แต่ไม่เกิน 1200px")

## subgrid — จัดแนว grids ที่ซ้อนกัน

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

`subgrid` อนุญาตให้ grid ที่ซ้อนกัน **สืบทอดบรรทัดติดตามของพ่อแม่** ดังนั้นรายการในการ์ดแยกต่างหาก (ชื่อเรื่อง เนื้อหา ปุ่ม) จึงจัดแนวได้อย่างสมบูรณ์แบบในแถวที่ใช้ร่วมกัน — ก่อนหน้านี้เป็นไปไม่ได้หากไม่มีความสูงที่กำหนดไว้

## gap ทุกที่ & ผู้ช่วยเชิงตรรกะ

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

## ทำไมสิ่งนี้จึงสำคัญ

คุณสมบัติเหล่านี้กำจัดเทคนิคระยะยาว: `clamp()`/`min()`/`max()` แทนที่กองข้อความค้นหา media สำหรับการปรับขนาดแบบไหลบ่า `aspect-ratio` แทนที่เทคนิค padding และปกป้องการเปลี่ยนแปลงเลเอาต์ และ `subgrid` แก้ปัญหาการจัดแนวข้ามส่วนประกอบ

พวกเขาทำให้เลเอาต์ที่ตอบสนอง มีสัดส่วน ง่ายขึ้นอย่างมากและแข็งแกร่งขึ้น — CSS สมัยใหม่ทำการประกาศสิ่งที่เคยต้องใช้ JS หรือเทคนิคที่ทำให้เสียหาย