09-05-2026, 20:55
Привіт, колеги! 2026 рік приніс чимало крутих оновлень у світ фронтенду. Якщо ви ще верстаєте по-старому, час оновити свій інструментарій. Ось суб'єктивний топ найважливіших фішок, які стали стандартом цього року:
1. CSS Anchor Positioning (Якірне позиціонування)
Нарешті ми забули про муки з JS для створення тултіпів, випадаючих меню та попапів. Тепер можна прив'язати один елемент до іншого прямо в CSS:
Це працює плавно і враховує краї в'юпорту. Просто магія!
2. View Transitions API (Multi-page підтримка)
Тепер плавні переходи між сторінками працюють не тільки в SPA, а й у звичайних багатосторінкових сайтах. Достатньо одного мета-тегу та CSS правила view-transition-name, щоб елементи красиво перетікали з однієї сторінки на іншу при навігації.
3. Повний контроль над <selectlist>
Старий добрий <select> нарешті отримав повноцінну заміну — <selectlist>. Тепер ми можемо стилізувати кожну частину випадаючого списку (кнопку, контейнер з опціями) без використання кастомних JS-бібліотек, які важать як крило літака.
4. CSS Style Queries (Контейнерні запити по стилях)
Ми вже звикли до запитів по розміру контейнера, але тепер можна змінювати стилі залежно від значень кастомних властивостей (CSS variables) батьківського елемента. Це дозволяє створювати неймовірно гнучкі дизайн-системи.
5. HTML Search Element
Тег <search> став обов'язковим для доступності. Він семантично позначає частину сторінки, призначену для пошуку або фільтрації, замінюючи старий підхід з role="search".
6. Masonry Layout у CSS Grid
Те, на що ми чекали роками! Більше не потрібен JS для створення сітки в стилі Pinterest. У 2026 році властивість grid-template-rows: masonry вже стабільно працює в більшості сучасних браузерів.
Що з цього ви вже впровадили у свої проекти? Чи є щось, що я пропустив?
Masonry — це просто розрив! Я нарешті видалив скрипт на 15кб, який тільки цим і займався. Єдине, що засмучує — Safari як завжди наздоганяє останньою, хоча в 19-й версії вже ніби все ок.
1. CSS Anchor Positioning (Якірне позиціонування)
Нарешті ми забули про муки з JS для створення тултіпів, випадаючих меню та попапів. Тепер можна прив'язати один елемент до іншого прямо в CSS:
Код:
.tooltip {
position: absolute;
position-anchor: --my-button;
bottom: anchor(top);
}2. View Transitions API (Multi-page підтримка)
Тепер плавні переходи між сторінками працюють не тільки в SPA, а й у звичайних багатосторінкових сайтах. Достатньо одного мета-тегу та CSS правила view-transition-name, щоб елементи красиво перетікали з однієї сторінки на іншу при навігації.
3. Повний контроль над <selectlist>
Старий добрий <select> нарешті отримав повноцінну заміну — <selectlist>. Тепер ми можемо стилізувати кожну частину випадаючого списку (кнопку, контейнер з опціями) без використання кастомних JS-бібліотек, які важать як крило літака.
4. CSS Style Queries (Контейнерні запити по стилях)
Ми вже звикли до запитів по розміру контейнера, але тепер можна змінювати стилі залежно від значень кастомних властивостей (CSS variables) батьківського елемента. Це дозволяє створювати неймовірно гнучкі дизайн-системи.
5. HTML Search Element
Тег <search> став обов'язковим для доступності. Він семантично позначає частину сторінки, призначену для пошуку або фільтрації, замінюючи старий підхід з role="search".
6. Masonry Layout у CSS Grid
Те, на що ми чекали роками! Більше не потрібен JS для створення сітки в стилі Pinterest. У 2026 році властивість grid-template-rows: masonry вже стабільно працює в більшості сучасних браузерів.
Що з цього ви вже впровадили у свої проекти? Чи є щось, що я пропустив?
Masonry — це просто розрив! Я нарешті видалив скрипт на 15кб, який тільки цим і займався. Єдине, що засмучує — Safari як завжди наздоганяє останньою, хоча в 19-й версії вже ніби все ок.