Новые фичи CSS 2025: что изменилось в веб-разработке

CSS в 2025 году переживает настоящее обновление. Мы наконец-то получили инструменты, о которых раньше можно было только мечтать — от вложенных селекторов до нативных контейнерных запросов и анимаций, управляемых прокруткой. В этой статье я разберу самые важные новшества, покажу примеры кода и расскажу, как применять их уже сегодня.

CSS в 2025 году — краткий обзор

Прогресс CSS в последние годы ускорился: спецификации, которые еще недавно находились в статусе эксперимента, теперь поддерживаются большинством браузеров. Chrome, Firefox, Safari и Edge синхронно внедряют новые возможности, делая стилизацию проще и гибче.

CSS Nesting — вложенные селекторы

Одно из самых ожидаемых нововведений — поддержка CSS Nesting.

Как это работает

Теперь можно вкладывать селекторы прямо внутри других, подобно синтаксису SCSS. Это уменьшает повторения и делает код читабельнее.

Пример использования

CSS
.card {
  padding: 1rem;
  background: #fff;

  & h2 {
    color: #333;
  }

  &:hover {
    background: #f0f0f0;
  }
}

Результат — аккуратный и компактный код без дублирования .card.

Контейнерные запросы (Container Queries)

Почему это революция

До сих пор адаптивные стили опирались лишь на размеры окна. Контейнерные запросы позволили изменить этот подход — теперь можно адаптировать элементы под размеры родительского контейнера.

Пример кода и объяснение

CSS
.container {
  container-type: inline-size;
}

.card {
  font-size: 1rem;
}

@container (min-width: 600px) {
  .card {
    font-size: 1.5rem;
  }
}

Теперь каждая карточка может быть адаптивной независимо от ширины экрана.

Anchor Positioning — позиционирование якорей

Что это и где применять

Anchor-positioning решает вечную боль с позиционированием всплывающих подсказок, модалок и dropdown-меню. Теперь элемент можно привязать к другому элементу на странице, а не вручную вычислять координаты через JavaScript.

Пример с popover-сценарием

CSS
.button {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
}

Такой подход делает верстку всплывающих элементов чистой и нативной.

View Transitions — плавные переходы между состояниями

Обзор функциональности

View Transitions — это API, упрощающий создание анимаций при смене страниц или состояний в SPA. Он работает через нативную поддержку браузера.

Пример в SPA

JavaScript
document.startViewTransition(() => {
  document.body.classList.toggle('dark-mode');
});

Эффект перехода можно стилизовать с помощью CSS:

CSS
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

Плавно и без сторонних библиотек.

Новые псевдоклассы и селекторы

CSS 2025 представляет настоящую россыпь новых селекторов.

  • :state() — для пользовательских элементов и их состояний.
  • :has() — «родительский» селектор, которого ждали десятилетиями.
  • :is() и :where() — упрощают множественные селекторы.

Пример

CSS
button:has(svg) {
  padding-left: 2rem;
}

.custom-element:state(open) {
  background: #fafafa;
}

Scroll-driven animations — анимации при прокрутке

Как это работает

Эти анимации синхронизируются с прокруткой страницы, создавая эффект живого движения интерфейса.

Пример с анимацией параллакса

CSS
@scroll-timeline scroll-progress {
  source: auto;
  orientation: block;
}

.image {
  animation: fade-in 1s linear both;
  animation-timeline: scroll-progress;
}

Теперь можно создавать эффектные анимации без JS.

CSS функции нового поколения

Новые функции значительно облегчают жизнь:

  • contrast-color() автоматически выбирает контрастный цвет текста;
  • clamp() помогает ограничить значение в диапазоне;
  • progress() делает вычисления между значениями плавными.

Примеры

CSS
.card {
  --main-color: #0070f3;
  color: contrast-color(var(--main-color));
  font-size: clamp(1rem, 2vw, 2rem);
}

@property и управление кастомными переменными

@property делает переменные “умными”

CSS
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.loader {
  animation: rotate 3s infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
    transform: rotate(var(--angle));
  }
}

Теперь CSS понимает тип данных переменной и анимирует ее корректно.

@scope — ограничение области стилей

Применение

@scope позволяет задавать область действия CSS внутри ограниченного DOM, не конфликтуя с другими стилями.

Пример кода

CSS
@scope (.card) {
  h2 {
    color: #333;
  }

  button {
    background: #007bff;
  }
}

Так можно безопасно изолировать стили компонентов.

Оптимизация рендеринга и новые scrollbar-фичи

content-visibility

Экономит ресурсы, пропуская рендеринг внеэкраных элементов:

CSS
.article {
  content-visibility: auto;
}

scrollbar-color и scrollbar-gutter

Позволяют настраивать скроллбары, не ломая верстку.

CSS
body {
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #0070f3 #f0f0f0;
}

Поддержка браузеров в 2025 году

Большинство новых фишек уже стабильно работают в Chrome 130+, Firefox 130+, Safari 18+ и Edge. Поддержка настолько широка, что разработчики спокойно используют эти возможности в production-проектах.

Заключение

CSS в 2025 году превратился из языка простого оформления в мощный инструмент интерфейсной логики. От вложенности до анимаций — всё стало удобнее, быстрее и чище. Если вы до сих пор пишете стили «по старинке», самое время обновить подход и насладиться возможностями, которые раньше требовали целых фреймворков.

FAQ

1. Нужно ли использовать препроцессоры, если теперь есть Nesting?
Нет, во многих случаях Nesting заменяет Sass и PostCSS. Препроцессоры остаются полезными, но уже не обязательными.

2. Работают ли контейнерные запросы в Safari?
Да, начиная с Safari 17+, они полностью поддерживаются без флагов.

3. Можно ли комбинировать View Transitions и анимации прокрутки?
Да, они прекрасно сочетаются — можно создавать сложные интерфейсные эффекты без единой строчки JS.

4. Безопасно ли использовать @scope?
Да, современные браузеры уже внедрили поддержку, но стоит проверять совместимость перед релизом.

5. Как проверить поддержку новой CSS-функции?
Используйте сайт caniuse.com или директиву @supports прямо в коде:

CSS
@supports (container-type: inline-size) {
  /* Современные стили */
}

Связанные записи