There’s a First Public Working Draft of CSS Display 4, which includes the work on the new reading-flow property. The property aims to solve the issue where the source (and therefore tab) order of a page gets disconnected from layout when using CSS grid layout or flexbox. This is a problem I’ve been talking and writing about for a long time. As soon as I realized this problem existed when using grid, I felt as if we were giving people potential with one hand but then removing it with the other. I’m very happy that we’re now fixing that problem.
Try it out in Chrome Canary
You can try out the feature in Chrome Canary right now (with the Experimental Web Platform features flag on), and I’ve created a collection of examples to make that easier. The more people who can try this out the better. If you have any places where you know this property should help, please test it, and make sure it’s meeting your needs.
Learn more at axe-con
I’ll be presenting on reading-flow at axe-con in February next year, it’s a free online conference and you can register now. I’m excited to go back to talk about the spec, because in 2021 I presented there about the problems of the source order and layout disconnect. It’s great to go back with actual progress!
Useful links
- My presentation from CSS Day earlier this year. The property was then still called
reading-orderand I mention several things we’ve now resolved in the CSS Working Group, but it’s still good information on the general idea. - The related PR on the HTML spec—Di Zhang is the Chrome engineer doing the implementation of
reading-flow. - Solving the CSS layout and source order disconnect—an older post on developer.chrome.com so some of the content is now outdated. It does, however, outline the issue we’re trying to fix.