Hello Reader,
Before we get to the content this week... thanks to Bill, I've just realized I missed sending out last week's newsletter, even though I wrote it! In it, I'd originally talked about the new name for masonry, which is display: grid-lanes. I've included the video where I talk about it in more detail down below.
And speaking of masonry, it brings up what I wanted to talk about this week, which is how the term Modern CSS is a little bit of a funny one, because in a way, there are different categories of it.
For the workshop that I’m currently working on, it’s mostly about things that have been around for two to five years now, which doesn’t really seem all that modern when you think about it! But of course, that 3+ year range means that features are now safe to use, so in a way, they’re modern in that we can finally use them in production.
But it seems strange to talk about things like regular container queries and subgrid as Modern CSS when we have things like container style queries, the attr() function, if statements, and so much more these days!
Maybe "modern" is a better term for what we can do today, and "cutting-edge" is more what is on the way, or that can be used as a progressive enhancement or with a polyfill for the time being.
I can’t complain, though, as the browsers have got much better at shipping most features within a few months of one another (in general, there are always exceptions… looking at you with style queries right now Firefox…), so things do tend to become more usable (and less buggy) than was the case not all that long ago.
And of course, it’s pretty exciting seeing some of these new things coming, because I think there are several that are going to reshape how we write CSS. Some people don’t like that growing complexity of CSS, but in many ways, it’s actually a simplification of how we’ve traditionally done things, with a shift from JS to CSS.
I talk a lot more about this in my podcast episode this week, which is down a bit further if you want more of my opinion on all of it 🙂.
👋 What I've been up to this week the last two weeks
How to use Web Components, and why you’d want to
 After seeing my recent video on creating the Frontend Mentor forms, Michael Warren reached out, saying the form groups would be a great web component, so we’ve recorded two videos exploring them!
This is part one, where we look at what a web component is and how to use one, and in part two next week, we’ll explore creating it.
You can also get the source code for the web component here if you want to check it out or use it.
The magic of auto-fit and auto-fill (and the difference between them)
 Grid’s auto-fit and auto-fill are super useful, and while the declaration is pretty long, and can seem complicated, it’s not so bad once you break it down.
In the video, I compare auto-fit vs. auto-fill. Here’s the CodePen of that demo, if you’d like to play around with it.
Also, I know a lot of people find Grid a little hard to get started with. If that’s the case for you, I have looked at the simple way to get started with Grid a little while back as well.
|
CSS Masonry’s New Identity
 |
A bit of a deep dive on how they ended up with grid-lanes.
|
|
|
⚡ Better CSS gradients with this quick fix
 A quick look at how we can change the color space that the browser uses for interpolating the colors in a gradient, and how it can make gradients look a lot nicer.
⚡ This CSS Trick auto-styles your download links
 This is a quick tip taken from last week’s longform video on attribute selectors. In the comments of that one, some people pointed out that there are exceptions to when this would work, which is true, but I still think it’s pretty handy.
|
|
|
🎙️ Podcast
Modern CSS quick hits
A bit of a quick hits, mixed bad this week, where I talk a little about masonry again, as well as random(), animation-composition: accumulate, and modern CSS in general, as well as picking up from a previous episode where I talked about progress, this time remembering that it’s often non-linear.
LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS
|
|
📝 Quiz time!
Which of these would create a full rainbow gradient using only two color stops?
linear-gradient(in hsl longer hue, red, red);linear-gradient(in hsl longest hue, red, red);linear-gradient(in hsl shorter hue, red, red);linear-gradient(in hsl shortest hue, red, red);
As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.
|
|
🔗 Other awesome stuff from around the web
|
🏁
In case you missed the email from earlier this week, this year I’m doing my first-ever Black Friday sale!
I’ll send out more details on Tuesday when the sale goes live, but I wanted to give you a heads up now in case you’ve been thinking about grabbing one.
Have a fantastic week!
Kevin
P.S. If you'd like, you can opt out of the Black Friday emails I'll be sending. You'll still get this newsletter. if you do.
