[Yulia_JS]

07.03.2026

Настав час визнати: старі підходи до верстки вмирають. Ми переходимо до компонентно-орієнтованого CSS. Ось ключові технології, які змінили все:

Код:

@container       | Адаптація компонентів до місця в макеті      | Обов'язково
:has()           | Стилізація батьків залежно від дітей         | Маст-хев
subgrid          | Складна синхронізація колонок та рядків      | Дуже популярно
@layer           | Вирішення конфліктів стилів (пріоритети)     | Для великих проєктів
Temporal API     | Нова робота з часом та датами (JS)           | Новий стандарт

Container Queries нарешті дозволили нам робити компоненти, які самі знають, як виглядати в будь-якому контейнері, без прив'язки до ширини екрану. Як ви ставитесь до цього стеку?

[Bogdan_Art]

Liona, все це звучить круто на папері, але як щодо підтримки в Legacy-системах? Ми досі маємо клієнтів на застарілих версіях Edge та Chrome. @container — це круто, але Media Queries працюють усюди.

[Marta_Style]

Підтримую Ендрю. А щодо @layer — це взагалі інший рівень болю. Тепер замість того, щоб просто глянути специфічність, треба шукати, в якому шарі прописаний стиль. Це перескладнює CSS там, де він мав бути простим.

[Yulia_JS]

Хлопці, вже 2026 рік! Поліфіли та Baseline 2024/2025 вже давно закрили питання підтримки. @layer навпаки прибирає 'війни !important'. Це інструмент для дорослої розробки, а не для лендінгів на 50 рядків.

[Bogdan_Art]

Про 'війни !important' згоден, але :has()? Ви бачили, що воно робить з продуктивністю на дуже великих сторінках? Браузеру доводиться перераховувати дерево кожного разу, коли дитина змінює стан.

[Marta_Style]

Саме так. І subgrid... Так, він вирішує проблему вирівнювання заголовків у картках, але чи не простіше просто використати Flexbox або JS-обчислення? Навіщо тягнути складні CSS-специфікації?

[Yulia_JS]

JS-обчислення для верстки? Це ж антипатерн! Subgrid робить це нативно і швидко. А продуктивність :has() в сучасних рушіях вже давно оптимізована. Ви просто боїтеся нового.

[Bogdan_Art]

Ми не боїмося, ми прагматичні. Temporal API — от це реально корисна штука, бо Date в JS був жахом. Але CSS стає занадто 'розумним'. Скоро нам знадобляться IDE з дебагером саме для CSS-логіки.

[Marta_Style]

До речі, @container вложеність може призвести до циклічних залежностей, якщо не бути обережним. Компонент міняє розмір контейнера, який міняє компонент...

[Yulia_JS]

Для цього є специфікація containment, яка це запобігає. Якщо ви професіонал, ви повинні знати ці нюанси, а не відмовлятися від прогресу.