We're using container queries wrong


View this email in your browser (or share it with a friend!)

Hello Reader,

And I’m back from Smashing Conf Amsterdam, where I had an absolutely wonderful time!

Amsterdam is one of my favourite cities to visit, and Smashing knows how to put on a wonderful conference, so I had high expectations in combining the two, and it didn't disappoint 😊.

As for my talk, it went great… and what an amazing venue to speak at!

As for my talk, the main talking point was container queries.

I did my best to encourage people to break out of the habits we’ve built with media queries if we want to really take advantage of them, because usage for such a cool, well-supported feature isn't that great!

I think the main reason is that we've been using media queries for so long now and have built up habits and familiar patterns for working with them.

Container queries look similar and seem to have a similar purpose, but if we use the same approach with container queries as we do with media queries, they don't seem all that useful.

But we can create content-first breakpoints and even wrap detection in certain situations… both of which I looked at in some recent videos!

🙋‍♂️ What I’ve been up to this week the last few weeks

📺 No more magic numbers for your breakpoints

video preview

A look at how container queries let us take a content-first approach to breakpoints, rather than relying on the magic numbers in media queries.


📺 Wrap detection with a few lines of CSS

video preview

Diving into how we can use viewport units, and even container query units, with container query breakpoints to be able to detect when elements wrap.

⚡ Quick tips

And these next two are excerpts from my CSS Day talk from 2 years ago… and speaking of conferences, I’ll be back there this year again, with what is an absolutely incredible lineup.

🔗 Other awesome stuff from around the web

🏁

For those of you wondering, General Musings will be back next week, probably with two videos, as along with the regular content, I'm also working on a video/vlog of my experience speaking at Smashing 😊.

Cheers,
Kevin


If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) Hello Reader, I’m writing this from the airport, a few hours into a nine-hour layover. When I booked the flight, I knew this would be a long one, but I have a pile of work to get through, so it’s been a surprisingly productive Saturday. I normally try to avoid working on weekends, but over the last two months, it’s been more the norm than the exception. The launch of CSS Demystified, which just wrapped up, followed by my talk and...

Hello Reader, Sometimes you run into a CSS problem, and you do everything right, but still can't figure out what is going on. You don’t pile on Band-Aids. You stop and think about why it’s happening. You narrow it down to a specific question. You search for an answer. And you get nothing. This happened to one of my students a while back. They added padding to an element, and that padding covered the text of the paragraph above it. They played around with it and tried a few different things....

Hello Reader, Yesterday I told you about the mindset shift that changed everything for me, and how I started working with the browser instead of against it. I’ve spent a long time figuring out how to pass that same shift on to others, and that’s why I created CSS Demystified, which is now open for enrollment. Before I get into the details, I want to tell you why I built it the way I did. I spent five years teaching in a classroom before I moved to online education full-time. And the thing...