Contents
In brief
Frontend Focus #734 rounds up how modern CSS is taking layout, animation, and micro-interaction work away from JavaScript—with a spotlight on Safari 26.4 (WebKit) and patterns that used to need scripts or heavy libraries.
What happened
The centerpiece, “The Great CSS Expansion” (Pavel Laptev), maps native capabilities: when to drop a JS solution for CSS and where stylesheets still fall short.
Also in the issue:
| Topic | Detail |
|---|---|
| Safari 26.4 | CSS Grid Lanes (former “masonry”), zoom fixes, anchor positioning, math in img |
| Firefox 149 | Split View—two tabs side by side |
| TypeScript 6.0 | Language release (stack context) |
| CSS tricks | Scroll-driven sticky header illusions (Josh W. Comeau), footnote highlight on anchor jump |
There is also controlled AI-assisted CSS refactors—not vibe-coding the whole app, but targeted edits with review.
Why it matters
For years, frontend used JS where the platform lacked masonry, anchor-relative positioning, or scroll-driven effects. Specs and engines are catching up—smaller bundles, less layout thrashing, better a11y.
The habit shift: before useEffect and ResizeObserver, ask whether @starting-style, anchor(), scroll timelines, or new grid modes suffice. Support is uneven, but the direction is clear.
In practice
- UI audit — list components where JS only measures DOM or toggles scroll classes; check caniuse for CSS equivalents.
- Safari/WebKit — test Grid Lanes and anchor positioning in 26.4 if Apple users matter; keep fallbacks.
- Sticky + scroll — header morph on scroll is often pure CSS (see Comeau); skip Intersection Observer when you do not need it.
- AI for CSS — helper for legacy refactors, not a substitute for review and visual regression.
- Progressive enhancement — baseline layout must work without experimental properties.
Takeaway
Not a “JS is dead” manifesto—a 2026 capability map. Native CSS is a serious tool for layout and UX polish. Worth revisiting old JS hacks; many can go.