Making Things Better @rachelandrew #aeadc
Slide 1
Slide 2
Redefining the technical possibilities of CSS
Slide 3
“Tableless web design” The move from tables to CSS for layout meant simplifying our designs.
Slide 4
Slide 5
What we see as good web design is rooted in the technical limitations of CSS2
Slide 6
How we see the web is still informed by those early days.
Slide 7
“The web is not print”
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
We have solved many of those problems That doesn’t mean we got all of them!
Slide 10
You never know how tall anything is on the web.
Slide 11
Slide 12
Slide 13
Slide 14
We hacked round the problem
Slide 15
stretch Default value of align-items. .container { display: flex; }
Slide 16
The default behaviour of these methods is the thing we struggled with for so long.
Slide 17
How big is this box?
Slide 18
Slide 19
Graduating To Grid https://aneventapart.com/news/post/graduating-to-grid-by-rachel-andrew-aea-video
Slide 20
<length-percentage> Our previous layout systems rely on everything having a length, or a percentage which resolves to a length.
Slide 21
“Flexbox is weird!” - People on the internet.
Slide 22
Flexbox isn’t the layout method you think it is.
Slide 23
Flexbox I have a bunch of different sized things to lay out.
Slide 24
Slide 25
Not everything requires a CSS hack. CSS may have solved your problem.
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
CSS tries to avoid data loss In CSS terms that would mean making some content vanish.
Slide 28
Safe & Unsafe alignment Giving you the choice about prioritizing alignment over potentially vanishing content.
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
safe Tells the browser to align start if data loss would occur.
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
unsafe I want my specified alignment even if it causes data loss.
Slide 33
Overflow happens
Slide 34
Overflow Choose your solution
Slide 35
min-content & max-content Solving the “content honking out of the box” problem.
Slide 36
min-content A box that is wide enough for the content, but not wider. .awesome { width: min-content; }
Slide 37
min-content A box that is wide enough for the content, but not wider.
Slide 38
max-content A box that is as big as the content can be. .awesome { width: max-content; }
Slide 39
max-content A box that is as big as the content can be.
Slide 40
break-word Breaking words, making the box taller not wider. .awesome { overflow-wrap: break-word; }
Slide 41
break-word Breaking words, making the box taller not wider.
Slide 42
Choices! Choose your solution
Slide 43
vertical CSS being awesome in another dimension
Slide 44
The web is not left to right
Slide 45
Flexbox & Grid Take an agnostic approach to the writing mode of the document.
Slide 46
grid-area All four lines at once .item { grid-area: 1 1 4 2; }
Slide 47
Floats, positioning, margins, borders, padding All defined using physical terms – top, left, bottom, right
Slide 48
Logical Properties & Values https://www.w3.org/TR/css-logical-1/
Slide 49
width
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
width
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
inline-size
Slide 54
inline-size Be awesome in both dimensions without changing the code. .awesome { inline-size: min-content; }
Slide 55
Slide 56
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
There is no fold Drew McLellan @media 2007
Slide 59
We know where the fold is
Slide 60
Viewport Units Representing the height and width of the current viewport
Slide 61
100vw 100% of the viewport width
Slide 62
100vh 100% of the viewport height
Slide 63
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 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
Paged vs Continuous Media
Slide 68
Grid & Subgrid What next for Grid Layout?
Slide 69
Slide 70
Slide 71
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 74
You never know how tall anything is on the web.
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 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 79
display: contents Remove a box from the visual display allowing grandchildren to act like direct children. ul { display: contents; }
Slide 80
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 83
Slide 84
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
.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 88
Subgrid Level two of the Grid spec. In Firefox Nightly.
Slide 89
Subgrid in Chrome? Star this: https://bugs.chromium.org/p/chromium/issues/detail?id=618969
Slide 90
Slide 91
You will hit problems. Find new technical limitations.
Slide 92
We just can’t do that yet.
Slide 93
We get the new stuff when we create it.
Slide 94
Finding the edges
Slide 95
Slide 96
Slide 97
Slide 98
You don’t know how tall things are on the web
Slide 99
Overflow and Multicol
Slide 100
Slide 101
Slide 102
Slide 103
Overflow in the Block Dimension Something for Multiple-column Layout level 2?
Slide 104
Slide 105
Slide 106
Paged Media CSS – not just for web browsers.
Slide 107
Slide 108
Slide 109
Pages have defined size All defined in CSS. @page { size: 5.5in 8.5in; margin: 70pt 60pt 70pt; }
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 112
Paged Contexts Take content and flow it through as many pages as are required to display all of the content.
Slide 113
CSS Regions A problematic attempt to flow content through disconnected boxes.
Slide 114
Slide 115
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 118
Regions needs readyprepared boxes You need to know exactly how much content you have.
Slide 119
Having a final “bucket” for extra content is not enough.
Slide 120
Slide 121
Dealing with overflow Because we never really know how big anything is on the web.
Slide 122
Web design has always involved this battle with overflow.
Slide 123
Slide 124
Slide 125
Slide 126
Slide 127
Perhaps Regions paved the way for something better.
Slide 128
Slide 129
Content thread and semantics fully separate from layout. Without needing to simplify the design to get there.
Slide 130
Fragmentation How does content break between pages, columns or regions?
Slide 131
figure { break-inside: avoid; } Fragmentation Breaks between and inside boxes. h1 { break-before: column; } h2, h3 { break-after: avoid; }
Slide 132
We create new things to solve problems
Slide 133
Show your problems This is how we make things better.
Slide 134
Slide 135
Slide 136
Slide 137
Why can’t I do that?
Slide 138
Slide 139
Slide 140
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
“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
More than ever the web needs diversity of thought.
Slide 144
Thank you @rachelandrew
