The Dark Side of the Grid

ć i v o z u t a M l e u n a M ❤ y 1 1 a , S S C , L M T H r e c n Freela o z u t a m m @ c f d i r g k r a d / bit.ly

CSS Grid Layout? CSS Grid Layout is a grid-based layout system designed for two-dimensional layouts. @mmatuzo

What’s special about Grid? The first true layout method in CSS. float, display:inline-block, position, display:table, display: flex not designed for building two-dimensional layouts. Kinda like table layouts but responsive and flexible and described in CSS and not in HTML. @mmatuzo

Article layout for a fictional magazine. Source: http://juliabialko.com/magarticle/

A Brief overview of Grids History Early 90s: First ideas, but “too complex” to implement. 1996: “frame-based” layout model. 2005: Advanced Layout Module (later Template Layout Module). @mmatuzo

Grids in Microsofts Metro Design

A Brief overview of Grids History 2011: Microsoft ships a Grid implementation behind the -ms- vendor prefix in IE 10. Microsoft presents a draft spec to the W3C in 2012. CSS Working Group begins tweaking Microsoft’s proposal. Bloomberg hires Igalia to implement CSS Grid for both Blink and WebKit. @mmatuzo

A Brief overview of Grids History January 2017: CSS Grid in Chromium 56 for Android. Early March 2017: Chrome and Firefox. End of March 2017: Opera and Safari. October 17th, 2017: Edge. @mmatuzo

Grid-related properties and values display justify-content grid-column grid-template-columns align-content grid-row grid-template-rows place-content grid-area grid-template-areas grid-auto-columns justify-self grid-template grid-auto-rows align-self grid-column-gap grid-auto-flow place-self grid-row-gap grid min-content, max-content, fitcontent grid-gap grid-column-start fr justify-items grid-column-end repeat() align-items grid-row-start minmax() place-items grid-row-end @mmatuzo

Cover of the LP “The Dark Side of the Moon” by Pink Floyd, released in 1973.

PINK FLOYD FUN FACT #1 45 million copie s sold The Dark Side of the Moon is, with over 45 million copies sold, the fourth best-selling album worldwide. #1 Thriller by Michael Jackson (66 Million) #2 Their Greatest Hits (1971–1975) by Eagles (51 Million) #3 Back in Black by AC/DC (50 Million) @mmatuzo

C H A N G I NG V I S U A L O R D E R @mmatuzo

Changing Visual Order Explicit placement order property Absolute positioning Auto flow Areas @mmatuzo

Visual Order Both the tab order and the order in which screen readers read content follow DOM order. Changing visual order in CSS has no effect on tab and screen reader order. @mmatuzo

Visual Order Visual order matches DOM order <1> <2> <3> <4> <5> <6> {1} {2} {3} {4} {5} {6} Visual order doesn’t match DOM order <1> <2> <3> <4> <5> <6> {1} {4} {2} {6} {5} {3} @mmatuzo

If visual order doesn’t match DOM order.

A keyboard user may have trouble predicting where focus will go next. @mmatuzo

If visual order doesn’t match DOM order. 2. Users of screen magnifiers may be confused when the display detail skips around constantly. @mmatuzo

If visual order doesn’t match DOM order. 3. If a blind user is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different order. @mmatuzo

Who uses the keyboard for navigation? People with physical disabilities who cannot use the mouse. People with chronic conditions, such as repetitive stress injuries (RSI), who should limit or avoid use of a mouse. People who temporarily can’t use the mouse due to an injury. Powerusers (e.g. developers or designers 🤓). @mmatuzo

Who uses screen readers for navigation? Blind people. People with low vision to supplement what they see on the screen. People with learning disabilities. @mmatuzo

V ISUAL O RDER EX PLIC IT PL A CE ME NT @mmatuzo

Explicit Placement Grid gives us the ability to place items in every cell we want in our grids by specifying in which column and row they start or end. grid-column grid-row grid-column-start grid-row-start grid-column-end grid-row-end @mmatuzo

$ explicit placement .item:nth-child(1) { .item:nth-child(2) { grid-column: 2; grid-column: 3; grid-row: 2; grid-row: 3; } } ""... @mmatuzo

V ISUAL O R D E R O RDER P R O P E R T Y @mmatuzo

$ order property .item:nth-child(2) { order: 9; } .item:nth-child(5) { order: 6; } ""... @mmatuzo

V ISUAL O RDER A U T O-F L O W @mmatuzo

