We're giving away a free ticket to the CSS Layout Workshop. To be entered in the drawing, comment below with… - A question you have about CSS layout - Or a fun demo, trick, or snippet of CSS The winner will be announced on Friday, April 18! #css www.oddbird.net/workshops/ca...
Post
oddbird.netCascading LayoutsA workshop on resilient CSS layouts
I think the handiest use-cases are pretty normal, and won't surprise any audience. It's the same use-case as at-media, but anywhere in the page. @mxb.dev has an excellent demo for that: codepen.io/mxbck/pen/XW... or @ishadeed.com's ishadeed.com/article/mode...
codepen.ioContainer Query BookstoreA Container Query Drag-and-Drop Interface. Demo works only in Chrome Canary with Container Queries enabled in chrome://flags...
0 reposts2 likes
There's also a lot people can do with cq* units, like @scottkellum.com's component-responsive typography: codepen.io/miriamsuzann... But the most 😮 uses will come with style queries & scroll-state queries, which are still not cross-browser.
codepen.ioContainer UnitsThis is a demo to show the power of container units. There are just two font size declarations on this page, one for the root of the document and anoth...
@ishadeed.com has a whole article on style queries: ishadeed.com/article/css-... @nerdy.dev proposed scroll-state queries, and has written a lot about them: developer.chrome.com/blog/css-scr...
ishadeed.comCSS Style QueriesA look at CSS container style query.