10 Modern CSS Features You Want to Use

1. Min, max and clamp

Putting these together as they are overlapping.

min()

/* Keeps buttons from getting too wide on large screens */
.pricing-button {
  width: min(300px, 90%);
}

max()

/* Ensures text stays readable even on tiny screens */
.terms-container {
  font-size: max(16px, 1.2vw);
}

max() is like setting a minimum value, but it picks the larger option. Perfect for preventing elements from shrinking too much on mobile devices.

Leave a Reply

Your email address will not be published. Required fields are marked *