https://s.codepen.io/matuzo/pen/pONEzJ @mmatuzo

$ auto-flow .grid { display: grid; grid-template-columns: repeat(3, 200px); grid-auto-rows: 80px; grid-gap: 20px; grid-auto-flow: dense; } @mmatuzo

V ISUAL O RDER A R E A S @mmatuzo

Example: Mobile layout

$ areas body { display: grid; grid-template-areas: "header" "content" "ads" "newsletter" "footer"; } @mmatuzo

$ areas body { display: grid; grid-template-areas: "header" "newsletter" "content" "ads" "footer"; } @mmatuzo

15,7% use a keyboard always or often when using their mobile devices.

$ areas body { grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "content content" "ads newsletter" "footer footer"; } @mmatuzo

WHO SE R E S P O N S IBILITY IS IT ? @mmatuzo

Our options Dynamically changing source order for every breakpoint with JavaScript. 🙄 Applying tabindex or aria-flow-to to all elements and reorder them accordingly. 😭 Browser sniffing - Send different HTML sources to each client/devices type. 🤢 @mmatuzo

Our options Mitigate the problem by providing skip links. 😐 Don’t change the visual order. 🙄 @mmatuzo

“ „Authors must use order and the grid-placement properties only for visual, not logical, reordering of content.“ – https://drafts.csswg.org/css-grid/#order-accessibility

“ Brilliant on the one hand for them trying to at least advise everybody in the right direction but really — come on. […] Suggesting that we don’t all use it just because of this, i think, is wishful thinking. –Léonie Watson FF Conf 2016 https://www.youtube.com/watch?v=spxT2CmHoPk

So...what do we do? Think about source order before writing HTML and CSS. Work closely with designers early on. Start with a well structured HTML document. Write CSS mobile first and change the layout according to screen sizes. @mmatuzo

So...what do we do? Test what you’ve built by tabbing through the layout at different screen sizes. Return to the source if there is an order mismatch across screen sizes. @mmatuzo

PINK FLOYD FUN FACT #2 73 6 weeks on the Billboard chart The Dark Side of The Moon spent 736 weeks on the American Billboard chart. That’s more than 14 years! @mmatuzo

C O MPR O MISIN G O N S EM AN TICS @mmatuzo

“ I believe there will be a strong temptation, especially with Grid, to flatten out document structure in order that all elements become a child of the element with the Grid declared. Making layout simple, but at what cost? ” Rachel Andrew (rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility)

$ compromising on semantics <form> <div> <label for="name">What's your name?"</label> <input type="text" id="name" "/> "</div> <div> <label for="email">E-Mail"</label> <input type="email" id="email" "/> "</div> ""... @mmatuzo

$ compromising on semantics … <fieldset> <legend>Shirt size"</legend> <div> <input type="radio" id="s" name="r"> <label for="s">S"</label> "</div> <div> <input type="radio" id="m" name="r"> <label for="m">M"</label> "</div> "</fieldset> "</form> @mmatuzo

https://s.codepen.io/matuzo/pen/BOWYLB?editors=1100 @mmatuzo

$ compromising on semantics form { display: grid; grid-template-columns: max-content minmax(auto, 600px); grid-gap: 10px 20px; } @mmatuzo

https://s.codepen.io/matuzo/pen/BOWYLB?editors=1100 @mmatuzo

$ compromising on semantics

<div> <label for="name">What's your name?"</label> <input type="text" id="name" "/> "</div> <div> <label for="email">E-Mail"</label> <input type="email" id="email" "/> "</div> @mmatuzo

$ compromising on semantics <fieldset> <legend strong>Shirt size"</legend strong> <div> <div> <input type="radio" id="s"> <label for="s">S"</label> "</div> <div> <input type="radio" id="m"> <label for="m">M"</label> "</div> "</div> "</fieldset> @mmatuzo

https://s.codepen.io/matuzo/pen/BOWYLB?editors=1100 @mmatuzo

The form displayed without CSS

COMP ROM IS ING ON SE M ANTICS S U B GR I D @mmatuzo

“ A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container, making it a subgrid. – https://drafts.csswg.org/css-grid-2/ ”

$ compromising on semantics form > div, fieldset { display: grid; grid-template-columns: subgrid; } @mmatuzo

Subgrid will ship with level 2 of the specification

“ display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. https://caniuse.com/#search=contents ”

