Modern CSS Features

What Are Modern CSS Features?

Modern CSS features are newer CSS capabilities supported by modern browsers that reduce the need for JavaScript, preprocessors, and complex workarounds. They help developers write cleaner, more responsive, and more scalable styles.

:root {
  --color-primary: #0d6efd;
}

.card {
  container-type: inline-size;
  color: var(--color-primary);
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Modern CSS Features Cheatsheet

CSS Variables

CSS variables, also called custom properties, store reusable values for colors, spacing, typography, shadows, and themes.

:root {
  --color-primary: #0d6efd;
  --space-md: 1rem;
  --radius-lg: 1rem;
}

.button {
  background-color: var(--color-primary);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

CSS Container Queries

Container queries allow components to respond to their own container size instead of the full viewport size.

.card-wrapper {
  container-type: inline-size;
}

.card {
  display: block;
}

@container (min-width: 500px) {
  .card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1rem;
  }
}

This is useful for reusable cards, sidebars, dashboards, widgets, and design systems.

CSS Cascade Layers

Cascade layers help control CSS priority without increasing selector specificity.

@layer reset, base, components, utilities;

@layer base {
  body {
    font-family: system-ui, sans-serif;
  }
}

@layer components {
  .button {
    background-color: #0d6efd;
  }
}

@layer utilities {
  .bg-success {
    background-color: #198754;
  }
}

CSS Nesting

CSS nesting lets you write related selectors inside a parent selector.

.card {
  padding: 1rem;
  border: 1px solid #dee2e6;

  &:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  }

  & h2 {
    margin-bottom: 0.5rem;
  }
}

Keep nesting shallow to avoid overly specific and hard-to-maintain selectors.

The CSS :has() Selector

The :has() selector lets you style an element based on what it contains.

.card:has(img) {
  display: grid;
  gap: 1rem;
}

.form-field:has(input:invalid) {
  border-color: #dc3545;
}

This is useful for parent styling, form states, cards, layouts, and conditional UI.

clamp(), min(), and max()

Modern CSS math functions make responsive sizing easier.

.hero-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
}

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.card {
  padding: max(1rem, 2vw);
}

CSS Subgrid

Subgrid allows nested grid items to align with the rows or columns of their parent grid.

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.product-card {
  display: grid;
  grid-template-rows: subgrid;
}

Subgrid is useful for aligned cards, forms, dashboards, and complex layouts.

CSS Logical Properties

Logical properties support different writing modes and directions.

.container {
  margin-inline: auto;
  padding-block: 2rem;
  padding-inline: 1rem;
}

Instead of using margin-left and margin-right, use margin-inline for more flexible international layouts.

Modern CSS Color Features

Modern CSS supports newer color tools for more flexible color systems.

:root {
  --brand: oklch(60% 0.18 250);
}

.button {
  background-color: var(--brand);
}

Modern color spaces can help create more consistent color scales, but always test contrast and browser support.

CSS Scroll Snap

Scroll snap creates controlled scrolling experiences for carousels and sections.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

CSS accent-color

The accent-color property customizes native form controls.

input[type="checkbox"],
input[type="radio"],
progress {
  accent-color: #0d6efd;
}

This improves form styling while keeping native accessibility benefits.

CSS aspect-ratio

The aspect-ratio property helps maintain consistent width-to-height ratios.

.video-card {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.avatar {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

Modern CSS and Accessibility

• Use :focus-visible for keyboard-friendly focus styles.
• Use prefers-reduced-motion for motion-sensitive users.
• Use prefers-color-scheme for light and dark themes.
• Use accent-color carefully with enough contrast.
• Do not rely only on color or animation to communicate meaning.
• Test modern layouts at zoomed text sizes and small screens.

Modern CSS and SEO

Modern CSS does not directly create rankings, but it improves mobile usability, accessibility, performance, readability, maintainability, and user experience.

• Responsive CSS improves mobile-friendly pages.
• Cleaner CSS architecture reduces layout bugs.
• Fluid typography improves readability.
• Accessible focus and motion settings support more users.
• Better layout stability can support Core Web Vitals.

Common Modern CSS Mistakes

• Using new features without checking browser support.
• Overusing nesting and creating complex selectors.
• Using :has() where a simple class would be clearer.
• Ignoring accessibility while building advanced visual effects.
• Using container queries when media queries are enough.
• Forgetting fallbacks for critical layouts or colors.
• Using modern color functions without checking contrast.

Modern CSS Best Practices

• Use CSS variables for reusable design tokens.
• Use container queries for reusable components.
• Use cascade layers to organize resets, base styles, components, and utilities.
• Keep CSS nesting shallow and readable.
• Use clamp() for fluid typography and spacing.
• Use logical properties for better internationalization.
• Use :has() carefully for meaningful parent or state styling.
• Test accessibility, responsiveness, browser support, and performance.

Key Takeaways

• Modern CSS reduces the need for JavaScript and preprocessors.
• CSS variables help create reusable design tokens.
• Container queries enable component-level responsiveness.
• Cascade layers make CSS priority easier to manage.
• :has(), nesting, and subgrid make selectors and layouts more powerful.
• clamp(), min(), and max() simplify responsive sizing.
• Modern CSS should always be tested for accessibility and browser support.