20 NEW CSS Features You Need To Know In 2025

CSS Simplified Course: courses.webdevsimplified.com/css-simplified/?utm_s…

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: courses.webdevsimplified.com/css-simplified/?utm_s…

Videos:
@layer:    • CSS Layers Are Changing How Specifici...  
text-wrap:    • This New CSS Text Property Is Amazing...  
Nesting:    • How To Use Nesting In Plain CSS  
Container Queries:    • Responsive CSS Will Never Be The Same  
Relative Colors:    • How To Handle CSS Colors Like A Senio...  
:has:    • This Is So Much More Than Just A Pare...  
@property:    • @property Is One Of The Coolest New C...  
Subgrid:    • Yet Another 5 Must Know CSS Tricks Th...  
Multi-Value Display:    • The CSS Display Property is Changing ...  
display: contents:    • The CSS Display Property is Changing ...  
Logical Properties:    • Yet Another 5 Must Know CSS Tricks Th...  
::backdrop:    • The New dialog HTML Element Changes M...  
transition-behavior:    • We Can Finally Animate height: auto; ...  
@starting-style:    • We Can Finally Animate height: auto; ...  
field-sizing:    • This CSS Property Replaces Hundreds o...  
anchor:    • CSS Anchor Is The Best New CSS Featur...  


Articles:

@layer: blog.webdevsimplified.com/2022-04/css-cascade-laye…
:has: blog.webdevsimplified.com/2022-09/css-has-selector…
@property: blog.webdevsimplified.com/2025-01/css-at-property/…
Multi-Value Display: blog.webdevsimplified.com/2024-11/css-advanced-dis…
display: contents: blog.webdevsimplified.com/2024-11/css-advanced-dis…
Logical Properties: blog.webdevsimplified.com/2021-05/css-logical-prop…



🌎 Find Me Here:

My Blog: blog.webdevsimplified.com/
My Courses: courses.webdevsimplified.com/
Patreon: www.patreon.com/WebDevSimplified
Twitter: twitter.com/DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: 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