A solution for the visual and source order disconnect
Slide 1
Slide 2
Rachel Andrew Content lead for Chrome Developer Relations rachelandrew.co.uk
Slide 3
24ways.org/2012/css3-grid-layout
Slide 4
CSS Grid, Baseline Widely available since January 2023
Slide 5
Slide from 2015 CSS Day grid talk
Slide 6
.grid a:nth-child(3) { grid-column: span 3; grid-row: span 3; } .grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4,1fr); }
Slide 7
Here’s a cool thing Please don’t use it.
Slide 8
CSS Grid Level 1 Correct source order is important for speech, for sequential navigation (such as keyboard navigation), and non-CSS UAs such as search engines, tactile browsers, etc. Grid placement only affects the visual presentation! This allows authors to optimize the document source for non-CSS/nonvisual interaction modes, and use grid placement techniques to further manipulate the visual presentation so as to leave that source order intact.
Slide 9
Separating content from presentation Something we’ve tried to do since the early days of CSS layout.
Slide 10
https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/
Slide 11
https://github.com/w3c/csswg-drafts/issues/5675
Slide 12
https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
Slide 13
reading-flow CSS Display Level 4
Slide 14
Can we just opt into the order that flex or grid items are laid out?
Slide 15
Reading or visual order is subjective
Slide 16
flex-direction: row-reverse
Slide 17
In most cases DOM order is what you want No universal switch to let developers forget about source order.
Slide 18
Scoped to particular layout methods We’re not trying to do this on block layout.
Slide 19
reading-flow: normal Follow the order of items in the DOM. The initial value.
Slide 20
.flex { display: flex; flex-direction: row-reverse; }
Slide 21
normal flex-flow flex-visual grid-rows grid-columns grid-order Values for reading-flow
Slide 22
reading-flow: flex-visual Follow the visual layout, taking writing mode and direction into account.
Slide 23
.flex { display: flex; flex-direction: row-reverse; reading-flow: flex-visual; }
Slide 24
reading-flow: flex-flow Follow the flow order.
Slide 25
.flex { display: flex; flex-direction: row-reverse; reading-flow: flex-flow; }
Slide 26
Adding the order property The reading flow now takes into account the modification made by order.
Slide 27
.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-flow: normal; }
Slide 28
.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-flow: flex-visual; }
Slide 29
.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-flow: flex-flow; }
Slide 30
Grid and reading flow Automatic layout—grid-auto-flow: dense
Slide 31
Slide 32
Slide 33
reading-flow: grid-rows Follow the reading order by row.
Slide 34
.grid a:nth-child(3) { grid-column: span 3; grid-row: span 3; } .grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4,1fr); reading-flow: grid-rows; }
Slide 35
reading-flow: grid-columns Follow the reading order by column.
Slide 36
Slide 37
.grid a:nth-child(2) { grid-column: span 3; grid-row: span 3; } .grid { display: grid; grid-auto-flow: column dense; grid-template-columns: repeat(5,1fr); reading-flow: grid-columns; }
Slide 38
Grid and reading flow Line-based placement, grid-template-areas
Slide 39
.grid { display: grid; grid-template-columns: repeat(5,1fr); grid-template-areas: “b b b b b” “d d f f f” “d d e c a”; }
Slide 40
.grid { display: grid; grid-template-columns: repeat(5,1fr); grid-template-areas: “b b b b b” “d d f f f” “d d e c a”; reading-flow: grid-rows; }
Slide 41
reading-flow: grid-order As normal, but take the order property into account.
Slide 42
Slide 43
The reading-order property For the children of a reading flow container.
Slide 44
Slide 45
.grid a:nth-child(3) { grid-column: span 3; grid-row: span 3; } .grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4,1fr); reading-flow: grid-rows; } .grid a:nth-child(5) { grid-column: 4; grid-row: 1; grid-order: -1; }
Slide 46
Source order is important Never use reading-flow to avoid the work of updating your HTML.
Slide 47
Create a sensible document Then consider small tweaks to optimize the reading experience at different breakpoints.
Slide 48
Try it out in Chrome Canary https://chrome.dev/reading-flow-examples
Slide 49
Questions? Rachel Andrew https://noti.st/rachelandrew/Aj6atb/
