The Post-Developer Era & New CSS Feature Updates


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

Hello Reader,

I was going to bury this part lower down, but I think the topic of AI and it’s impact on development is very front-of-mind these days, so I’ve kept it up here at the top.

Josh Comeau recently put out an article titled The Post-Developer Era.

A listener on my second channel asked for more content where I share my thoughts on articles and news, and Josh's piece seemed like the perfect opportunity to try this approach!

video preview

And if you prefer, you can also give it a listen on Spotify or Apple podcasts.


And as for what I was originally going to open this newsletter with… I’m super lucky in that my job is essentially to play around with CSS all day long.

It's a bit of a double-edged sword, though, because I often get excited by new features, and then I can’t use them outside of silly little demos because browser support isn’t good enough.

Of course, you probably watch some of my videos or follow other “CSS people” and get excited by what we’re talking about, only to realize that the feature isn’t ready for prime time yet, and feel equally disappointed 😂.

Some features are great as a progressive enhancement, and I’ll use them as soon as possible.

Animations are a nice area where you can get away with progressive enhancements a lot of the time, so things I’m pretty happy to use these without worrying too much about browser support:

  • View transitions
  • transition-behavior: allow-discrete
  • interpolate-size: allow-keywords

However, so many new features will just break things if they aren’t supported.

In those cases, we can use @supports, and create a fallback for browsers that don’t support the feature.

This can work well, but it does mean we need two solutions.

I don’t mind doing this, but if you’ve got a deadline, that’s not always an option, so most of the time, it just means saying, “I guess I’ll wait until support improves before I start using it.”

And then, of course, two years pass and you completely forget that feature even exists.

This happened to me recently when I found out that alt text for CSS-generated content is now supported in all the browsers, when I didn’t even realize anyone supported it!

Thankfully, we have Baseline, which tracks where support is at, but the problem is we need to look up the features to know where they stand.

So, I decided to start a new series on YouTube, where I’ll look at new features coming to CSS, but also talk about when features hit Baseline Newly Available and Baseline Widely Supported.

video preview

If you haven’t heard of those terms before:

  • Newly Available are features that are supported by all three browser engines.
  • Widely Supported means that feature has 30+ months of support in all three engines.

That might not be good enough to use in production yet, that depends a lot on your audience, and how aggressive you want to be, but they are pretty nice lines in the sand.

I figure putting out a quarterly video on this is a good excuse for me to keep better tabs on where things stand, and a fun way to share it with everyone else as well 😊.

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

I already shared a few things I was up to this week, but I did have a few quick tips this week too.

⚡ Quick tips of the week

🔗 Other awesome stuff around from the web

🏁

Happy Easter to all those celebrating!
Kevin


Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

Conquering Responsive Layout

A free course to help you approach responsive layouts with the right mindset.

Enroll →

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

Enroll →

Advanced

Beyond CSS

An advanced course that dives into project architecture, theming, design systems, and more.

Enroll →

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

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

CSS Hell

View this email in your browser (or share it with a friend!) Very quickly, before we get into the topics of this week's newsletter, the State of Devs survey is going to be closing shortly. The survey is for devs, but asks about who we are, rather than what we know. As with all the "State of..." surveys, the more people who take it, the more representative the results are, so if you have a few minutes, it'd be great if you could take the time to take it. Hello Reader, So, Figma had a big event...

View this email in your browser (or share it with a friend!) Hello Reader, Have you ever found yourself staring at some CSS that you were sure should work, but it wasn’t doing what you wanted? If so, welcome to the club 😂. These days, for me, it’s less about not understanding a specific behavior and more about making dumb mistakes, but there are times when it still catches me off guard as well. At this stage, most of the time I can reason my way out of the problem I’m facing, but with years...