The Fight Against Layout Jank

A web page isn’t locked in stone just because it has rendered visually. Media assets, like images, can come in and cause the layout to shift based on their size, which typically isn’t known in fluid layouts until they do render. Or fonts can load and reflow layout. Or XHRs can bring in more content to be placed onto the page. We’re always doing what we can to prevent the layout from shifting around — that’s what I mean by layout jank. It’s awkward and nobody likes it. At best, it causes you to lose your place while reading; at worst, it can mean clicking on something you really didn’t mean to.

While I was trying to wrap my head around the new Layout Instability API and chatting it out with friends, Eric Portis said something characteristically smart. Basically, layout jank is a problem and it’s being fought on multiple fronts:

• Fight the problem at the content/authoring level: We now have intrinsicsize as an HTML attribute and aspect-ratio as a CSS property. Both are designed for this fight, although they don’t really have great browser support yet, requiring DIY aspect ratio boxes intead. Plus, ideas like this change to UA stylesheets to widen the effectiveness of aspect-ratio.
• Fight the problem at the browser behavior level: Scroll anchoring is designed to do this as well. The fact that it’s now enabled by default is a big deal. It’s also still possible to control it with CSS if you need to, via overflow-anchor.
• Measure the problem and the causes: The Layout Instability API is designed for this, presumably to enable tooling that monitors it.

The post The Fight Against Layout Jank appeared first on CSS-Tricks.