Содержание
Коротко
Выпуск 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-хаки в своих проектах — часть из них уже можно выбросить.