HTML и CSS в 2025: 5 новых фич, которые ты мог пропустить

Ты думаешь, 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!