HTML и CSS в 2025: 5 новых фич, которые ты мог пропустить
Мир CSS не стоит на месте — теперь ты можешь использовать :has(), контейнерные запросы и другие новинки. Объясняем по-простому, что нового и как это применить в своих проектах.
Ты думаешь, HTML и CSS уже давно изучены вдоль и поперёк? А вот и нет! В 2025 году эти «старички» снова удивляют: в браузерах появилось несколько крутых фич, которые делают верстку проще, чище и мощнее 💥
В этой статье — 5 новинок, которые ты мог пропустить. Особенно если только начинаешь. Поехали!

1. 🧱 :has()
в CSS — наконец-то!
Теперь CSS может «оглядываться назад» — применять стили к родителю, если у него внутри есть определённый элемент. Раньше такое можно было сделать только через JS.
.card:has(img) {
border: 1px solid green;
}
👉 Применит рамку .card
, если внутри есть картинка. Ура, селектор родителя теперь реальность!
2. 🎛️ Контейнерные запросы (container queries)
Стили теперь можно адаптировать не к размеру экрана, а к размеру контейнера! Это революция для компонентного подхода.
@container (min-width: 400px) {
.card-title {
font-size: 2rem;
}
}
⚙️ Используется вместе со свойством container-type
, и это уже поддерживается в Chrome, Firefox, Safari.
3. 🎨 CSS :where()
и :is()
— селекторы без боли
Это мощные утилиты, чтобы писать короткие и гибкие селекторы с низкой специфичностью:
:where(header, main, footer) {
margin: 0 auto;
}
🧠 Удобно, если не хочешь биться с переопределениями и важностью.
4. 💾 Атрибут loading="lazy"
по умолчанию
Теперь все <img>
и <iframe>
в большинстве браузеров по умолчанию загружаются лениво — только когда появляются на экране.
<img src="photo.jpg" alt="Фото">
Раньше нужно было писать loading="lazy"
, теперь можно просто забыть — и всё будет работать!
5. 🧪 Scoped styles в HTML
Эксперимент, который уже доступен в Chrome и Safari: можно писать стили прямо в компоненте — и они будут применяться только к нему.
<style scoped>
h2 {
color: tomato;
}
</style>
⚠️ Пока нестабильно, но будущее явно за этим. Особенно для тех, кто пишет на Web Components.
🤓 Бонус: ещё пара фич на заметку
text-wrap: balance;
— красиво переносит заголовки в несколько строкview-transition
API — плавные переходы между страницамиanchor positioning
— новое позиционирование тултипов и попапов
В приложении Кодик ты можешь не просто читать, а пробовать — прямо в редакторе! Мы обновляем курсы по HTML и CSS, добавляем новые фичи и даём тебе актуальные знания. А ещё у нас есть уютное сообщество в Telegram 👾
💬 А ты уже пробовал :has()
или контейнерные запросы?
Напиши в комментариях, какие CSS-фишки тебя впечатлили в 2025!