Making Things Better: Redefining the Technical Possibilities of CSS

A presentation at An Event Apart Washington DC in July 2019 in Washington, DC, USA by Rachel Andrew

Slide 1

Slide 1

Making Things Better @rachelandrew #aeadc

Slide 2

Slide 2

Redefining the technical possibilities of CSS

Slide 3

Slide 3

“Tableless web design” The move from tables to CSS for layout meant simplifying our designs.

Slide 4

Slide 4

Slide 5

Slide 5

What we see as good web design is rooted in the technical limitations of CSS2

Slide 6

Slide 6

How we see the web is still informed by those early days.

Slide 7

Slide 7

“The web is not print”

Slide 8

Slide 8

“[I] accepted that CSS is just hacks over top of a document model that was never designed to be used like it is today” - Bailey Ling http://bling.github.io/blog/2013/04/13/dot-net-slash-wpf-to-html-slash-css-slash-javscript/

Slide 9

Slide 9

We have solved many of those problems That doesn’t mean we got all of them!

Slide 10

Slide 10

You never know how tall anything is on the web.

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

We hacked round the problem

Slide 15

Slide 15

stretch Default value of align-items. .container { display: flex; }

Slide 16

Slide 16

The default behaviour of these methods is the thing we struggled with for so long.

Slide 17

Slide 17

How big is this box?

Slide 18

Slide 18

Slide 19

Slide 19

Graduating To Grid https://aneventapart.com/news/post/graduating-to-grid-by-rachel-andrew-aea-video

Slide 20

Slide 20

<length-percentage> Our previous layout systems rely on everything having a length, or a percentage which resolves to a length.

Slide 21

Slide 21

“Flexbox is weird!” - People on the internet.

Slide 22

Slide 22

Flexbox isn’t the layout method you think it is.

Slide 23

Slide 23

Flexbox I have a bunch of different sized things to lay out.

Slide 24

Slide 24

Slide 25

Slide 25

Not everything requires a CSS hack. CSS may have solved your problem.

Slide 26

Slide 26

“it just blew my mind that someone thought the default behavior should be to just have the text honk right out of the box, instead of just making the box bigger” Steven Frank (creator of the meme) - https://css-tricks.com/css-is-awesome/#comment-1609829

Slide 27

Slide 27

CSS tries to avoid data loss In CSS terms that would mean making some content vanish.

Slide 28

Slide 28

Safe & Unsafe alignment Giving you the choice about prioritizing alignment over potentially vanishing content.

Slide 29

Slide 29

safe Tells the browser to align start if data loss would occur. .container { display: flex; flex-direction: column; align-items: safe center; }

Slide 30

Slide 30

safe Tells the browser to align start if data loss would occur.

Slide 31

Slide 31

unsafe I want my specified alignment even if it causes data loss. .container { display: flex; flex-direction: column; align-items: unsafe center; }

Slide 32

Slide 32

unsafe I want my specified alignment even if it causes data loss.

Slide 33

Slide 33

Overflow happens

Slide 34

Slide 34

Overflow Choose your solution

Slide 35

Slide 35

min-content & max-content Solving the “content honking out of the box” problem.

Slide 36

Slide 36

min-content A box that is wide enough for the content, but not wider. .awesome { width: min-content; }

Slide 37

Slide 37

min-content A box that is wide enough for the content, but not wider.

Slide 38

Slide 38

max-content A box that is as big as the content can be. .awesome { width: max-content; }

Slide 39

Slide 39

max-content A box that is as big as the content can be.

Slide 40

Slide 40

break-word Breaking words, making the box taller not wider. .awesome { overflow-wrap: break-word; }

Slide 41

Slide 41

break-word Breaking words, making the box taller not wider.

Slide 42

Slide 42

Choices! Choose your solution

Slide 43

Slide 43

vertical CSS being awesome in another dimension

Slide 44

Slide 44

The web is not left to right

Slide 45

Slide 45

Flexbox & Grid Take an agnostic approach to the writing mode of the document.

Slide 46

