2024 CSS New Features You Should Not Miss

Among the three core front‑end technologies (HTML, CSS, JavaScript), CSS evolves the fastest. Every year browsers adopt many new CSS capabilities. This article highlights the most important CSS features introduced or landing in 2024, with code snippets and practical examples.

Interaction Features

Custom Scrollbars

Starting with Chrome 121 you can style scrollbar width and color using the scrollbar-width and scrollbar-color properties.

.scroller {
  scrollbar-color: red green;
  scrollbar-width: 18%;
}

Cross‑Document View Transition

Chrome introduced same‑document view transitions in 2023 and extended support to cross‑document transitions in Chrome 126, allowing smooth animations between two independent documents.

@view-transition {
  navigation: auto;
}

Scroll‑Driven Animations

From Chrome 115, animations can be driven directly by scroll position, enabling dynamic effects that react to user scrolling.

.timeline {
  position: relative;
  display: flex;
  gap: var(--gap);
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  width: 100%;
  padding-inline: calc((100vw - var(--item-size)) / 2);
}
.timeline article {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  animation: reveal linear both;
  animation-timeline: view(inline);
}
@keyframes reveal {
  0%, 100% {
    translate: 0 -25%;
    scale: 0.7;
    opacity: 0.2;
  }
  50% {
    scale: 1;
    translate: 0;
    opacity: 1;
  }
}

Scroll‑Snap Events

New scrollsnapchange and scrollsnapchanging events expose key moments of the scroll‑snap process, enabling custom UI responses.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
});

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
};

Components

Anchor Positioning

CSS anchor positioning lets developers declare relationships between elements, useful for hierarchical layouts such as menus, tooltips, dropdowns, and dialogs.

/* Define a button as an anchor */
.button-anchor {
  anchor-name: --menu-anchor;
}
/* Position the menu above the button */
.menu {
  position: absolute;
  position-anchor: --menu-anchor;
  position-area: block-start;
}

Animation‑Height Auto‑Sizing

From Chrome 129 you can use the interpolate-size property or the calc-size() function to smoothly transition between fixed lengths and keyword‑based sizes.

:root {
  interpolate-size: allow-keywords;
}

Field‑Sizing Auto

The field-sizing: content; declaration makes inputs, textareas, selects, etc., automatically resize to fit their content, eliminating the need for JavaScript size adjustments.

input, textarea, select {
  field-sizing: content;
}

Mutually Exclusive Accordion

Adding a name attribute to multiple <details> elements groups them semantically; opening one automatically closes the previously opened one.

<details name="hello-world">
  <summary>Frontend Power Bank</summary>
  <p>...</p>
</details>
<details name="hello-world">
  <summary>Power Bank</summary>
  <p>...</p>
</details>
<details name="hello-world">
  <summary>Frontend</summary>
  <p>...</p>
</details>

Stylable <details> Elements

Since Chrome 131 the display property and the ::details-content pseudo‑element allow fully custom styling of the expanded/collapsed UI.

details {
  display: flex;
  color: red;
}

details::details-content {
  background-color: hsl(0 0% 0%);
}

Development Experience Enhancements

Dark/Light Mode with light-dark()

The new light-dark() function lets developers switch between two colors based on the current color-scheme value, simplifying dark‑mode support.

body {
  color-scheme: light dark;
  color: light-dark(#333, #fff);
  background-color: light-dark(#fff, #222);
}

@property

In 2024 the @property at‑rule enjoys broad browser support, allowing registration of custom CSS properties with defined syntax, inheritance, and initial values.

@property --color {
  syntax: "
";
  inherits: true;
  initial-value: #ea1ca5;
}

div {
  display: flex;
  justify-content: center;
  width: 20vw;
  height: 100px;
  background: var(--color);
}

.color-1 { --color: #1a535c; }
.color-2 { --color: rgb(100,200,0); }
.color-3 { --color: #3e47db; }

Popover API

The Popover API simplifies the creation of tooltips, menus, and similar UI components, improving accessibility and user experience.

<button popovertarget="my-popover" popovertargetaction="toggle">Toggle Popover</button>
<div id="my-popover" popover>
  <p>This is a popover!</p>
</div>

@starting-style

The @starting-style rule defines the initial style of an element before the first style update, enabling entrance animations when combined with CSS transitions.

.container {
  /* ... */
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

Text Stroke

When using text-stroke , the paint-order property can control the rendering order of fill and stroke, ensuring the stroke appears on top of the fill.

.paint-order {
  paint-order: stroke fill;
}