23 CSS features you should know (and be using) by now

Links to all the demos we used are below 👇

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:49 - :focus-visible
01:34 - :focus-within
02:41 - hover media query
03:46 - fit-content()
05:06 - object-fit
05:53 - aspect-ratio
07:17 - accent-color
08:22 - caret-color
09:12 - border-image
10:49 - scroll-padding
11:58 - scroll-margin
13:12 - scroll-snap
15:08 - overscroll-behavior
16:36 - gap
18:26 - columns
20:08 - bonus: text-wrap pretty and balanced
20:59 - drop-shadow()
21:31 - matrix-3d()
22:52 - backdrop-filter
24:12 - :any-link
25:00 - :empty
26:28 - :last-child and :last-of-type
27:50 - custom list-style-types
28:35 - inset

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[astrit]

This is wonderful, this is what the front=end developer community needs, so so good to see you both creating this type of content, really appreciate it.
I have made so many good example with the focus state is actually just incredible what can be done these days and a pity that not many people know or apply these styles!

[pkn]

Adam Argyle is one of my CSS idols (together with Kevin obviously). Thank you for this video.

[SerenityForschen]

I literally watch these and then add some of this to my preferred base code. As a deisgner/ front end dev person I really love that you get instant gratification with CSS code changes = visible difference. Anyway just added scroll-margin to my portfolio site. Most of these other tricks I picked up from your previous videos but love the collabe of two people showing how things work with different words. Thanks!

[TheRalic]

Can not tell how many times I came back to this video... thank you for an amazing explanation! 🧡

[soganox]

@media (hover) just blew my mind. Thank you!

[LouiseJosephine]

Thank you! The more CSS I learn, the more properties I realise i still don't know! Most classes I take go over the same basics. I love seeing professionals share these newer properties or more intermediate/advanced techniques and their uses 😊

[francescos]

Probably the most useful CSS video I watched this year. Great great work Kevin and Adam, keep it up!

[railroadandindustrialsky-wvns]

Outstanding video guys. I’m constantly coming back to this video. I just finished a huge project for a Midwest company and used many of the methods and ideas listed here. Keep them coming. Great work.

[isaacewing]

--golden-ratio that deserves a like for sure++ 😀😀

[outpost]

Thanks guys. CSS is a mine field so these resources/references are extremely useful in the real world.

[MrBrady]

Lol, wow! I never thought I'd see this on the web ... @20:13 take care of "orphans" with text-wrap: pretty; I'm guessing it works for their counterpart, "widows" as well. Going to have to re-look at columns, but all of these tips are awesome! Super-like on this video, thanks!

[MaxWeir]

Was hoping to see Adam and thanks for having him on the show!
Would've liked to have seen more of a discussion (more use cases, best practices, do's/dont's, performance etc) on the CSS properties a bit more as felt he was more watching/listening to you the majority of the time.

I've seen many of his talks and he knows quite a bit so would've been nice to hear him talk a bit more.

[DarrenbyDesign]

Love this video!!! and I appreciate the collabs you're doing with other CSS awesome peeps

[itsPenguinBoy]

You can give a horizontal and vertical value for gap separated by a space, which I have found really useful.

[einatblackrose]

Awesome video! Thank you for this, you really opened my eyes to some useful stuff I didn't know. And always great to see Adam featured in the videos. Keep it up ❤

[mrgerund]

amazing video, i outright used the filter for the drop shadow and wished i knew some of these earlier as well, would love to see more in the future

[skeui]

Loved it. Expecting more of you two legends.

[clevermissfox]

Ohh the @counter-style ive never heard of or seen. Same w matrix3d. So cool. ❤

[ClarkeDesign]

More of this please - really good to visit the lesser known CSS, but older things we all may have forgotten about or how to use.

[paulwdoyle]

Another great video ... Some great tips for inset uses ... among other useful tips ... Thanks 🙂