Slide 46

grid-area All four lines at once .item { grid-area: 1 1 4 2; }

Slide 47

Slide 47

Floats, positioning, margins, borders, padding All defined using physical terms – top, left, bottom, right

Slide 48

Slide 48

Logical Properties & Values https://www.w3.org/TR/css-logical-1/

Slide 49

Slide 49

width

Slide 50

Slide 50

writing-mode Change the writing mode of a document or a component. .container { display: grid; grid-template-columns: 100px 100px 300px; grid-gap: 10px; width: 700px; writing-mode: vertical-rl; }

Slide 51

Slide 51

width

Slide 52

Slide 52

inline-size Maps to width when horizontal and height when vertical .container { display: grid; grid-template-columns: 100px 100px 300px; grid-gap: 10px; inline-size: 700px; writing-mode: vertical-rl; }

Slide 53

Slide 53

inline-size

Slide 54

Slide 54

inline-size Be awesome in both dimensions without changing the code. .awesome { inline-size: min-content; }

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Solutions need to include different writing modes We’re not in the business of making things better only for a top to bottom, left to right web.

Slide 58

Slide 58

There is no fold Drew McLellan @media 2007

Slide 59

Slide 59

We know where the fold is

Slide 60

Slide 60

Viewport Units Representing the height and width of the current viewport

Slide 61

Slide 61

100vw 100% of the viewport width

Slide 62

Slide 62

100vh 100% of the viewport height

Slide 63

Slide 63

Slide 64

Slide 64

Viewport Units Two rows plus gap = 100vh .grid { display: grid; grid-gap: 2vh; grid-template-columns: 5vw 1fr 1fr 5vw 5vw 1fr 1fr 5vw; grid-template-rows: 60vh 38vh 49vh 49vh 49vh 49vh; }

Slide 65

Slide 65

Slide 66

Slide 66

CSS Scroll Snap https://www.w3.org/TR/css-scroll-snap-1/ .grid { display: grid; scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; } .a { grid-column: 2 / 5; grid-row: 1 ; scroll-snap-align: start; }

Slide 67

Slide 67

Paged vs Continuous Media

Slide 68

Slide 68

Grid & Subgrid What next for Grid Layout?

Slide 69

Slide 69

Slide 70

Slide 70

Slide 71

Slide 71

Slide 72

Slide 72

Nesting grids A grid item can become a grid. .box { display: grid; grid-template-rows: 1fr auto; } .box img { height: 100%; width: 100%; object-fit: cover; grid-row: 1 / 3; grid-column: 1; }

Slide 73

Slide 73

Slide 74

Slide 74

You never know how tall anything is on the web.

Slide 75

Slide 75

My document A container with two direct children

<div class=”container”> <ul> <li>…</li> <li>…</li> <li>…</li> </ul> <div class=”item”>…</div> </div>

Slide 76

Slide 76

Slide 77

Slide 77

display: grid Causes direct children to become grid items. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }

Slide 78

Slide 78

Slide 79

Slide 79

display: contents Remove a box from the visual display allowing grandchildren to act like direct children. ul { display: contents; }

Slide 80

Slide 80

Slide 81

Slide 81

subgrid The nested grid should use the tracks defined on the parent. ul { grid-column: 1 / -1; display: grid; grid-template-columns:subgrid; }

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

Slide 85

Slide 85

.grid { display: grid; grid-auto-rows: 300px mincontent; } Nested grid .box is a grid item that is also a grid container. .box { display: grid; grid-row: auto / span 2; grid-template-rows: 1fr auto; } .box img { height: 100%; width: 100%; object-fit: cover; grid-row: 1 / -1; grid-column: 1; }

Slide 86

Slide 86

.grid { display: grid; grid-auto-rows: 300px mincontent; } subgrid .box still has two rows but takes the size from the parent. .box { display: grid; grid-row: auto / span 2; grid-template-rows: subgrid; } .box img { height: 100%; width: 100%; object-fit: cover; grid-row: 1 / -1; grid-column: 1; }

