Зміст
Коротко
Випуск Frontend Focus #734 збирає матеріали про те, як сучасний CSS поступово забирає у JavaScript задачі верстки, анімацій і мікровзаємодій. Окремий акцент — реліз Safari 26.4 (WebKit) і практичні прийоми, які раніше вимагали скриптів або важких бібліотек.
Що сталося
Центральна стаття «The Great CSS Expansion» (Pavel Laptev) систематизує нативні можливості: коли має сенс відмовитися від JS-рішення на користь CSS і де мова стилів усе ще не дотягує.
Паралельно в дайджесті:
| Тема | Суть |
|---|---|
| Safari 26.4 | CSS Grid Lanes (колишня «masonry»-розкладка), доопрацювання zoom, anchor positioning, math-функції в img |
| Firefox 149 | Split View — дві вкладки поруч |
| TypeScript 6.0 | Реліз мови (контекст для фронтенд-стеку) |
| CSS-трюки | Sticky-заголовок із «магією» зміни вигляду при скролі (Josh W. Comeau), підсвітка виносок за якорем |
Також згадують рефакторинг CSS за допомогою ШІ «під контролем» — не сліпа генерація всього застосунку, а точкові правки з рев’ю.
Чому це важливо
Роками фронтенд вирішував задачі JS там, де браузер не вмів: masonry-сітки, позиціонування відносно якоря, scroll-driven ефекти. Зараз специфікації й движки наздоганяють — менше коду в бандлі, менше layout thrashing, краща доступність.
Для розробників це зміна звички: перед useEffect і ResizeObserver варто запитати, чи закриває кейс @starting-style, anchor(), @scroll-timeline або нові grid-режими. Не все уже стабільно в усіх браузерах, але тренд очевидний.
На практиці
- Аудит UI — випишіть компоненти, де JS лише вимірює DOM або вішає класи за scroll; перевірте caniuse для CSS-аналогів.
- Safari/WebKit — якщо цілитеся в Apple-аудиторію, протестуйте Grid Lanes і anchor positioning у 26.4; fallback для старих версій обов’язковий.
- Sticky + scroll — патерн «заголовок змінюється при прокрутці» часто робиться чистим CSS (див. Comeau); не тягніть Intersection Observer без потреби.
- ШІ для CSS — використовуйте як помічника при рефакторингу legacy-стилів, але зберігайте рев’ю та visual regression.
- Поліфіли vs progressive enhancement — для експериментальних властивостей тримайте базову верстку без них.
Підсумок
Дайджест — не manifesto «JS мертвий», а карта можливостей 2026 року: нативний CSS стає повноцінним інструментом для layout і UX-деталей. Має сенс переглянути старі JS-хаки у своїх проєктах — частину з них уже можна викинути.