पाठ 21 / 25

आधुनिक CSS features

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

Responsive sizing के लिए CSS clamp()

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

/* 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 करते हुए।

/* 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।

.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 नहीं करते।

/* 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)); }
}