habrahabr

Что новенького есть в CSS в 2025 году?

  • понедельник, 11 августа 2025 г. в 00:00:08
https://habr.com/ru/companies/ruvds/articles/933484/

Привет, Хабр!

Мне всегда было интересно наблюдать, как развивается CSS. Держу себя в форме, чтобы не пропустить что-то важное. А недавно подумал: «Почему бы не поделиться ими с подписчиками?». И я тут.

Составил список новинок, которые мне кажутся важными и интересными. Есть несколько новых возможностей, которые очень сильно изменят CSS. Думаю, лучше готовиться к ним заранее.

Также скажу, что на сегодняшний день они реализованы минимальным количеством браузеров. Не получится использовать их прямо сейчас. Хотя некоторые можно, если вы поддерживаете только браузер Google Chrome. В любом случае про браузерную поддержку я тоже расскажу.

Давайте посмотрим, что я вам подготовил.

Обновление функции attr()

Мы знаем, что функция attr() позволяет получить значение атрибута, чтобы потом его использовать. Очень популярный пример — вставка текста на страницу.

<body>
  <div class="awesome-block" data-hint="Это волшебный блок"></div>
</body>
/* Этот код пример того, что вы можете встретить. Я не рекомендую использовать функцию таким способом в продакшене. */
.awesome-block::before {
  content: "Подсказка: " attr(data-hint);
}

Только такое применение функции является её ограниченным вариантом. В стандартах давно были описаны более мощные возможности. Хорошо, что разработчики браузера Google Chrome реализовали часть из них.

Теперь мы можем использовать функцию во всех CSS-свойствах, указывать тип данных, единицу измерения и резервное значение. Но давайте разберём всё по порядку.

Мы начнём сразу с примера. В нём воспользуемся функцией attr() для свойства rotate, повернув элемент на 45 градусов. Значение 45deg возьмём из атрибута data-rotation.

<body>
  <div class="awesome-block" data-rotation="45deg"></div>
</body>
.awesome-block {
  width: 200px;
  height: 200px;
  background-color: purple;
  rotate: attr(data-rotation type(<angle>));
}

Вся магия скрыта в функции type(). В ней я определил тип данных <angle>. После этого браузеры, получив строку 45deg с помощью функции attr(), знают, что это значение. А с ним они уже могут работать, применив дальше для свойства rotate.

Указать тип значения можно другим способом, использовав единицы измерения прямо в самой функции attr(). Но тогда нам нужно убрать их из значения атрибута. Для демонстрации я удалю строку deg.

<body>
  <div class="awesome-block" data-rotation="45"></div>
</body>
.awesome-block {
  width: 200px;
  height: 200px;
  background-color: purple;
  rotate: attr(data-rotation deg);
}

Визуально результат идентичный. Разница заключается в том, что браузеры определяют тип самостоятельно, основываясь на указанных нами единицах измерения.

Казалось бы, зачем два способа? Да, результат их работы одинаковый, но алгоритм работы немного отличается. А это даёт нам больше гибкости. Рассмотрим ещё один пример.

Установим значение для свойств width и height с помощью первого способа.

<body>
  <div class="awesome-block" data-size="450px"></div>
  <div class="awesome-block" data-size="10rem"></div>
</body>
.awesome-block {
  width: attr(data-size type(<length-percentage>));
  height: attr(data-size type(<length-percentage>));
  background-color: purple;
}

Мы видим, что браузеры в двух случаях применили значения, потому что единица измерения px и rem относятся к одному типу <lenght-percentage>. В итоге мы видим два квадрата разного размера.

Давайте теперь воспользуемся вторым способом.

<body>
  <div class="awesome-block" data-size="450"></div>
  <div class="awesome-block" data-size="10"></div>
</body>
.awesome-block {
  width: attr(data-size px);
  height: attr(data-size px);
  background-color: purple;
}

В этом примере мы вынуждены указывать конкретные единицы измерения, а не их тип. Поскольку у нас определены единицы измерения px, поэтому они используются для первого и второго элемента.

