A presentation at CSS Day + UX Special in in Amsterdam, Netherlands by Greg Whitworth
what are container queries
• Layout • Typography • Style computation • And more…
. . .
. . .
. . .
. . .
. . .
. . .
. . .
. . .
If it looks like a @media…
the problem
https://vimeo.com/223432117
https://vimeo.com/223432117
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
Dave Rupert
https://codepen.io/snookca/pen/LWabjj
https://codepen.io/SaraSoueidan/pen/JrLdBQ
https://codepen.io/SaraSoueidan/pen/JrLdBQ
Produces 3 different layouts based on .items dimensions
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
Click to change Size 200px 200px If width > 100 change the background to green
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
https://www.youtube.com/watch?v=j4_9BZezSUA
T
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
. . .
. . .
. . .
. . .
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
. . .
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
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/pen/fef3e9f4954d2f1aaf7f0fbb7e708095
text
obser ver
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
Unknown
~31ms (per truncation)
. . . LOGO
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
Jeffrey Zeldman
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!
Container queries (a.k.a. element queries) are a concept that behave like CSS media queries, but rather than only changing styles based on the conditions of the viewport; allow them to change based on the size of the container. The request for container queries from web developers and designers seems to be everywhere. Why then, for something that is so commonly requested, not being solved? Or isn't it…? In this talk we'll explore the problem space that CSS based container queries creates for browsers due to the architecture of the pipeline. More importantly, we'll utilize some newer JS APIs and clever CSS techniques to solve container query use cases - because is it really the width that we want to trigger the query on?
The following resources were mentioned during the presentation or are useful additional information.
A collection of all of my demos used in this talk
When is it the right time to use certain container query methodologies - use this handy flow chart to narrow it down.
A collection of various use cases with different methodologies of solving the container query solution. If you have a new one, please contact me to add it to the collection!
This uses intersectionObserver to trigger the animations.
Greg Whitworth helps you understand what the browser does with your CSS to render them to the screen.
