Conditional border-radius and three future CSS features

Stefan Judis has reworked Ahmad Shadeed‘s Conditional border-radius, using these three (future) CSS additions: Media query ranges Container Queries CSS @when + @else Unlike the original code, the result definitely is a very nice and readable piece of code that doesn’t feel hacky at all — I like where CSS is headed 😊 Conditional border-radius …

W3C TPAC 2021: CSS WG Updates

At (the ongoing) TPAC 2021 — the W3C Annual Conference — the CSS Working Group provided two video updates that summarize some of the ongoing work they’ve been doing. Perfect way to get up to speed in less than 10 minutes Improving CSS Architecture with Cascade Layers, Container Queries, Scope In this video Miriam Suzanne …

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 …

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, …

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, …

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: …