Таким образом, если вам нужны определённые единицы измерения, то используйте второй способ. Если вы хотите использовать диапазон единиц измерения, то первый вариант — это то, что вам нужно.

Осталось рассмотреть резервные значения. До этого момента мы использовали всегда корректные единицы измерения. Давайте теперь пошалим. Укажем некорректное значение.

<body>
  <div class="awesome-block" data-size="10deg"></div>
</body>
.awesome-block {
  width: attr(data-size type(<length-percentage>));
  height: attr(data-size type(<length-percentage>));
  background-color: purple;
}

Элемента не видно. Браузеры не смогли применить 10deg для свойств width и height. Они поняли, что мы написали какую-то ерунду, поэтому рассчитали значения свойств по умолчанию.

Теперь исправим наш пример. Функция attr() позволяет указывать значение по умолчанию. Если происходит ситуация, как у нас, то браузеры будут использовать его.

Я установлю значение 50px.

.awesome-block {
  width: attr(data-size type(<length-percentage>), 50px);
  height: attr(data-size type(<length-percentage>), 50px);
  background-color: purple;
}

Всё работает! Если вам больше нравится способ с установкой конкретных единиц измерения, то в нём тоже можно использовать значение по умолчанию.

.awesome-block {
  width: attr(data-size px, 50px);
  height: attr(data-size px, 50px);
  background-color: purple;
}

Браузеры Google Chrome и Edge реализовали обновлённую функцию attr().

Функция calc-size()

В CSS есть математические операции. Я лично люблю их использовать при вёрстке компонент, задавая через них сложную геометрию. Правда, меня расстраивает один момент — в функции calc() нельзя использовать ключевые слова auto, min-content, max-content и fit-content.

Для демонстрации я попробую к ключевому слову fit-content прибавить 100px.

.awesome-block {
  height: calc(fit-content + 100px);
}

Как видите, браузеры проигнорировали свойство. По этой причине авторы спецификаций CSS придумали более мощную версию функции calc(). Назвали её calc-size().

Вот так теперь мы можем просуммировать ключевое слово fit-content и 100px.

.awesome-block {
  height: calc-size(fit-content, size + 100px);
}

Первым аргументом нужно передать ключевое слово, с которым хотим произвести математическое вычисление. Далее используем ключевое слово size, которое будет «сохранять» значение, полученное на основании первого аргумента. С ним уже произойдёт математическое выражение. В нашем примере это сложение.

Чаще всего первым аргументом используются ключевые слова auto, min-content, max-content и fit-content. Кроме математического выражения вторым аргументом можно использовать другие математические функции.

.awesome-block {
  width: calc-size(fit-content, round(up, size, 50px));
}

Функция уже работает в браузерах Google Chrome, Opera, Edge и Samsung Internet.

Значение pretty для свойства text-wrap

В этом году я рассказывал про значение balance для свойства text-wrap. А есть ещё одно новое значение — pretty.

Объявив его, браузеры начнут более равномерно распределять текст, чтобы в конце блока на новой строке не оказалось одно слово. Давайте на примере посмотрим, как это работает.

Я создал блок текста. Обратите внимание, что на последней строке находится одно слово «список».

<body>
  <div class="awesome-block">
    <p>Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился <span>внушительный список.</p>
  </div>
</body>
.awesome-block {
  max-width: 530px;
  border: 2px solid;
}

Теперь объявим свойство text-wrap со значением pretty.

.awesome-block {
  max-width: 530px;
  border: 2px solid;
  text-wrap: pretty;
}

Браузер добавил слово «внушительный» рядом со словом «список». Теперь оно не одиноко!

Значение поддерживается в браузерах Google Chrome, Firefox, Opera, Edge и Samsung Internet. С осени должно появиться в десктопной и мобильной версии браузера Safari.

Свойство interpolate-size

Я люблю делать CSS анимашки и, к моему сожалению, ключевые слова всегда были камнем преткновения. Ну нельзя было их использовать. Например, если мы хотели бы проанимировать изменения свойства height от 0 до значения auto, то у нас бы не получилось.

.awesome-block {
  height: 0;
  overflow: hidden;
  transition: height .5s;	
}

.awesome-block_is-shown {
  height: auto;
}

