# आधुनिक CSS features — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/css-modern-features

> clamp(), aspect-ratio, gap, और अन्य आधुनिक CSS properties जो responsive design को simpler और अधिक intuitive बनाते हैं।

## Responsive sizing के लिए CSS clamp()

clamp(min, preferred, max) media queries के बिना values को smoothly scale करता है।

```css
/* Padding grows from 1rem to 3rem as viewport scales */
.section { padding: clamp(1rem, 3vw, 3rem); }

/* Font size scales smoothly from 14px to 20px */
body { font-size: clamp(0.875rem, 1.5vw, 1.25rem); }

/* Width scales with min and max */
.container { width: clamp(300px, 90%, 1200px); }
```

## Media के लिए aspect-ratio

Image और video aspect ratio को automatically preserve करें, layout shift को prevent करते हुए।

```css
/* Reserve space for image before it loads */
img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

/* Video player */
video { aspect-ratio: 16 / 9; width: 100%; }
```

## Consistent spacing के लिए gap

Margin hacks के बिना flex और grid items के बीच unified spacing।

```css
.flex-row {
  display: flex;
  gap: 1rem; /* Space between all items */
  flex-wrap: wrap;
}

.grid {
  display: grid;
  gap: 1.5rem; /* Row and column spacing */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
```

## Modern CSS के लिए browser support

clamp(), gap, aspect-ratio modern browsers में well supported हैं। Older features के लिए caniuse.com check करें।

## Modern CSS के लिए safe fallbacks

Older browsers के लिए fallbacks use करें जो modern features को support नहीं करते।

```css
/* Fallback for older browsers */
.card { width: 33.333%; float: left; }

/* Modern browsers */
@supports (display: grid) {
  .card { width: auto; float: none; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
```