|View this newsletter on the web.
First up this week, Andy Bell wrote this fantastic piece where he dives into a ton of new CSS features that we can use today:
CSS is great and getting better all the time. Over recent years, especially, it has evolved really fast, too. Understandably, some of the really handy powers CSS gives you might have slipped you by because of this, so in this article, I’m going to show you some really handy stuff you can do with modern CSS today, and also share some stuff that we can look forward to in the future.
This is a shocking post to me because there’s just so much stuff that’s been going on in the world of CSS. Here’s a quick list of new-ish features from Andy’s post (I’ve added links that dive into each of these features if you’d like more info):
That’s a lot of new features to keep up with. Most of these I have a pretty good handle on, I think, although I’m probably unaware of the coolest tricks we can pull off with
clamp. The main thing I was unaware of here was the
ex unit, which Andy describes like this:
ex unit is equal to the height of the lowercase x character — also known as the “x-height” in more traditional typography. This is really useful for working accurately and responsively with the vertical axis of your typography. One really handy use case for this is making an SVG icon the same height as your text.
All of these new abilities that have been added to the CSS language over the past year or so feel like small but important improvements. The way I tend to think of CSS is a language with these big gaps in some places—for example, layout was one of those enormous gaps until CSS Grid shipped and filled it in.
What does the future of CSS look like and where are those gaps today? Well, I think CSS needs container queries but it looks like the hard work of folks like Miriam Suzanne is starting to pay off there; container queries are on the horizon, and I think they’ll change my job as a front-end developer more than any other thing in the next couple of years.