CSS reading-flow and reading-order

CSS reading-flow and reading-order help control the order in which items are reached when the visual layout does not match normal document order. They are designed for layouts such as flex and grid where items can be visually rearranged.

Why Reading Order Matters

A grid can place cards in a visually different order from the DOM. Keyboard focus and assistive technology still need a logical sequence. Rearranging only the visual layout can otherwise create confusing navigation.

Set a Reading Flow

Example:

.dashboard {
  display: grid;
  reading-flow: grid-rows;
}

The chosen value tells the browser how to derive the reading sequence from the layout.

Use reading-order on Items

Example:

.important {
  reading-order: -1;
}

reading-order affects reading and keyboard navigation, not visual placement. It only applies inside a container whose reading-flow is not normal. Lower integer groups come first; the default group is 0.

Example Grid

Example:

<div class="cards">
  <button>Profile</button>
  <button class="important">Alerts</button>
  <button>Settings</button>
</div>

<style>
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  reading-flow: grid-rows;
}

.important {
  reading-order: -1;
}
</style>

In a supporting browser, the example's focus order is Alerts, Profile, Settings, while its visual order remains Profile, Alerts, Settings. This deliberately shows the distinction; real interfaces should keep the interaction path understandable. Without support, native DOM order remains the fallback.

Do Not Use It to Hide Bad Markup

The DOM should still be meaningful. Reading-flow features are useful when a responsive visual layout legitimately changes ordering, not as a replacement for sensible source structure.

Keyboard Testing

After changing reading flow, test the interface with the Tab key and with screen-reader navigation. The visual path and interaction path should remain understandable.

Reading-flow is a newer CSS feature. Keep the DOM order usable as a fallback for browsers that do not support it.

Conclusion

reading-flow and reading-order give CSS a way to align interaction order with advanced layouts. Use them carefully and keep semantic source order as the foundation.