10 Modern CSS Features You Want to Use

If you've been developing with frameworks like Tailwind CSS or working primarily with JavaScript, you might have missed some incredible advancements in native CSS. The landscape of web styling has evolved dramatically, and CSS has matured into a powerful language with features that were once only possible through preprocessors or JavaScript.

Let's explore 10 modern CSS features that are transforming how we style web applications in 2025.

Min, Max, and Clamp Functions

These three powerful functions give you precise control over your values:

min()

/* Keep elements from getting too wide */
.pricing-button {
  width: min(300px, 90%);
}

The min() function essentially sets an upper limit, choosing the smaller of the provided values. Perfect for responsive designs that need constraints.

max()

/* Maintain readable text size */
.terms-container {
  font-size: max(16px, 1.2vw);
}

Think of max() as your safety net for minimum values, ensuring elements don't become too small on mobile devices.

clamp()

/* Fluid typography that stays within bounds */
.dashboard-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

clamp() combines both worlds, providing minimum, preferred, and maximum values in one elegant function.

Container Queries

Container queries represent a paradigm shift in responsive design:

/* Define the container context */
.cards {
  container-type: inline-size;
}
 
/* Base card styles */
.card {
  padding: .75rem 1.25rem;
  background: white;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
 
/* Responsive changes based on container */
@container (width > 200px) {
  .card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

Text Wrapping Controls

New text wrapping properties provide better typography control:

/* Better heading line distribution */
.section-title {
  text-wrap: balance;
}
 
/* Improved paragraph endings */
.card-description {
  text-wrap: pretty;
}

@starting-style

Finally, proper animation control for display: none elements:

.modal {
  display: none;
  opacity: 1;
}
 
.modal.open {
  display: block;
  transition: opacity 300ms;
  opacity: 1;
}
 
@starting-style {
  .modal.open {
    opacity: 0;
  }
}

:has() Parent Selector

The long-awaited parent selector is here:

/* Style cards containing errors */
.card:has(.error-message) {
  border-color: red;
  background: rgb(255 0 0 / .05);
}
 
/* Mark required form groups */
.form-group:has(input[required]) {
  &::before {
    content: "*";
    color: red;
  }
}

Simplified Media Queries

Modern syntax for media queries is much cleaner:

/* New range syntax */
@media (768px <= width <= 1199px) {
  .card { width: 65ch; }
}
 
.container {
  @media (width < 768px) {
    padding: 1rem;
  }
 
  @media (width >= 1200px) {
    max-width: 1140px;
  }
}

Light-Dark Color Management

Effortless dark mode implementation:

.card {
  background: light-dark(#f1f5f9, #0f172a);
  color: light-dark(#0f172a, #f1f5f9);
  border: 1px solid light-dark(rgb(226, 232, 240), rgb(51, 65, 85));
}

Color Scheme Support

Native color scheme management:

:root {
  color-scheme: dark light;
}
 
.themed-card {
  color-scheme: light;
}
 
.code-editor {
  color-scheme: dark;
}

Native CSS Nesting

Say goodbye to preprocessors for nesting:

.card {
  padding: .75rem 1.25rem;
  background-color: #fff;
  border-radius: 1rem;
 
  & .header {
    font-size: 1.7rem;
  }
 
  &:hover {
    background: #f1f5f9;
  }
 
  @media (width > 768px) {
    padding: 1rem 1.375rem;
  }
}

Modern CSS Units

The latest viewport units and more:

.container {
  /* Dynamic viewport units */
  height: dvh;
  width: dvw;
  
  /* Small viewport units */
  min-height: svh;
  
  /* Large viewport units */
  max-height: lvh;
}

@layer for Style Management

Control specificity with layers:

@layer reset, components, utilities;
 
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}
 
@layer components {
  .button {
    padding: .5rem 1rem;
    background: blue;
  }
}
 
@layer utilities {
  .p-4 {
    padding: 1.25rem;
  }
}

CSS has come a long way from its early days of spacer.gif and image-based border-radius. These modern features show how the language has matured to meet the demands of contemporary web development. Whether you're using a framework or writing vanilla CSS, understanding these features will make you a more effective developer.

What's your favorite modern CSS feature? Have you started using any of these in your projects? Share your thoughts and experiences in the comments below!