23 CSS features you should know (and be using) by now
70,050
Published 2024-05-02
Huge thanks to Adam Argyle for joining me with this one! Make sure to follow him! nerdy.dev/
- Twitter: twitter.com/argyleink
- Mastodon: front-end.social/@argyleink
π Links
:focus-visible codepen.io/argyleink/pen/YzMjmjR
:focus-within - codepen.io/kevinpowell/pen/abxaZyz & codepen.io/kevinpowell/pen/jONomrd
@media (hover) codepen.io/argyleink/pen/oNOPvbm
fit-content() - codepen.io/kevinpowell/pen/xxeaOLG
object-fit codepen.io/argyleink/pen/JjVaPrx
aspect-ratio codepen.io/argyleink/pen/OJGoLBW
accent-color - (Iβm cheating here) codepen.io/web-dot-dev/pen/PomBZdy
caret-color - codepen.io/kevinpowell/pen/abxaZGv
border-image codepen.io/t_afif/pen/vYbdVjb and www.smashingmagazine.com/2024/01/css-border-image-β¦
scroll-padding & scroll-margin: codepen.io/kevinpowell/pen/eYoLzQY
scroll-snap codepen.io/collection/KpqBGW
overscroll-behavior codepen.io/argyleink/pen/ExEwMYY
gap - codepen.io/kevinpowell/pen/mdgzyJp
columns - codepen.io/kevinpowell/pen/rNbqBPr
drop-shadow() codepen.io/argyleink/pen/RwOYbXG
matrix3d() codepen.io/argyleink/pen/ExJexZY and codepen.io/fta/pen/rNZrXp
backdrop-filter - codepen.io/kevinpowell/pen/RwOewNr
:any-link codepen.io/argyleink/pen/vYMzYxx
:empty - codepen.io/kevinpowell/pen/mdgzdBR/d0cb3478eef23d1β¦
:first-child & :last-child - codepen.io/kevinpowell/pen/PogyodO
list-style codepen.io/argyleink/pen/rNmzGzW
inset - codepen.io/kevinpowell/pen/qBwJBGN
β 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
π¬ discord.gg/nTYCvrK
Keep up to date with everything I'm up to
β www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
πΊ www.twitch.tv/kevinpowellcss
---
Help support my channel
π¨βπ Get a course: www.kevinpowell.co/courses
π Buy a shirt: teespring.com/stores/making-t...
π Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more
All Comments (21)
-
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!
-
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.
-
Adam Argyle is one of my CSS idols (together with Kevin obviously). Thank you for this video.
-
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!
-
@media (hover) just blew my mind. Thank you!
-
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 π
-
Probably the most useful CSS video I watched this year. Great great work Kevin and Adam, keep it up!
-
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!
-
Thanks guys. CSS is a mine field so these resources/references are extremely useful in the real world.
-
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.
-
You can give a horizontal and vertical value for gap separated by a space, which I have found really useful.
-
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 β€
-
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
-
Ohh the @counter-style ive never heard of or seen. Same w matrix3d. So cool. β€
-
--golden-ratio that deserves a like for sure++ ππ
-
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.
-
Love this video!!! and I appreciate the collabs you're doing with other CSS awesome peeps
-
Really nice collection of neat features that are rarely used! The hover media query is really cool for accessibility, I use it in a personal project only. I'll see how I can introduce it to my company. Text-wrap is what I'm just adding everywhere now. Caret-color was new to me, also the difference between scroll-margin and scroll-padding. And the border-image trick is also really neat, that's a property I almost never use, but this is a cool use-case!
-
Another great video ... Some great tips for inset uses ... among other useful tips ... Thanks π
-
The scroll-margin and scroll-padding are harder to understand until you think about where you want the offset to be, margin is outside of the box and padding is inside.
