Tag Archives: container queries

Media Queries in Times of Container Queries

Max Böck: With container queries now on the horizon – will we need media queries at all? Is there a future where we build responsive interfaces completely without them? As Max details we will still need both, but will see a shift from some Media Queries to Container Queries. Good read; I found myself nodding …

Continue reading “Media Queries in Times of Container Queries”

The new responsive: Web design in a component-driven world

In this session from Google I/O 2021, Una Kravets talks about “the new responsive”, short for being responsive to the user, container, and form-factor (text-version available via link below): The web community is entering into a new era of responsive design and shifting our perspectives on what it means. With user preference queries, container queries, …

Continue reading “The new responsive: Web design in a component-driven world”

Container Queries are Actually Coming / Say Hello To CSS Container Queries

In addition to my first look + demo at Container Queries, both Andy Bell and Ahmad Shadeed have also published posts covering them. Ahmad starts off with explaining the idea behind them, before digging into a ton of use-cases. I especially like the pagination use-case, something I hadn’t thought of yet myself. In his post, …

Continue reading “Container Queries are Actually Coming / Say Hello To CSS Container Queries”

The Raven Technique: One Step Closer to Container Queries

Building further upon The Holy Albatross technique, comes The Raven Technique by Mathias Hülsbusch: I want to get closer to actual container queries! So, what does CSS have offer that I could tap into? I have a mathematical background, so functions like calc(), min(), max() and clamp() are things I like and understand. Next step: …

Continue reading “The Raven Technique: One Step Closer to Container Queries”

Container Queries with the <watched-box> Custom Element

Heydon Pickering has created <watched-box>: I wanted a simple, declarative container queries solution, and here it is: ❤ Custom Element + ResizeObserver 🥣 Use and mix together any CSS length units 🖼 Orientation supported 🧚‍♀️ ≅1.5KB minified Once imported you can use it as follows: <watched-box widthBreaks="70ch, 900px" heightBreaks="50vh, 60em"> <!– HTML and text stuff …

Continue reading “Container Queries with the <watched-box> Custom Element”