The big three browser vendors have been quiet lately, so it is the community educators showing where modern CSS layouts are going. If you have read my other posts you know I lean on native solutions rather than “clever” JavaScript that piles work onto the main thread. This week brought real movement on state transitions and grid logic.
Persistent video state with view transitions
Chris Coyier put out a walkthrough on holding video state across page navigations with the View Transition API. That has always been a bottleneck in WordPress work. You want a background video or a header player to keep its timestamp while someone moves around the site, and until now that meant an SPA framework or pjax-style loading.
The workaround uses the pageswap event together with sessionStorage. Serialize the video state into a JSON string before the transition, then restore it on pagereveal. It is faked rather than genuinely continuous, and there is a small audio stutter, but for multi-page applications (MPAs) it is a big step forward.
window.addEventListener('pageswap', (event) => {
if (event.viewTransition) {
const video = document.querySelector('video');
sessionStorage.setItem('video-state', JSON.stringify({
currentTime: video.currentTime,
paused: video.paused
}));
}
});CodePen 2.0 is in private beta with support for multi-file projects. That helps when you are testing modern CSS layouts, because you can build and share cross-document transitions in a sandbox without standing up a dev server.
Named media queries with cascade layers
Kevin Powell showed a way to “name” media queries using CSS cascade layers. @custom-media still is not supported across all browsers, so wrapping media queries in @layer blocks gives you a semantic handle on your breakpoints and control over their priority.
I would still treat it as a stopgap. For the longer version on clean architecture, I wrote up a Clean Responsive Hexagon Grid that leans on similar logic for modern CSS layouts.
CSS masonry is now grid-lanes
Native masonry finally has a name: grid-lanes. For years the only options were libraries like Masonry.js or Isotope, which tend to cause layout shifts and drag on mobile. Jen Simmons has been pushing the display: grid-lanes syntax, which folds masonry logic into the CSS Grid spec itself.
This is the refactor a lot of us have been waiting for. The browser works out the tightly packed lane logic instead of your JavaScript calculating absolute positions. I went through the details in CSS Masonry Layout is Finally Real. If you build heavy image galleries, it changes how you approach them.
What is happening underneath
To get much further with any of this you need a picture of how browsers actually work: parsing HTML, building the DOM tree, painting pixels. Dmytro Krasun’s “How Browsers Work” is worth the read. It explains why some CSS features cost more than others, such as triggering a full layout instead of only a repaint.
Andy Clarke’s take on theming animations with relative color syntax is also worth a look. He calculates color shifts during animation with CSS variables, which keeps the motion tied to the design system instead of hard-coded values.
If this modern CSS layouts work is eating your dev hours, I can take it on. I have been working with WordPress since the 4.x days.
Where I would spend the time
Shiny object syndrome is real in frontend work, but view transitions and grid-lanes change how a page gets built rather than adding one more option. Drop the heavy polyfills and start trying the native APIs. The reference docs are the MDN Guide on View Transitions and the WebKit Grid Lanes documentation.
