Hello Reader,

One big problem with features like Grid and Flexbox (and maybe soon Masonry) is that we can move elements around.

This might sound like a feature, but in reality, it can cause many issues because even something as simple as flex-direction: row reverse can muck with tab order.

There are times where it can potentially be a good idea to re-order things with CSS (say, when you want an image above a title of a card, but in the HTML it makes more sense for the image to come after the heading), but it’s one of those things that’s always been a bit like playing with fire.

That’s why the reading-flow and reading-order properties might be one of the most important features to come to CSS in quite some time.

They’re coming with Chrome 137, and are a way to help us deal with the potential disconnect between source and visual order when we use Flex and Grid.

One of the reasons they’re putting it in the browser (Chrome 137 is in beta right now) is so that people can play with it, and Rachel Andrew is asking us to try this out to help find any bugs, issues, and edge cases.

If you’d like to learn more about how it works, I think I will do a quick live stream on it sometime next week (not sure what day yet), but if you can’t wait until then, Chris Coyier has a nice primer on it.

🙋‍♂️ What I’ve been up to this week

I challenged the Syntax crew to a CSS Battle

​

I always enjoy a CSS Battle collab, and this was the first time I wasn’t taking on only one person, but all three of the Syntax crew!

And they challenged me!

​

Doing it in just one place wasn’t enough, so we did two battles! This one is over on their channel, where we aimed for a low score rather than just as fast as possible.

Content-first breakpoints

​

A look at how I pick breakpoints when working with media queries and container queries.

⚡ HTML & CSS Tip of the Week

(YouTube Shorts will be back next week)

This week is a quick look at the :not-in-range psuedo-class.

🎙️ Podcast Flexbox is NOT easier than Grid A little bit of a rant from me this week, as I got frustrated writing some lessons and had to step outside for a bit 😆 ​ LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB​

​

🔗 Other awesome stuff around from the web

• ​Blob shape with hover effect​
• ​The Future of CSS: Construct and values with ident() - And if you’re curious about how you can get ideas/proposals raised within the CSS Working Group, check out the full thread here where Bramus shares some light on that as well.
• ​IMB surveyed 2000 CEOs about their companies use and investments in AI, with 50% reporting in how it “resulted in disconnected technology within their organization”, and “only 25% of AI initiatives have delivered expected ROI over the last few years, and only 16% have scaled enterprise wide”…

🏁

Quick reminder (or for those who didn’t read last week’s newsletter), I’ll be in New York City on June 24th for an in-person workshop, hosted by Smashing Conference.

My workshop is titled The New CSS Toolkit, where we’ll be exploring modern CSS techniques that help you write cleaner, more flexible, and more robust styles.

There will be a focus on what’s practical and useful today, with some looks at some exciting features to keep on eye on as well.

If you’re interested, you can get more details or register for it here.

Have a fantastic week!
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.
113 Cherry St #92768, Seattle, WA 98104-2205