The Dark Side of the Grid

A presentation at FrontEnd Connect in December 2018 in Warsaw, Poland by Manuel Matuzovic

Slide 1

Slide 1

Slide 2

Slide 2

ć 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

Slide 3

Slide 3

The Dark Side of the Grid

Slide 4

Slide 4

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

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

Grids in Microsofts Metro Design

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

If visual order doesn’t match DOM order.

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

V ISUAL O RDER A R E A S @mmatuzo

Slide 33

Slide 33

Example: Mobile layout

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

“ „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

Slide 43

Slide 43

“ 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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

“ 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)

Slide 49

Slide 49

$ 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

Slide 50

Slide 50

$ 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

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

$ 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

Slide 55

Slide 55

$ 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

Slide 56

Slide 56

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

Slide 57

Slide 57

The form displayed without CSS

Slide 58

Slide 58

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

Slide 59

Slide 59

“ 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/ ”

Slide 60

Slide 60

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

Slide 61

Slide 61

Subgrid will ship with level 2 of the specification

Slide 62

Slide 62

“ 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 ”

Slide 63

Slide 63

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

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

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

Slide 67

Slide 67

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

Slide 68

Slide 68

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

Slide 69

Slide 69

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

Slide 70

Slide 70

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

Slide 71

Slide 71

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

Slide 72

Slide 72

$ 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

Slide 73

Slide 73

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

Slide 74

Slide 74

$ 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

Slide 75

Slide 75

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

Slide 76

Slide 76

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

Slide 77

Slide 77

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

Slide 78

Slide 78

Autoprefixer with the grid setting set to true.

Slide 79

Slide 79

Autoprefixer with the grid setting set to true.

Slide 80

Slide 80

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

Slide 81

Slide 81

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

Slide 82

Slide 82

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

Slide 83

Slide 83

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

Slide 84

Slide 84

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

Slide 85

Slide 85

Slide 86

Slide 86

Slide 87

Slide 87

Slide 88

Slide 88

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

Slide 89

Slide 89

11,6% IE users in Austria.

Slide 90

Slide 90

Internet Explorer support is a barrier for many developers.

Slide 91

Slide 91

“ 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 ”

Slide 92

Slide 92

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

Slide 93

Slide 93

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

Slide 94

Slide 94

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

Slide 95

Slide 95

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