$ compromising on semantics form > div, fieldset { display: contents; } @mmatuzo

https://codepen.io/matuzo/pen/Mqrpbm @mmatuzo

display: contents; is supported by all major desktop browsers except for Edge

Due to a bug display: contents; removes items from the accessibility tree.

$ compromising on semantics ul { display: contents; } @mmatuzo

PINK FLOYD FUN FACT #3 Mo nty Python and the Holy Grail In 1975 Pink Floyd helped to finance the movie “Monty Python and the Holy Grail” by the comedy group Monty Python. Some of the other investors were Led Zeppelin and Genesis. @mmatuzo

C RO S S B RO WSER S U PPO RT @mmatuzo

Grids History Microsoft shipped a Grid implementation behind the -ms- vendor prefix in IE 10 in 2011. Chrome, Firefox, Opera, Safari and Edge shipped a different implementation throughout 2017. @mmatuzo

Properties: Level 1 vs. MS Spec CR Level 1 property grid-template-columns grid-template-rows grid-template-areas grid-template grid-auto-columns grid-auto-rows grid-auto-flow grid grid-row-start grid-column-start grid-row-end grid-column-end IE10 implementation -ms-grid-columns -ms-grid-rows x x x x x x -ms-grid-row -ms-grid-column x x CR Level 1 property grid-row grid-column grid-area grid-row-gap grid-column-gap grid-auto-flow grid-gap align-self justify-self IE10 implementation x x x x x x x -ms-grid-column-span -ms-grid-row-span -ms-grid-column-align -ms-grid-row-align @mmatuzo

$ browser support .grid { display: -ms-grid; -ms-grid-columns: 200px 200px; -ms-grid-rows: 130px 130px; display: grid; grid-template-columns: 200px 200px; grid-template-rows: 130px 130px; } @mmatuzo

Chrome IE 11 4 items in a 2 x 2 grid without explicit placement in Chrome and IE11

$ browser support .item:nth-child(1) { .item:nth-child(3) { -ms-grid-column: 1; -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-row: 2; } } .item:nth-child(2) { .item:nth-child(4) { } -ms-grid-column: 2; -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row: 2; } @mmatuzo

4 items in a 2 x 2 grid with explicit placement in IE11

BRO WSER SUPP ORT A U T OP R E F I X E R ? @mmatuzo

$ autoprefixer module.exports = { plugins: [ require('autoprefixer')({ grid: true, }) ] } @mmatuzo

Autoprefixer with the grid setting set to true.

Autoprefixer fakes gaps by adding rows and columns in IE 10 and IE 11.

Autoprefixer gotchas grid-template or grid-template-areas + gridtemplate-columns mandatory for gap support. Area names must be unique. Negative line numbers, e.g. grid-column: 1 / -1; are not supported. @mmatuzo

Autoprefixer gotchas grid shorthand not supported. There are no named lines at the moment. It’s not possible to define end-lines only. No auto placement. @mmatuzo

Autoprefixer gotchas grid shorthand not supported. There are no named lines at the moment. It’s not possible to define end-lines only. m i L d e t auto placement. iNo @mmatuzo

Autoplacement in Autoprefixer Both columns and rows must be defined. Repeat auto-fit and auto-fill are not supported. No manual cell placement or column/row spans allowed inside an autoplacement grid. When changing the grid gap value, columns and rows must be re-declared. @mmatuzo

11,6% IE users in Austria.

Internet Explorer support is a barrier for many developers.

“ I don’t think we owe it to any users to make it all exactly the same. Therefore we can get away with keeping fallbacks very simple. My hypothesis: users don’t mind, they’ve come for the content. –Hidde de Vries hiddedevries.nl/en/blog/2018-08-11-lets-serve-everyone-good-looking-content ”

Th ere is no d ar k sid e of t h e mo o n g r i d r e a l l y . M at te r of f ac t i t ' s al l da r k . PINK FLOYD: ECLIPSE @mmatuzo

Responsible use of Grid Avoid grid-template-areas or any other reordering techniques on interaction sensitive components. Test with your keyboard. Don’t compromise on semantics. @mmatuzo

Responsible use of Grid If you’re using autoprefixer make sure everyone in your team is aware of its limitations and what it does behind the scenes. Make sure your components work in older and less capable browsers. Embrace the power of progressive enhancement. @mmatuzo

Slides: bit.ly/dark-grid-fc Dziękuję manuel@matuzo.at @mmatuzo