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!
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-discreteinterpolate-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.
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)
HTML & CSS for Absolute Beginners
A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.
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 →
|
|
Intermediate (Frontend Masters)
Build a Modern Site from Scratch
Build a fully responsive site using modern CSS features, along with some polished animations.
Enroll → (25% off first month of Frontend Masters if you use this affiliate link)
|
|