Slide 87

Slide 87

Slide 88

Slide 88

Subgrid Level two of the Grid spec. In Firefox Nightly.

Slide 89

Slide 89

Subgrid in Chrome? Star this: https://bugs.chromium.org/p/chromium/issues/detail?id=618969

Slide 90

Slide 90

Slide 91

Slide 91

You will hit problems. Find new technical limitations.

Slide 92

Slide 92

We just can’t do that yet.

Slide 93

Slide 93

We get the new stuff when we create it.

Slide 94

Slide 94

Finding the edges

Slide 95

Slide 95

Slide 96

Slide 96

Slide 97

Slide 97

Slide 98

Slide 98

You don’t know how tall things are on the web

Slide 99

Slide 99

Overflow and Multicol

Slide 100

Slide 100

Slide 101

Slide 101

Slide 102

Slide 102

Slide 103

Slide 103

Overflow in the Block Dimension Something for Multiple-column Layout level 2?

Slide 104

Slide 104

Slide 105

Slide 105

Slide 106

Slide 106

Paged Media CSS – not just for web browsers.

Slide 107

Slide 107

Slide 108

Slide 108

Slide 109

Slide 109

Pages have defined size All defined in CSS. @page { size: 5.5in 8.5in; margin: 70pt 60pt 70pt; }

Slide 110

Slide 110

Margin boxes Content can be added to the margins – page numbers, titles. @page:right{ @bottom-right { margin: 10pt 0 30pt 0; border-top: .25pt solid #666; content: counter(page); font-size: 9pt; } } @top-right { content: string(doctitle); margin: 30pt 0 10pt 0; font-size: 9pt; color: #333; }

Slide 111

Slide 111

Slide 112

Slide 112

Paged Contexts Take content and flow it through as many pages as are required to display all of the content.

Slide 113

Slide 113

CSS Regions A problematic attempt to flow content through disconnected boxes.

Slide 114

Slide 114

Slide 115

Slide 115

Slide 116

Slide 116

CSS Regions IE / Edge implementation flows content from a iframe. #content { -ms-flow-into: content; } .region { -ms-flow-from: content; }

Slide 117

Slide 117

Slide 118

Slide 118

Regions needs readyprepared boxes You need to know exactly how much content you have.

Slide 119

Slide 119

Having a final “bucket” for extra content is not enough.

Slide 120

Slide 120

Slide 121

Slide 121

Dealing with overflow Because we never really know how big anything is on the web.

Slide 122

Slide 122

Web design has always involved this battle with overflow.

Slide 123

Slide 123

Slide 124

Slide 124

Slide 125

Slide 125

Slide 126

Slide 126

Slide 127

Slide 127

Perhaps Regions paved the way for something better.

Slide 128

Slide 128

Slide 129

Slide 129

Content thread and semantics fully separate from layout. Without needing to simplify the design to get there.

Slide 130

Slide 130

Fragmentation How does content break between pages, columns or regions?

Slide 131

Slide 131

figure { break-inside: avoid; } Fragmentation Breaks between and inside boxes. h1 { break-before: column; } h2, h3 { break-after: avoid; }

Slide 132

Slide 132

We create new things to solve problems

Slide 133

Slide 133

Show your problems This is how we make things better.

Slide 134

Slide 134

Slide 135

Slide 135

Slide 136

Slide 136

Slide 137

Slide 137

Why can’t I do that?

Slide 138

Slide 138

Slide 139

Slide 139

Slide 140

Slide 140

Slide 141

Slide 141

“At a W3C meeting or standards discussion, the room should not be 60–70% Googlers.” https://ferdychristant.com/the-state-of-web-browsers-f5a83a41c1cb

Slide 142

Slide 142

“At a W3C meeting or standards discussion, the room should not be 60–70% Googlers.” - Ferdy Christant https://ferdychristant.com/the-state-of-web-browsers-f5a83a41c1cb

Slide 143

Slide 143

More than ever the web needs diversity of thought.

Slide 144

Slide 144

Thank you @rachelandrew