What We Know (So Far) About CSS Studying Order

div {
  show: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  reading-flow: grid-rows;
  
  a:nth-child(2) {
    grid-row: 2 / 4;
    grid-column: 3;
  }

  a:nth-child(5) {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
  }
}

Or, reading-flow: grid-columns will set up a column-by-column focus order:

reading-flow: grid-order will give us the default grid habits (i.e., the jumbled up model). That is additionally very akin to reading-flow: regular (besides that, once more, the container stays a studying movement container, which is required for reading-order).

There’s additionally reading-flow: source-order, which is for flex, grid, and block containers. It mainly turns containers into studying movement containers, enabling us to make use of reading-order. To be frank, until I’m lacking one thing, this seems to make the flex-flow and grid-order values redundant?

reading-order

reading-order type of does the identical factor as reading-flow. The distinction is that reading-order is for particular flex or grid gadgets, and even parts in a easy block container. It really works the identical approach because the order property, though I suppose we may additionally examine it to tabindex.

Word: To make use of reading-order, the container will need to have the reading-flow property set to something aside from regular.

I’ll exhibit each reading-order and order on the similar time. Within the instance under, we've got one other flex container the place every flex merchandise has the order property set to a unique random quantity, making the order of the flex gadgets random. Now, we’ve already established that we will use reading-flow to find out focus order no matter visible order, however within the instance under we’re utilizing reading-order as a substitute (within the precise similar approach as order):

div {
  show: flex;
  reading-flow: source-order; /* Something however regular */

  /* Options on the finish due to the upper values */
  a:nth-child(1) {
    /* Visible order */
    order: 567;
    /* Focus order */
    reading-order: 567;
  }

  a:nth-child(2) {
    order: 456;
    reading-order: 456;
  }

  a:nth-child(3) {
    order: 345;
    reading-order: 345;
  }

  a:nth-child(4) {
    order: 234;
    reading-order: 234;
  }

  /* Options firstly due to the decrease values */
  a:nth-child(5) {
    order: -123;
    reading-order: -123;
  }
}

Sure, these are some moderately odd numbers. I’ve completed this as an instance how the numbers don’t signify the place (e.g., order: 3 or reading-order: 3 doesn’t make it third within the order). As a substitute, parts with decrease numbers are extra in direction of the start of the order and parts with increased numbers are extra in direction of the top. The default worth is 0. Components with the identical worth will probably be ordered by supply order.

In sensible phrases? Think about the next instance:

div {
  show: flex;
  reading-flow: source-order;

  a:nth-child(1) {
    order: 1;
    reading-order: 1;
  }

  a:nth-child(5) {
    order: -1;
    reading-order: -1;
  }
}

Of the 5 flex gadgets, the primary one is the one with order: -1 as a result of it has the bottom order worth. The final one is the one with order: 1 as a result of it has the highest order worth. Those with no declaration default to having order: 0 and are thus ordered in supply order, however in any other case match in-between the order: -1 and order: 1 flex gadgets. And it’s the identical idea for reading-order, which within the instance above mirrors order.

Nevertheless, when reversing the path of flex gadgets, remember the fact that order and reading-order work a bit of in another way. For instance, reading-order: -1 would, as anticipated, and pull a flex merchandise to the start of the main target order. In the meantime, order: -1 would pull it to the finish of the visible order as a result of the visible order is reversed (so we’d want to make use of order: 1 as a substitute, even when that doesn’t appear proper!):

div {
  show: flex;
  flex-direction: row-reverse;
  reading-flow: source-order;

  a:nth-child(5) {
    /* Due to row-reverse, this really makes it first */
    order: 1;
    /* Nevertheless, this habits doesn’t apply to reading-order */
    reading-order: -1;
  }
}

reading-order overrides reading-flow. If we, for instance, apply reading-flow: flex-visual, reading-flow: grid-rows, or reading-flow: grid-columns (mainly, any declaration that does actually change the studying movement), reading-order overrides it. Lets say that reading-order is utilized after reading-flow.

What if I don’t need to use flexbox or grid format?

Properly, that clearly guidelines out the entire flex-y and grid-y reading-flow values; nevertheless, you possibly can nonetheless set reading-flow: source-order on a block component after which manipulate the main target order with reading-order (as we did above).

How does this relate to the tabindex HTML attribute?

They’re not equal. Destructive tabindex values make targets unfocusable and values aside from 0 and -1 aren’t really useful, whereas a reading-order declaration can use any quantity because it’s solely contextual to the studying movement container that incorporates it.

For the sake of being full although, I did take a look at reading-order and tabindex collectively and reading-order appeared to override tabindex.

Going ahead, I’d solely use tabindex (particularly, tabindex="-1") to forestall sure targets from being focusable (the disabled attribute will probably be extra applicable for some targets although), after which reading-order for all the pieces else.

Closing ideas

Having the ability to outline studying order is beneficial, or not less than it signifies that the order property can lastly be used as supposed. Up till now (or moderately when all net browsers assist reading-flow and reading-order, as a result of they solely work in Chrome 137+ in the meanwhile), order hasn’t been helpful as a result of we haven’t been in a position to make the main target order match the visible order.