Hello Reader,
It’s taken a really long time to get to this point, but animating to and from height: auto and other intrinsic sizes is coming to CSS, thanks to the new calc-size() function.
Wes Bos has a quick look at in this Short, and as he mentions in this video, it’s even going to allow for calculations on top of just going to auto or one of the other intrinsic sizes!
Someone on Twitter asked why we need this, when there is a way to do it right now using Grid, as I explored in this video.
The trick I showed in that video is only a hack, though, and, from what I’ve been told, it shouldn’t even work, but it does, and, for now, we can use that.
That type of hacky solution harks back a lot to the old days of the web, when most of what we did was a hack!
I wish I was joking, but creating layouts using floats (and tables) was totally not the indended purpose of them.
Then, of course, we had things like creating aspect ratios using padding and even using strange CSS combinators to target specific browsers, among a lot of other crazy things we used to have to do.
The constraints we used to work with and the creativity to work around those constraints have always been a part of creating websites that I’ve found really interesting.
There is a downside to hacky solutions, though: People learn to live with those limitations.
When new features drop, they are not only easier to use, but often they also open up new possibilities!
People are used to doing what they’ve always done, so they simply adopt the easier way of doing things while still working as if there are strict limitations on what they can do.
For example, when we went from floats to making layouts with Flexbox, everything was taking the exact same patterns and creating them with Flexbox instead.
I understand why this happens, of course!
It’s much easier to take something we're familiar with and recreate it than it is to think up a totally new way to work!
I’m just as guilty as everyone else here, but when we get new ways of doing things, play with them a little bit and try not to be limited by what the old ways could do, and see if you can’t find some new hacks using the new possibilities that the new feature introduces 😅.
🙋♂️ What I’ve been up to this week
Design to Code / Frontend Mentor challenge
It’s been a while since I did one of these Frontend Mentor builds, and it gave me a chance to talk a bit about easy ways to provide some user feedback while they are filling out a form, before they hit the submit button, using some fun CSS tips 🙂.
A quick trick to boost specificity
I wouldn’t suggest this if you can avoid it, but you can chain the same class (or ID) selector together multiple times to boost specificity.
If you can avoid this, you probably should, but I’ve seen it come in handy with bad WordPress themes and other things, where you need to overwrite something, while also not using !important because that would make the selector too strong and cause other issues.
🔗 Other awesome stuff around from the web
Dungeons & Dragons taught me how to write alt text
This is a wonderful article by Eric Baily that is both fun to read, and will help you write better alt text yourself.
An Interactive Guide to CSS Container Queries
and Ahmad Shadeed has created another of his fantastic interactive guides, this time exploring container queries.
Container queries are fantastic, and their support levels are reaching the point where people should be starting to consider using them in production.
There is a little bit more to container queries than there are media queries, and knowing how they’re different, and some of the common pitfalls of them is important, or else you can get frustrated when they don’t work the way you expect them to.
🏁 </newsletter>
I’m going to be doing a livestream this week!
I’ll be doing some challenges from iCodeThis, and, as usually happens during my live streams, I’ll probably do an AMA at one point as well 🙂.
I’ve also been having some “interesting” discussions with anti-grid people lately, so I’m going to carve out some time for a bit of a rant on that front as well 😁.
It’ll be on Wednesday at 11am ET.
You can see what that is in your local time here, and also set a reminder there at the same time.
Hope to see you there,
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 →
|
|