MENU

Fun & Interesting

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

Kevin Powell 90,416 lượt xem 1 year ago
Video Not Working? Fix It Now

Links to all the demos we used are below 👇

Huge thanks to Adam Argyle for joining me with this one! Make sure to follow him! https://nerdy.dev/
- Twitter: https://twitter.com/argyleink
- Mastodon: https://front-end.social/@argyleink

🔗 Links
:focus-visible https://codepen.io/argyleink/pen/YzMjmjR
:focus-within - https://codepen.io/kevinpowell/pen/abxaZyz & https://codepen.io/kevinpowell/pen/jONomrd
@media (hover) https://codepen.io/argyleink/pen/oNOPvbm
fit-content() - https://codepen.io/kevinpowell/pen/xxeaOLG
object-fit https://codepen.io/argyleink/pen/JjVaPrx
aspect-ratio https://codepen.io/argyleink/pen/OJGoLBW
accent-color - (I’m cheating here) https://codepen.io/web-dot-dev/pen/PomBZdy
caret-color - https://codepen.io/kevinpowell/pen/abxaZGv
border-image https://codepen.io/t_afif/pen/vYbdVjb and https://www.smashingmagazine.com/2024/01/css-border-image-property/
scroll-padding & scroll-margin: https://codepen.io/kevinpowell/pen/eYoLzQY
scroll-snap https://codepen.io/collection/KpqBGW
overscroll-behavior https://codepen.io/argyleink/pen/ExEwMYY
gap - https://codepen.io/kevinpowell/pen/mdgzyJp
columns - https://codepen.io/kevinpowell/pen/rNbqBPr
drop-shadow() https://codepen.io/argyleink/pen/RwOYbXG
matrix3d() https://codepen.io/argyleink/pen/ExJexZY and https://codepen.io/fta/pen/rNZrXp
backdrop-filter - https://codepen.io/kevinpowell/pen/RwOewNr
:any-link https://codepen.io/argyleink/pen/vYMzYxx
:empty - https://codepen.io/kevinpowell/pen/mdgzdBR/d0cb3478eef23d16643143cc112fa01e
:first-child & :last-child - https://codepen.io/kevinpowell/pen/PogyodO
list-style https://codepen.io/argyleink/pen/rNmzGzW
inset - https://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
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell

---

My editor: VS Code - https://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: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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 awesome!

Comment