Over the moon for container queries

what are container queries

• Layout • Typography • Style computation • And more…

. . .

If it looks like a @media…

the problem

Eric Portis

https://vimeo.com/223432117

Eric Portis

https://vimeo.com/223432117

Braces to Pixels

https://vimeo.com/182528420

iframe

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)

modern layout

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

Jonathan Snook

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

Sara Soueidan

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

Sara Soueidan

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

Produces 3 different layouts based on .items dimensions

none fill contain s cale

down cover

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

gbcr ()

Click to change Size 100px 100px

Click to change Size 200px 200px

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

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

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

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

resize observer

Jake Archibald

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

T

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

obser ver

polyfill

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

Intersection observer

. . .

“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

Correlation != causation

The obser ver must be a descendant of the root

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

How often do you want your callback called?

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

. . .

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

. . .

Set margin

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

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

Root Bounding Rect Intersecting Rect

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

Set margin

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

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

Trigger our callback anytime the values cross these thresholds

If the current nav item isn’t completely visible

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

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

intersection

observer

to

ellipse

text

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

obser ver

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

obser ver

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

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

design changes

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

Unknown

~31ms (per truncation)

. . . LOGO

LOGO

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

. . . LOGO

. . . LOGO @media can solve this

summary

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

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

“Pretty Garbage”

Jeffrey Zeldman

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

the

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

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