10 Modern CSS Features You Want to Use

*inspired from Rails designers article(opens in a new tab)

This article explores powerful modern CSS features that eliminate the need for many preprocessors and complex workarounds. These features are now supported across modern browsers and represent a significant evolution in CSS capabilities.

📊 Math Functions: min(), max(), and clamp()

What they do: Dynamic sizing functions that automatically choose values based on conditions.

Key Features:

• min() - Sets a maximum limit (picks the smaller value)
• max() - Sets a minimum limit (picks the larger value)
• clamp() - Combines both with min, preferred, and max values

Use Cases:

• Responsive typography: font-size: clamp(1.5rem, 5vw, 3rem)
• Flexible containers: width: min(300px, 90%)
• Accessible button sizes: width: max(300px, 20%)

Documentation:

• clamp() - MDN(opens in a new tab)
• min() - MDN(opens in a new tab)
• CSS Min, Max, and Clamp Functions - web.dev(opens in a new tab)

📦 Container Queries

What they do: Apply styles based on a container's size instead of viewport size, enabling truly reusable components.

Key Features:

• container-type property to establish containment context
• @container rule for size-based queries
• Component-level responsive design

Use Cases:

• Cards that adapt layout based on available space
• Sidebar components that work in any context
• Reusable UI components

Example:

.cards {
  container-type: inline-size;
}

@container (width > 200px) {
  .card {
    flex-direction: row;
  }
}

Documentation:

• CSS Container Queries - MDN(opens in a new tab)
• Using Container Size and Style Queries - MDN(opens in a new tab)
• @container - MDN(opens in a new tab)

✍️ Advanced Text Wrapping: text-wrap: balance & pretty

What they do: Improve typography by controlling how text breaks across lines.

Key Features:

• balance - Creates visually balanced line lengths (ideal for headings)
• pretty - Prevents orphaned words and improves paragraph flow

Use Cases:

• Headlines with balanced line breaks
• Body text without awkward single-word lines
• Improved reading experience

Documentation:

• text-wrap - MDN(opens in a new tab)
• text-wrap-style - MDN(opens in a new tab)
• CSS text-wrap: balance - Chrome Developers(opens in a new tab)

🎬 @starting-style

What they do: Define starting styles for elements appearing from display: none, enabling smooth entry animations.

Key Features:

• Enables transitions from display: none
• Works with popovers, modals, and dynamic content
• Can be used standalone or nested within rulesets

Example:

.modal.open {
  display: block;
  opacity: 1;
  transition: opacity 300ms;
}

@starting-style {
  .modal.open {
    opacity: 0;
  }
}

Documentation:

• @starting-style - MDN(opens in a new tab)
• @starting-style - CSS-Tricks(opens in a new tab)
• Using CSS Transitions - MDN(opens in a new tab)

🎯 :has() - The Parent Selector

What they do: Select parent elements based on their children's characteristics.

Key Features:

• Parent selector functionality
• Previous sibling selection
• Conditional styling based on content

Use Cases:

• Style cards containing error messages
• Form groups with required inputs
• Layout adjustments based on content presence

Example:

.card:has(.error-message) {
  border-color: red;
  background: rgb(255 0 0 / .05);
}

Documentation:

• :has() - MDN(opens in a new tab)
• CSS Has Selector Support - Can I Use(opens in a new tab)

📱 Media Query Range Syntax

What they do: Simplified syntax for setting min/max ranges using mathematical comparison operators.

Key Features:

• Cleaner syntax with <=, >=, <, >
• More intuitive range definitions
• Reduced verbosity

Examples:

/* Old syntax */
@media (min-width: 768px) and (max-width: 1199px) {
  .card { width: 65ch; }
}

/* New range syntax */
@media (768px <= width <= 1199px) {
  .card { width: 65ch; }
}

Documentation:

• Using Media Queries - MDN(opens in a new tab)
• Media Query Range Syntax - Can I Use(opens in a new tab)
• The New CSS Media Query Range Syntax - CSS-Tricks(opens in a new tab)

🌓 light-dark() Function

What they do: Automatically switch between light and dark color values based on user's color scheme preference.

Key Features:

• Automatic theme switching
• Works with color-scheme property
• No need for separate media queries

Example:

:root {
  color-scheme: light dark;
}

.card {
  background: light-dark(#f1f5f9, #0f172a);
  color: light-dark(#0f172a, #f1f5f9);
}

Documentation:

• light-dark() - MDN(opens in a new tab)
• color-scheme - MDN(opens in a new tab)
• light-dark() - CSS-Tricks(opens in a new tab)

🎨 color-scheme Property

What they do: Tell the browser which color schemes a component supports, affecting native UI elements.

Key Features:

• Controls browser UI (scrollbars, form controls)
• Works with light-dark() function
• Can be set globally or per component

Documentation:

• color-scheme - MDN(opens in a new tab)
• prefers-color-scheme - MDN(opens in a new tab)

🪆 CSS Nesting

What they do: Nest CSS selectors inside other selectors, similar to Sass/Less preprocessors.

Key Features:

• Native browser support for nesting
• & selector for parent references
• Cleaner, more maintainable CSS
• Can nest media queries and other at-rules

Example:

.card {
  padding: .75rem 1.25rem;
  background-color: #fff;

  & .header {
    font-size: 1.7rem;
  }

  &:hover {
    background: #f1f5f9;
  }

  @media (width > 768px) {
    padding: 1rem 1.375rem;
  }
}

Documentation:

• CSS Nesting - MDN(opens in a new tab)
• CSS Nesting - Chrome Developers(opens in a new tab)
• CSS Nesting Support - Can I Use(opens in a new tab)

📏 Modern CSS Units

What they do: More precise and flexible sizing options for modern web development.

Font-based Units:

• em - Relative to parent element's font size
• rem - Relative to root element's font size
• ex - Height of lowercase "x"
• ch - Width of "0" character
• lh - Equal to line-height

Viewport Units:

• vh/vw - Viewport height/width
• vmin/vmax - Smaller/larger viewport dimension

Modern Viewport Units:

• dvh/dvw - Dynamic viewport (adjusts for mobile browser UI)
• svh/svw - Small viewport (smallest possible)
• lvh/lvw - Large viewport (largest possible)

Documentation:

• CSS Values and Units - MDN(opens in a new tab)

🏗️ @layer - Cascade Layers

What they do: Explicitly control CSS specificity by creating ordered layers, solving cascade conflicts.

Key Features:

• Define explicit cascade order
• Override specificity wars
• Better organization of CSS from different sources
• Integration with frameworks and third-party CSS

Example:

@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; /* This wins over component padding */
  }
}

Documentation:

• @layer - MDN(opens in a new tab)
• Cascade Layers - MDN Learn(opens in a new tab)
• CSS Cascade Layers Guide - CSS-Tricks(opens in a new tab)

🚀 Benefits of Modern CSS

These features represent a significant evolution in CSS capabilities:

1. Reduced Dependencies - Less need for preprocessors like Sass/Less
2. Better Performance - Native browser optimizations
3. Improved Maintainability - Cleaner, more semantic code
4. Enhanced Responsiveness - More flexible and contextual designs
5. Future-Proof - Built on open web standards

🌐 Browser Support

Most of these features have good modern browser support, but always check Can I Use(opens in a new tab) for the latest compatibility information before implementing in production.

This summary covers modern CSS features that are transforming how we write styles, making CSS more powerful and developer-friendly than ever before.