2 Apr 2025

CSS5 - What's new for Web Developers?

Scroll-Driven Animations

Animate elements based on scroll position.

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fade-in linear;
  animation-timeline: scroll(block root);
}

View Transitions

Create smooth transitions between DOM changes (e.g., single-page app navigation).

::view-transition-old(root) {
  animation: fade-out 0.5s;
}

::view-transition-new(root) {
  animation: fade-in 0.5s;
}

Media Query Enhancements

CSS5 introduces support for aspect ratio queries and dynamic conditions.

@media (aspect-ratio: 16/9) {
  .container {
    width: 100%;
  }
}

CSS Nesting

Write cleaner, more maintainable CSS with nested rules (similar to Sass).

.card {
  padding: 1rem;

  /* Nested selector */
  & .title {
    font-size: 1.5rem;
  }

  /* Nested media query */
  @media (min-width: 768px) {
    padding: 2rem;
  }
}

Parent Selector (:has())

Select elements based on their children.

/* Select a <div> that contains an <img> */
div:has(img) {
  border: 1px solid #ccc;
}

/* Select a list item with a checked checkbox */
li:has(input[type="checkbox"]:checked) {
  background: #e0f0ff;
}

Improved color handling with OKLCH and LAB

CSS5 introduces new color spaces like LCH and LAB for more accurate and perceptually uniform colors.

.element {
  background: oklch(70% 0.3 150); /* Lightness, Chroma, Hue */
  color: lab(62% 50 60); /* Lightness, a-axis, b-axis */
}

Subgrid

Align nested grid items with their parent grid.

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

.child-grid {
  display: grid;
  grid-template-columns: subgrid;
}

CSS Masonry Layout

Create Pinterest-style layouts.

.container {
  display: masonry;
  masonry-columns: 4;
  gap: 1rem;
}

CSS Anchor Positioning

Position elements relative to others (like tooltips).

.tooltip {
  anchor-name: --my-anchor;
}

.popup {
  position: absolute;
  top: anchor(--my-anchor bottom);
  left: anchor(--my-anchor right);
}