Over the moon for container queries

A presentation at CSS Day + UX Special in June 2018 in Amsterdam, Netherlands by Greg Whitworth

Slide 1

Slide 1

Slide 2

Slide 2

what are container queries

Slide 3

Slide 3

• Layout • Typography • Style computation • And more…

Slide 4

Slide 4

. . .

Slide 5

Slide 5

. . .

Slide 6

Slide 6

. . .

Slide 7

Slide 7

. . .

Slide 8

Slide 8

Slide 9

Slide 9

. . .

Slide 10

Slide 10

. . .

Slide 11

Slide 11

. . .

Slide 12

Slide 12

. . .

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

If it looks like a @media…

Slide 19

Slide 19

the problem

Slide 20

Slide 20

Eric Portis

https://vimeo.com/223432117

Slide 21

Slide 21

Eric Portis

https://vimeo.com/223432117

Slide 22

Slide 22

Braces to Pixels

https://vimeo.com/182528420

Slide 23

Slide 23

iframe

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

iframe • Uses CSS only via @media • Content context required • Manageability • Content can’t contribute to container ’s size • Cross document access (tooling can solve this)

Slide 30

Slide 30

modern layout

Slide 31

Slide 31

I refactored a ~50 line Flexbox grid to just ~5 lines of CSS with CSS Grid. ... The best part is, we don’t need media queries!

Dave Rupert

Slide 32

Slide 32

Jonathan Snook

https://codepen.io/snookca/pen/LWabjj

Slide 33

Slide 33

Slide 34

Slide 34

Sara Soueidan

https://codepen.io/SaraSoueidan/pen/JrLdBQ

Slide 35

Slide 35

Sara Soueidan

https://codepen.io/SaraSoueidan/pen/JrLdBQ

Slide 36

Slide 36

Slide 37

Slide 37

Produces 3 different layouts based on .items dimensions

Slide 38

Slide 38

Slide 39

Slide 39

none fill contain s cale

down cover

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Modern Layout • Can solve many layout based cq use cases • Browser Suppor t • Can’t change styles • Can’t change content

Slide 44

Slide 44

gbcr ()

Slide 45

Slide 45

Click to change Size 100px 100px

Slide 46

Slide 46

Click to change Size 200px 200px

Slide 47

Slide 47

Click to change Size 200px 200px

Slide 48

Slide 48

Click to change Size 200px 200px If width > 100 change the background to green

Slide 49

Slide 49

Click to change Size 200px 200px If width > 100 change the background to green

Slide 50

Slide 50

Click to change Size 200px 200px If width > 150 change the background to green

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

https://codepen.io/gregwhitworth/pen/0e65ef17177ee881fb438f81df4086c0/

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Modern Layout • Can solve many layout based cq use cases • Browser Suppor t • Runs on ever y RAF • Needs the developer to wire up measurements in order to do cq

Slide 57

Slide 57

resize observer

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

Jake Archibald

https://www.youtube.com/watch?v=j4_9BZezSUA

Slide 63

Slide 63

Slide 64

Slide 64

Slide 65

Slide 65

Slide 66

Slide 66

T

Slide 67

Slide 67

Slide 68

Slide 68

Slide 69

Slide 69

Slide 70

Slide 70

https://www.npmjs.com/package/resize

obser ver

polyfill

Slide 71

Slide 71

resize observer • Allows any CQ scenario • Works with the platform • Only called when necessar y • Requires dimension • Only content box dimensions • Unofficial draft spec • Browser support

Slide 72

Slide 72

Intersection observer

Slide 73

Slide 73

. . .

Slide 74

Slide 74

. . .

Slide 75

Slide 75

. . .

Slide 76

Slide 76

. . .

Slide 77

Slide 77

“I suppose it’s tempting, if the only tool you have is a hammer, to treat ever ything as if it were a nail.”

Abraham Maslow https://en.wikipedia.org/wiki/Law_of_the_instrument

Slide 78

Slide 78

Slide 79

Slide 79

Correlation != causation

Slide 80

Slide 80

Slide 81

Slide 81

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

Slide 85

Slide 85

The obser ver must be a descendant of the root

Slide 86

