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, The pattern of shorter newsletters continues for me, as I continue my prep for CSS Day. I’m writing this on Thursday morning (my normal newsletter writing time), and yesterday, as I was rehearsing my talk, I realized I had a pretty big oversight in my talk, so I spent the rest of the day reshuffling things and updating the demos I’m using. It all means it’ll be a stronger talk, but I’ll be on the plane to the...

View this email in your browser (or share it with a friend!) PRE-S: A quick reminder that the State of CSS survey is currently open. The browser vendors all pay a lot of attention to the results of these “State of” surveys, and the more people who take them, the more representative the results are… plus they are a great way to learn about features you didn’t know about! Hello Reader, A bit of a short newsletter this week, as I've been focusing on getting some content created and working on my...

View this email in your browser (or share it with a friend!) Hello Reader, More and more people I deeply respect and have learned a lot from over the years feel like they are speaking into a void, to the point where they are losing motivation to continue making content. And I know it’s not only people making content, either. While some people are embracing the changes, many feel things have changed and that their jobs are no longer what they signed up for, leading them to lose the passion for...