The best new CSS features of 2025, already supported in all browsers

CSS continues to evolve, making the work of layout designers and developers even faster, more beautiful and easier. New CSS features are already available in all major browsers and greatly simplify working with layouts, animations, and performance.

In this article, you will learn:

• What new CSS properties appeared in 2025;

• How they will help speed up the development of sites;

• How to apply them with code examples.

Let's take a closer look at each new feature: what it is, why to use it, and code examples.

1. Scrollbar-Gutter and Scrollbar-Color 🖱️

What is it:

• Scrollbar-gutter reserves space for the scrollbar, even if scrolling has not yet started.

• Scrollbar-color allows you to set the colors of the slider and the background of the scroll bar.

Why use:

• Avoid content shifts when a scroll bar appears.

• Make the interface more aesthetic and relevant to your design.

Code example:

.scrollable {
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #444 #ccc;
}

2. ::target-text 🎯

What is it:

A pseudo-element that highlights the text that is clicked on an internal link (anchor).

Why use:

• Improves navigation in long documents.

• Helps the user quickly find the right place after switching.

Code example:

::target-text {
  background: yellow;
  color: black;
}

3. Ruby Layout (ruby-align and ruby-position) 🈚

What is it:

Styling of ruby text (small explanatory captions above or next to the main text).

Why use:

• Required for high-quality layout of East Asian languages.

• Useful for tutorials and tips.

Code example:

ruby {
  ruby-align: center;
  ruby-position: over;
}

4. Relative Color Syntax and light-dark() 🎨

What is it:

• Relative Color Syntax allows you to change the color parameters relative to another color.

• light-dark() automatically selects the color depending on the theme (light or dark).

Why use:

• Facilitates support for dark and light themes.

• Dynamic color management without additional JavaScript code.

Code example:

.element {
  background: light-dark(#ffffff, #000000);
}

5. Exclusive Accordions 📂

What is it:

Use the HTML element <details> with the attribute name to automatically close other expanded elements.

Why use:

• Creating accordions without JavaScript.

• Simplification of the FAQ structure and menu.

Code example:

<details name="exclusive">
  <summary>Подробнее</summary>
  Текст внутри панели.
</details>

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

6. content-visibility 🚀

What is it:

A property that allows you to delay the rendering of elements that are out of the screen's view.

Why use:

• Significantly speeds up page loading.

• Saves device resources, especially on mobile phones.

Code example:

.lazy-load-section {
  content-visibility: auto;
}

7. font-size-adjust 🔤

What is it:

Allows you to maintain the visual readability of the text when it falls on the replacement font.

Why use:

• Simplifies font adaptation.

• Preserves the correct proportions of the text when loading fallback fonts.

Code example:

.text {
  font-family: "CustomFont", Arial, sans-serif;
  font-size-adjust: 0.5;
}

8. transition-behavior 🧩

What is it:

New ability to manage transitions and animations without the need for JavaScript.

Why use:

• Allows you to create complex animation scenarios.

• It makes interfaces more responsive and lively.

Code example:

.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

9. @property and mathematical functions in CSS ➗

What is it:

• @property allows you to declare custom variables with data types and initial values.

• New functions (round(), mod(), rem()) add basic mathematical operations directly to CSS.

Why use:

• Improves the management of dynamic styles.

• Simplifies mathematical calculations without preprocessors.

Code example:

@property --animation-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

10. offset-position and offset-path 🛤️

What is it:

Allows you to move elements along a complex path without using JavaScript.

Why use:

• Creating animations on curves without third-party libraries.

• It makes the interface more dynamic and interesting.

Code example:

.move {
  offset-path: path("M10,80 Q95,10 180,80");
  offset-position: 0%;
  transition: offset-position 2s ease;
}

Summary table of new CSS 2025 features ✨

Conclusion ✅

The new CSS 2025 features allow you to simplify work with adaptive layout, improve the user experience and reduce the time for developing interfaces. All these features are already supported by major browsers!

If you want to master programming even faster and learn modern web development technologies, try our application Code to learn programming! 🚀 It's easy and interesting to learn with us!

Download "Kodik" right now and start developing in programming! 📚💻