Кодик
Начать бесплатно

5 CSS-фишек, которые изменят ваш фронтенд в 2025 году

CSS стал мощнее, чем когда-либо. Мы собрали 5 свежих фич — от всплывашек без JS до адаптивных форм. Попробуйте их уже сегодня!

WebПрактикаРазработка

6 мин

CSS продолжает удивлять: теперь можно делать всплывающие окна, анимации и адаптивные формы без строчки JavaScript. Ниже — подборка самых крутых CSS-фич 2025 года, которые стоит взять на вооружение.

💬 1. Popover API: всплывающие элементы без JS

Теперь можно создавать модальные окна, подсказки и выпадающие списки только с помощью HTML и CSS!

<!-- Кнопка-триггер -->
<button popovertarget="myPopover">Подписаться</button>

<!-- Всплывающее окно -->
<div id="myPopover" popover>
  Спасибо за подписку! ❤️
</div>

При клике на кнопку появляется попап. Закрыть можно нажатием Escape или кликом вне окна.

Чтобы добавить плавную анимацию:

#myPopover {
  transform: translateY(-2rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

✨ 2. @starting-style — плавное появление элементов

Обычно, когда элемент появляется, CSS сразу применяет конечный стиль. Анимация получается резкой. Новый @starting-style позволяет задать начальное состояние, которое потом плавно перейдёт в итоговое.

#myPopover {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  #myPopover:open {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

📌 Элемент стартует чуть выше и становится прозрачным, затем плавно двигается вниз и появляется.

📏 3. Анимация размеров с ключевыми словами

CSS теперь умеет плавно анимировать переход между height: 0 и height: auto, а также min-content, max-content, fit-content.

Для этого нужно разрешить использование ключевых слов:

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

Пример:

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое.</div>
</details>
.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

Раньше такой анимации не было вообще. Теперь — плавное раскрытие.

📝 4. Адаптивные input и textarea с field-sizing

Наконец-то CSS научился автоматически подгонять размер input, textarea и select под содержимое. Просто добавьте:

input, textarea, select {
  field-sizing: content;
  max-width: 100%; /* ограничение по ширине */
}

Пример:

<textarea placeholder="Пиши сколько хочешь..."></textarea>
<input type="text" placeholder="Имя">
<select>
  <option>Коротко</option>
  <option>Очень длинный вариант</option>
</select>

Такая форма смотрится аккуратно и подстраивается под пользователя без JS. 💡

🌗 5. Функция light-dark() для тёмной и светлой тем

Больше не нужно городить @media (prefers-color-scheme) — теперь всё можно сделать в одну строку с функцией light-dark():

:root {
  color-scheme: light dark;
  --text-color: light-dark(#000000, #ffffff);
  --bg-color: light-dark(#ffffff, #000000);
}

💡 Цвета автоматически подстроятся под системную тему пользователя.

CSS 2025 показывает, что с каждым годом мы можем делать больше и красивее без единой строчки JavaScript. Пробуйте новые фичи, и ваш код станет не только проще, но и современнее ✨

Комментарии