Сейчас есть свойство interpolate-size. Оно поможет нам в этой ситуации. Значение allow-keywords включает возможность анимировать значения с использованием ключевых слов auto, min-content, max-content и fit-content.

Добавим свойство в наш пример.

.awesome-block {
  height: 0;
  overflow: hidden;
  transition: height .5s;	
  interpolate-size: allow-keywords;	
}

.awesome-block_is-shown {
  height: auto;
}

Теперь анимация будет работать! Только в рамках статьи я вам это не могу показать. Поверьте мне на слово, а лучше убедитесь сами.

Мы можем использовать свойство в браузерах Google Chrome, Opera, Edge и Samsung Internet.

Функция if()

Многие разработчики хейтили CSS, называя его недоязыком. Они гордо говорили: «CSS — это не язык программирования!». Похоже, потихоньку мы идём к тому, что возможно он им станет.

Представляете, в CSS уже работает собственный if. Вот вам доказательство.

body {
  background-color: if(
    media(width < 600px): tomato; else: purple
  );
}

Запустите этот код в браузере Google Chrome, а потом сделайте ширину вьюпорта меньше 600 пикселей. А потом обратно больше 600. Вы увидите, как фон меняется.

Что происходит в этом коде? Сначала я объявил функцию if(), в которую передал функцию media() с медиа-запросом width < 600px. Потом идёт первое значение tomato и второе purple.

Важная штука здесь — функция media(). В данной версии функции if() мы должны рассказать браузеру, какой тип условия хотим использовать. Делается это с помощью трёх функций: media(), style() и supports(). Кратко рассмотрим каждую.

Функция media() позволяет использовать медиа-запрос. Всё, как мы привыкли. Доступны медиа-типы, медиа-функции, даже можно их комбинировать логическими операторами.

body {
  background-color: if(
    media((width < 700px) and (width < 1000px)): tomato; else: purple
  );
}

Перейдём к функции style(). Она самая интригующая. Лично мне она сломала мозг!

В общем, с помощью неё можно определить значение, основывая на значении другого свойства. Сразу к примеру. Так будет проще.

body {
  background-color: if(
    style((color: black)): tomato; else: purple
  );
  color: black;
}

@media (width: < 1000px) {
  body {
    color: white;
  }
}

Я проверяю значение свойства color. Если оно black, то браузеры будут использовать для свойства background-color значение tomato. Но если у меня поменяется значение для свойства color, например, на white, то для свойства background-color уже добавится значение purple. Вот такую магию теперь можно делать.

При подготовке статьи у меня этот код не заработал в браузере. Опытным путём с моим коллегой мы выяснили, что пока сами свойства не поддерживаются внутри style(). Но можно использовать пользовательские CSS свойства.

body {
  background-color: if(
    style(--color: white): tomato; else: purple;
  );
  --color: black;
}

@media (width < 1000px) {
  body {
    --color: white;
  }
}

Последний тип условия объявляется с помощью функции supports(). Она позволяет проверить поддержку определённой возможности в браузере и выбрать определённое значение. Например, я написал условие, при котором браузеры выберут значение tomato, если они поддерживают свойство padding-inline.

body {
  background-color: if(
    supports(padding-inline: 1rem): tomato; else: purple;
  );
}

Функцию можно проверить в браузерах Google Chrome и Edge.

Заключение

Подведём итог. В браузерах на лето 2025 года появились новые возможности CSS, а именно:

  • применение функции attr() для разных свойств,

  • функция calc-size(), позволяющая производить математические операции с ключевыми словами auto, min-content, max-content и fit-content,

  • значение pretty, позволяющее сбалансировать текст так, чтобы не было одиноких слов на новой строке,

  • свойство interpolate-size, помогающее строить анимации с использованием ключевых слов, вычисляемых на основе контента (auto, min-content, max-content и fit-content),

  • функция if() для создания условия для выбора значения свойства.

Мне интересно почитать, какие новинки из моего списка вас заинтересовали. Оставляйте их в комментариях. Буду ждать фидбек от вас.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.

© 2025 ООО «МТ ФИНАНС»