I’m really excited that the reading-flow and reading-order properties are in Chrome 137 (current beta, will be Chrome stable as of May 27, 2025).
Finding a way to deal with the visual and source order disconnect created by grid and flex layout has been something I’ve kept returning to ever since grid shipped in browsers. It turned out to be far more complex than the proposal I made in 2022, but I think that what we’ve now specified and has been implemented in Chrome gives us what I was aiming for, and more.
I’ve worked on the specification for this, but all the credit for the Chrome implementation goes to Chrome engineer Di Zhang, who has done the implementation work, and also worked the related HTML issues through the WHATWG process. Read our post Use CSS reading-flow for logical sequential focus navigation, for details of what shipped in the Chrome beta yesterday, and check out the demos.
We really need you to try this out. There’s a lot of scope for edge cases with something that touches focus order. We want to find and fix any actual issues when used in practice, as opposed to thinking up theoretical problems. You can raise bugs against the spec on the CSSWG GitHub repo, or bugs with the Chrome implementation at crbug.com. Whenever I’ve talked about this issue, lots of people have told me they want this problem fixed. If you are one of those people, do check to see if what we’ve implemented solves the use cases you have. If we can show it’s working well, that will help make the case for other browsers to implement this so it can become part of Baseline.
Likes