CSS Simplified Course: https://courses.webdevsimplified.com/css-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
In this video I will show you my 20 favorite new CSS features that you should be using in 2025 and beyond.
? Materials/References:
CSS Simplified Course: https://courses.webdevsimplified.com/css-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
Videos:
@layer: https://youtu.be/Pr1PezCc4FU
text-wrap: https://youtube.com/shorts/fkQQhw_ZrIw
Nesting: https://youtu.be/SVScyx4cJi8
Container Queries: https://youtu.be/rrLAg7xNERA
Relative Colors: https://youtu.be/Acs-tJV4iAo
:has: https://youtu.be/K6CWjkDgQnE
@property: https://youtu.be/sd34qnxSeoU
Subgrid: https://youtu.be/-0fAhoahXYw?t=145
Multi-Value Display: https://youtu.be/JY0FN71vCbw?t=200
display: contents: https://youtu.be/JY0FN71vCbw?t=478
Logical Properties: https://youtu.be/-0fAhoahXYw?t=544
::backdrop: https://youtu.be/ywtkJkxJsdg
transition-behavior: https://youtu.be/qFVtSAK8H44?t=447
@starting-style: https://youtu.be/qFVtSAK8H44?t=218
field-sizing: https://youtu.be/ElELqkwzcYM
anchor: https://youtu.be/B4Y9Ed4lLAI
Articles:
@layer: https://blog.webdevsimplified.com/2022-04/css-cascade-layers/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
:has: https://blog.webdevsimplified.com/2022-09/css-has-selector/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
@property: https://blog.webdevsimplified.com/2025-01/css-at-property/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
Multi-Value Display: https://blog.webdevsimplified.com/2024-11/css-advanced-display-property/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
display: contents: https://blog.webdevsimplified.com/2024-11/css-advanced-display-property/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
Logical Properties: https://blog.webdevsimplified.com/2021-05/css-logical-properties/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-VA975GOUFmM
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:36 - @layer
02:08 - text-wrap
02:57 - Nesting
03:30 - Container Queries
04:46 - Relative Colors
06:13 - :has
07:27 - @property
08:35 - Subgrid
09:15 - Multi-value Display
10:14 - display: contents
11:02 - Logical Properties
11:55 - ::backdrop
12:34 - transition-behavior
13:12 - @starting-style
14:20 - field-sizing
15:32 - @scope
16:44 - anchor()
18:45 - @container Style Queries
19:42 - interpolate-size
#CSS #WDS #WebDevelopment