New CSS Features in 2025: Overview of Key Changes

Web development continues to evolve, and CSS is no exception. At the beginning of 2025, it became clear that the style language has received many new features, which are already supported by modern browsers. In this article, we will review the most significant innovations that can simplify the work of developers and improve the user experience.

The balance value for the text-wrap property

Typography has always been one of the most challenging tasks for web developers. One common problem is the uneven distribution of text in headers, especially on different devices. For example, when displaying long headers, it often happens that the last word stays on a separate line, negatively impacting the visual perception.

To solve this issue, the balance value is now available for the text-wrap property. It evenly distributes text across lines, minimizing the chance of lone words in a line. Example usage:

h1 {
  text-wrap: balance;
}

This approach is especially useful for responsive design, where maintaining text readability on any screen size is important.

Example of property usage:

Test code at separate page

Native CSS Nesting

For a long time, developers have used preprocessors like SASS or LESS for CSS rule nesting. However, in 2025, CSS introduced native support for nesting. Now, you can write code in this style:

.awesome-block {
  border: 2px solid lightblue;
  padding: 1rem;
   
  &:hover {
    background-color: tomato;
  }
}

This syntax simplifies the structure of styles and makes the code more readable. However, it's important to be cautious when using the ampersand (&) in class names, as it could cause errors.

The :user-valid and :user-invalid pseudo-classes

Working with forms has become even more convenient thanks to the new :user-valid and :user-invalid pseudo-classes. Unlike the traditional :valid and :invalid, which apply styles immediately after the page loads, the new pseudo-classes are triggered only after user interaction with the input field. This prevents unwanted visual effects during the page load phase.

Example of usage:

input:user-invalid {
  box-shadow: 0 0 10px red;
}

input:user-valid {
  box-shadow: 0 0 10px green;
}

Example of usage:

Test code at separate page

Important! The :user-valid and :user-invalid pseudo-classes are not yet supported by most browsers. As a result, styles may apply immediately upon page load (as with :valid and :invalid). To avoid this, you can use :focus, :focus-within, or add a handler using JavaScript.

The scrollbar-gutter property

One common issue when working with modal windows is the "jumping" of content caused by the appearance or disappearance of the scrollbar. The new scrollbar-gutter property allows you to reserve space for the scrollbar in advance, preventing content shifts.

Example:

html,
body {
  scrollbar-gutter: stable;
}

This solution is especially useful for improving the user experience when working with modal windows and other interface elements.

The round() mathematical function

CSS now allows rounding values with the round() function. This is especially useful when working with non-integer values that may arise in layout. Example:

.box {
  margin: round(to-zero, 1.25rem, 1px);
}

The round() function can be used in conjunction with calc(), making it a powerful tool for precise control over sizes and spacing.

Important to note! This property may not work in mobile browsers at the moment. You should use the method with the parameter display: flex.

The safe and unsafe keywords

When using the align-items and justify-content properties, there can be cases where elements get cut off due to overflow in the container. The new safe and unsafe keywords allow you to control this behavior. For example:

.parent {
  align-items: safe center;
}

The safe keyword ensures that elements will not be cut off at the start of the container, which is especially important for responsive interfaces.

The align-content property without the need for flexbox

Previously, in order to use the align-content property, you had to set the display property to flex, inline-flex, grid, or inline-grid. Now, align-content can function on its own, making it easier to center elements vertically. Example:

.container {
  height: 10rem;
  background-color: lightblue;
  align-content: center;
}

The standard way of vertically aligning a block with display: flex:

Test code at separate page

And an example of how to vertically align a block using only align-content:

Test code at separate page

It's important to note that blocks inside the container are not necessarily placed in a single line, but they will align vertically. To align items elements, simply apply float: left;.

Conclusion

In 2025, CSS continues to evolve, providing developers with new tools for creating more flexible and adaptive interfaces. Some of the most useful innovations include:

• The balance value for the text-wrap property;
• Native CSS nesting;
• The :user-valid and :user-invalid pseudo-classes;
• The scrollbar-gutter property;
• The round() mathematical function.

These changes not only simplify the development process but also open new possibilities for creating higher-quality user interfaces. It's recommended to explore these features and begin using them in your projects.

Other additional properties worth mentioning include:

• The cap unit, based on the height of capital letters;
• The content-visibility property, which helps speed up page rendering;
• transition-behavior, which allows animating an element even when its display changes;
• The rem() and mod() mathematical functions.

These and other new CSS properties and functions can be discussed on the discussion page.