A presentation at CSS Day in in Netherlands by Rachel Andrew
Layout and reading order
Content lead for Chrome Developer Relations CSS WG member Rachel Andrew Built websites before CSS was a thing rachelandrew.co.uk
gridbyexample.com
24ways.org/2012/css3-grid-layout
Slide from 2015 CSS Day grid talk
CSS Grid, Baseline widely available since January 2023
Slide from 2015 CSS Day grid talk
“You never know how tall anything is on the web” Me … for most of my web development career.
masonry
Grid and subgrid let you line things up in two dimensions But sometimes you just want stuff to fit nicely.
Should masonry be part of grid? Yes No
Grid and masonry are opposite in terms of sizing and placement In grid all items are placed before layout. With masonry items are placed as they are laid out.
What happens to incompatible properties and values? Things feel inconsistent when properties and values don’t work
You shouldn’t have to understand how we specify CSS to use CSS
Every future thing we add to grid will have to account for masonry
Add your thoughts • WebKit post: https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/ • Chrome post: https://developer.chrome.com/blog/masonry • Developer feedback issue: https://github.com/w3c/csswg-drafts/issues/10233
I don’t want masonry in Baseline (yet)
.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); }
Here’s a cool thing Please don’t use it.
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.
Separating content from presentation Something we’ve tried to do since the early days of CSS layout.
https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/
https://github.com/w3c/csswg-drafts/issues/5675
https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
reading-order-items CSS Display Level 4
Can we just opt into the order that flex or grid items are laid out?
Reading or visual order is subjective
flex-direction: row-reverse
In most cases DOM order is what you want No universal switch to let developers forget about source order.
Scoped to particular layout methods We’re not trying to do this on block layout.
reading-order-items: normal Follow the order of items in the DOM.
.flex { display: flex; flex-direction: row-reverse; }
reading-order-items: flex-visual Follow the visual layout, taking writing mode and direction into account.
.flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-visual; }
reading-order-items: flex-flow Follow the flow order.
.flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-flow; }
Adding the order property Reading order now takes into account the modification made by order.
.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-order-items: normal; }
.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-visual; }
.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-flow; }
Grid and reading order Automatic layout—grid-auto-flow: dense
reading-order-items: grid-rows Follow the reading order by row.
.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-order-items: grid-rows; }
reading-order-items: grid-columns Follow the reading order by column.
.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-order-items: grid-columns; }
Grid and reading order Line-based placement, grid-template-areas
.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”; }
.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-order-items: grid-rows; }
reading-order-items: grid-order As normal, but take the order property into account.
Current spec issues Please comment on these, or add an issue for anything new.
reading-order-items or reading-order? https://github.com/w3c/csswg-drafts/issues/9921
A different proposal https://github.com/w3c/csswg-drafts/issues/9923
How will reading-order-items work with display: contents? https://github.com/w3c/csswg-drafts/issues/9230
Should this be expanded to tables? https://github.com/w3c/csswg-drafts/issues/9922
And masonry?
Source order is important Never use reading-order-items to avoid the work of updating your HTML.
Create a sensible document Then consider small tweaks to optimize the reading experience at different breakpoints.
Thank you Rachel Andrew https://noti.st/rachelandrew/AoKXhe/
We have a problem with CSS layout, in particular automatic methods such as the proposed CSS masonry. It is easy to disconnect the source order, used for tabbing and reading out the content, from the way things appear to be ordered in the layout.
This talk shares a new proposal to fix this, currently being prototyped in Chrome.
The following resources were mentioned during the presentation or are useful additional information.
