Hello Reader,

Over the last couple of weeks, I’ve been surprised by how many comments I’ve gotten on YouTube asking how to decide when it’s safe to use a CSS feature, and how to handle browsers that don’t support it.

So, a quick rundown on my thought process:

1. Is it a progressive enhancement? Something like interpolate-size: allow-keywords is a great example of a time I’ll say yes. Does it really matter if something doesn’t transition to and from a height of auto? As long as it opens and closes, we’re good. (video on interpolate-size)
2. Can I provide a simple fallback? Say I want to use oklch() for a color, that won’t work in some older browsers, which can be a problem, but I can first declare it using hsl() or hex, and have the oklch() version second (that’s a bit of pain, but tools like PostCSS do that hard work for us).
3. Am I okay with a slightly different approach? I might want to put something together with grid-lanes, but currently, that’s only properly supported by Safari, so I could use @supports to make a grid or flex fallback version, since it probably needs a bit of a bigger code block (video on @supports).

And then sometimes I decide it’s not worth it and skip a feature. For example, something like @scope is cool, but the CSS inside of it won’t work unless the browser supports it, and the complexity of a fallback would be too much, so I just use a different approach and wait until it has better support for another project in the future.

A few important notes: It’s important to know your audience! I feel pretty safe shipping things that are Baseline Widely Available on my site, and even my course platform, because my audience is made up of developers who are generally on more up-to-date devices than the general public.

For some, Baseline Widely Available means nothing, and they just worry about what version of iOS a feature shipped with instead, and have a specific cutoff based on that.

Also, be careful if you’re using a lot of AI to write CSS for you. I’ve noticed that Sonnet seems to be a bit out of date with what CSS can do, to the point where it’ll suggest JS for things that have pretty well-known and supported CSS solutions, while Opus likes to use some cutting-edge stuff that doesn’t always have the best support, without warning you about it.

There are skills like Google’s Modern Web Guidance, but it’s heavily reliant on Baseline status, which, as I said, isn’t always a great cutoff, depending on your project and audience.

🙋‍♂️ What I’ve been up to this week 📺 CSS animations to bring your site to life ​ A few months ago, I looked at adding life to a landing page with GSAP. In that video, there was a section I skipped because all the animations I did there were CSS-only, and so I finally got around to exploring how I made that section. ⚡ Front-end fast money with Adam Argyle ​ A quick-fire round with Adam Argyle where the answers have to come fast. 🎙️ You can’t escape CSS architecture ​ A conversation with Michael Warren (who I’ve teamed up with to work on a design systems course) where we talk about StyleX and CSS-in-JS solutions in general, and the importance of architecture, scoping, and the balance between JS and CSS for creating maintainable and scalable stylesheets and design systems.

Have a fantastic week!
Kevin

P.S. Random question, but do you play chess online? If so, I’ve got a quick questionnaire I’d really appreciate you filling out if you have a few minutes to spare.

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