Reading flow ships in Chrome 137

Chris Coyier Chris Coyier on

Rachel Andrew notes an excellent new feature of CSS that Chrome is dropping first: reading-flow and reading-order.

There are CSS features that can move elements to places that make what the tabbing order (thus “reading order”) super different than what the visual order of the elements is. This can be an awkward jumpy-aroundy experience and it’s considered an accessibility problem.

This is a step toward fixing that. I took a very basic example from the spec to try it out and made a Pen. See this video I took in Chrome Canary how it goes from the wrong order to the right order:

I was imagining (hoping?) it would be more like reading-order: visual; where it would just “make it work” based on the rendered position of the elements and the direction and writing-mode and whatnot (even absolute positioning or masonry?). But it looks like this (for now?) is specifically for fixing flexbox and grid layouts and you have to specifically tell it what you’re doing.

(sorry about all the parentheticals)

Wanna learn modern CSS layout?

Frontend Masters logo

Laying out designs on the web with CSS has gotten a lot more powerful in recent years. CSS grid, flexbox, and container queries are incredibly powerful tools for that, and we have a complete learning course on them from Jen Kramer.

7-Day Free Trial

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.