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

Kevin Powell • May 2, 2024
Video Thumbnail

About

No channel description available.

Video Description

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!

Essential Travel Camera Gear

AI-recommended products based on this video

Loading...
NEEWER a6700 L Plate Compatible with Sony Alpha 6700, Quick Switch Aluminum Extendable Side Plate & Anti Twist Baseplate Compatible with Arca Swiss QR System DJI RS 2 RSC 2 RS 3 Pro Gimbals, CA048

NEEWER a6700 L Plate Compatible with Sony Alpha 6700, Quick Switch Aluminum Extendable Side Plate & Anti Twist Baseplate Compatible with Arca Swiss QR System DJI RS 2 RSC 2 RS 3 Pro Gimbals, CA048

(24)
$25.99
FREE delivery Thu, Jun 19 on your first order
Loading...
SmallRig ZV-E10 II Base Plate for Sony Alpha ZV-E10 II, Bottom Mount Plate with Quick-Release Plate for Arca, QD Socket, Hand Strap Hole, 1/4"-20 Threaded Hole - 4950

SmallRig ZV-E10 II Base Plate for Sony Alpha ZV-E10 II, Bottom Mount Plate with Quick-Release Plate for Arca, QD Socket, Hand Strap Hole, 1/4"-20 Threaded Hole - 4950

(13)
$37.99
FREE delivery Sat, Jun 21
Loading...
SmallRig Baseplate for Sony Alpha 6700, Bottom Mount Plate Built-in Quick Release Plate for Arca, Supporting Quick Switch Between Tripod and Stabilizer (for DJI RS 2 / RSC 2 / RS 3 / RS 3 Pro) - 4338

SmallRig Baseplate for Sony Alpha 6700, Bottom Mount Plate Built-in Quick Release Plate for Arca, Supporting Quick Switch Between Tripod and Stabilizer (for DJI RS 2 / RSC 2 / RS 3 / RS 3 Pro) - 4338

(85)
$38.24
FREE delivery Thu, Jun 19
Loading...
NEEWER Advanced 18 inch LED Ring Light for Phone, LCD Touch Screen, 2.4G Remote Lights Control, 3200-5600K, Tripod Light for iPhone Action Camera, for Studio Makeup TikTok YouTube Video Salon (Black)

NEEWER Advanced 18 inch LED Ring Light for Phone, LCD Touch Screen, 2.4G Remote Lights Control, 3200-5600K, Tripod Light for iPhone Action Camera, for Studio Makeup TikTok YouTube Video Salon (Black)

(2,807)
$181.49
FREE delivery Sun, Aug 10
Loading...
SanDisk 64GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXU-064G-GN4IN

SanDisk 64GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXU-064G-GN4IN

(71,074)
$21.99$16.59
FREE delivery Sun, Aug 10 on your first order
500+ bought in past month
Loading...
SanDisk 128GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXD-128G-GN4IN
Best Seller

SanDisk 128GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXD-128G-GN4IN

(71,074)
$29.99$26.61
FREE delivery Sun, Aug 10 on your first order
4K+ bought in past month
Loading...
Tongate for Samsung Galaxy S25 Ultra Case, [with Privacy Screen Protector & Slide Camera Cover] [2 Front Frames] Full-Body Heavy Duty S25 Ultra Case with Stand & Belt Clip Holster, Black Privacy Film

Tongate for Samsung Galaxy S25 Ultra Case, [with Privacy Screen Protector & Slide Camera Cover] [2 Front Frames] Full-Body Heavy Duty S25 Ultra Case with Stand & Belt Clip Holster, Black Privacy Film

(787)
$35.99
PrimeFREE delivery Sat, Jun 14
Loading...
Vihibii for Samsung Galaxy S25 Ultra Case with Card Holder (4 Cards), RFID Blocking & Slide Camera Cover, Military Grade Drop Protection, Rugged Hard Back & Silicone Edge Wallet Case, 6.9" 2025, Black

Vihibii for Samsung Galaxy S25 Ultra Case with Card Holder (4 Cards), RFID Blocking & Slide Camera Cover, Military Grade Drop Protection, Rugged Hard Back & Silicone Edge Wallet Case, 6.9" 2025, Black

(174)
$27.99
FREE delivery Sat, Jun 14 on your first order
200+ bought in past month
Loading...
Vihibii for Samsung Galaxy S25+ Plus Case Wallet with Card Holder (4 Cards) [RFID Blocking] & Slide Camera Cover, Military Grade Drop Protection, Rugged Back & Silicone Edge Case, 6.7" 2025, Rose Gold

Vihibii for Samsung Galaxy S25+ Plus Case Wallet with Card Holder (4 Cards) [RFID Blocking] & Slide Camera Cover, Military Grade Drop Protection, Rugged Back & Silicone Edge Case, 6.7" 2025, Rose Gold

(174)
$27.99
FREE delivery Sat, Jun 14 on your first order
Loading...
Vihibii for Samsung Galaxy S25+ Plus Wallet Case with Card Holder (4 Cards) [RFID Blocking] & Slide Camera Cover & Raised Edges Protect Screen, Shockproof Rugged Case for S25+ Plus 6.7" 2025, Black

Vihibii for Samsung Galaxy S25+ Plus Wallet Case with Card Holder (4 Cards) [RFID Blocking] & Slide Camera Cover & Raised Edges Protect Screen, Shockproof Rugged Case for S25+ Plus 6.7" 2025, Black

(174)
$27.99
FREE delivery Sat, Jun 14 on your first order