← Усі статті

Чого CSS досі не вистачає у 2026 році

State of CSS, прогалини у верстці, центрування, декларативні оновлення DOM і вплив ШІ на цінність сайтів.

Теги
cssНовиниweb platform
Зміст

Коротко

У випуску Frontend Focus #743 зібрали кілька ліній: Temani Afif оновив гайд з центрування з place-content і прив’язкою до якоря, відкрився State of CSS 2026, Patrick Brosset розібрав прогалини верстки за підсумками минулого опитування, а Kevin Powell — як короткі ШІ-стислі огляди й автоматичний збір контенту змінюють економіку сайтів. Плюс новини платформи: Chrome 148, WordPress 7.0, баг <input type="number">.

Що сталося

Центрування у 2026 — не лише flexbox «на око». Сучасні прийоми спираються на place-content, логічні властивості та CSS anchor positioning, коли елемент прив’язується до якоря без важкого JavaScript. State of CSS 2026 свідомо скоротили список функцій: менше галочок, більше значущих можливостей — відповідь на епоху, коли код частково пише ШІ.

Patrick Brosset дивиться на компонування через призму опитування: grid і flex закрили багато, але складності лишаються в нестандартних шаблонах інтерфейсу, де дизайнери досі просять окрему логіку. Kevin Powell після Google I/O ставить питання: якщо відповідь користувач отримує у стислому огляді без кліку, навіщо підтримувати контентний сайт — і що це означає для фронтенду та SEO.

З коротких новин: WordPress 7.0 з опційними ШІ-функціями; Chrome лагодить несподівану зміну значень у <input type="number"> (фікс у Chrome 150); Jake Archibald зафіксував баг; Vivaldi — великий редизайн; asm.js зникає з Firefox; у Chrome 148 (за прапором) — декларативні часткові оновлення: <template for> і setHTML() / streamHTML() для потокової вставки HTML без повного перерисовування дерева.

Окремо Manuel Matuzovic нагадує: aria-label на голому <div> — порушення специфікації й лотерея в програмах зчитування з екрана; краще семантичні елементи або явні ролі.

Чому це важливо

CSS розвивається швидше, ніж встигають підручники. Прив’язка до якоря й декларативні оновлення зміщують частину роботи з JS на платформу — але лише якщо браузери й поліфіли догнали ваш мінімальний набір підтримки.

Опитування State of CSS — не академіка: за ним видно, які API реально доходять до продакшену, а які лишаються «на слайдах». Тема «ШІ знецінює сайти» — про продукт і монетизацію, але для розробника це сигнал: чиста верстка й доступність лишаються відмінною рисою, коли текстовий контент перехоплюють агрегатори.

На практиці

  1. Перегляньте центрування через place-content і логічні осі — менше «магічних» відступів.
  2. Стежте за anchor positioning для спливаючих вікон і підказок без бібліотек позиціонування.
  3. Не ставте aria-label на <div> «для зручності» — перевірте семантику.
  4. Експериментуйте з <template for> за прапором Chrome 148, якщо робите інтерфейси зі списками.
  5. Пройдіть State of CSS 2026 — так ви відмітите, що команда реально використовує.

Підсумок

CSS у 2026 — це не «дописати flex», а нові примітиви компонування й декларативні оновлення DOM. Паралельно змінюється контекст: ШІ тисне на цінність класичних статей, а якісна верстка й платформені API лишаються зоною, де інженерне рішення досі помітне користувачу.