23 CSS features you should know (and be using) by 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!