Slide 86

Uses margin from CSS eg : “5px 10px 10px 5px”

Slide 87

Slide 87

How often do you want your callback called?

Slide 88

Slide 88

https://codepen.io/gregwhitworth/pen/1ed7e30ff728619af1a3f5f6031f12ab

Slide 89

Slide 89

. . .

Slide 90

Slide 90

. . . When the cow thinks that they have gone over the moon – give them a shocked face

Slide 91

Slide 91

. . .

Slide 92

Slide 92

Set margin

bottom as to only be 10% of the height of the container

Slide 93

Slide 93

Slide 94

Slide 94

Slide 95

Slide 95

Slide 96

Slide 96

https://codepen.io/gregwhitworth/pen/89038f9b73894a4c8ba5870c109b02db

Slide 97

Slide 97

Slide 98

Slide 98

Root Bounding Rect Intersecting Rect

Slide 99

Slide 99

https://codepen.io/gregwhitworth/pen/29b091d558d96200039ee9d479256d31

Slide 100

Slide 100

Set margin

right as ~width of […] menu button so that it doesn’t occlude menu items

Slide 101

Slide 101

Use gcs () or custom properties
to make this more dynamic

Slide 102

Slide 102

Trigger our callback anytime the values cross these thresholds

Slide 103

Slide 103

Slide 104

Slide 104

If the current nav item isn’t completely visible

Slide 105

Slide 105

Slide 106

Slide 106

Slide 107

Slide 107

Slide 108

Slide 108

Slide 109

Slide 109

https://codepen.io/gregwhitworth/pen/fef3e9f4954d2f1aaf7f0fbb7e708095

Slide 110

Slide 110

https://codepen.io/gregwhitworth/pen/fef3e9f4954d2f1aaf7f0fbb7e708095

Slide 111

Slide 111

https://codepen.io/gregwhitworth/post/using

intersection

observer

to

ellipse

text

Slide 112

Slide 112

Slide 113

Slide 113

https://www.npmjs.com/package/intersection

obser ver

Slide 114

Slide 114

https://www.npmjs.com/package/intersection

obser ver

Slide 115

Slide 115

intersection observer • Allows for firing only when necessar y (no dimensions needed) • Browser support • Can change content or styles • Different mental model

Slide 116

Slide 116

design changes design changes design changes design changes design changes design changes design changes design changes design changes design changes design changes design changes design changes design changes design changes

Slide 117

Slide 117

design changes

Slide 118

Slide 118

“ The most performant code is the code that isn’t written…”

Unknown

Slide 119

Slide 119

Slide 120

Slide 120

Slide 121

Slide 121

~31ms (per truncation)

Slide 122

Slide 122

Slide 123

Slide 123

. . . LOGO

Slide 124

Slide 124

LOGO

Slide 125

Slide 125

LOGO

Slide 126

Slide 126

. . . LOGO The nav area is never greater that 100vw

Slide 127

Slide 127

. . . LOGO

Slide 128

Slide 128

. . . LOGO @media can solve this

Slide 129

Slide 129

summary

Slide 130

Slide 130

Slide 131

Slide 131

Slide 132

Slide 132

Slide 133

Slide 133

Slide 134

Slide 134

Slide 135

Slide 135

Slide 136

Slide 136

Slide 137

Slide 137

Slide 138

Slide 138

Slide 139

Slide 139

Slide 140

Slide 140

Slide 141

Slide 141

Slide 142

Slide 142

Slide 143

Slide 143

Slide 144

Slide 144

Slide 145

Slide 145

Slide 146

Slide 146

Slide 147

Slide 147

Does answering the quer y, using any method, improve the user ’s experience?

Slide 148

Slide 148

Ever y UI/UX paradigm MUST prove its value in milliseconds

Slide 149

Slide 149

“Pretty Garbage”

Jeffrey Zeldman

Slide 150

Slide 150

Demos/Deck via Notist : https://aka.ms/over

the

moon Thank you: Emily Griffin @ emilywithcurls for illustration of Madeline the cow

Slide 151

Slide 151

@ gregwhitworth – Send me your container quer y creations on CodePen so I can add them to the collection!