Overview
This 21-minute video tutorial from Web Dev Simplified explores 20 cutting-edge CSS features to incorporate into your web development toolkit for 2025 and beyond. Discover powerful capabilities including cascade layers (@layer), improved text wrapping (text-wrap), native CSS nesting, container queries for responsive design, relative color syntax, the revolutionary :has selector, custom property registration with @property, and subgrid for advanced layouts. Learn about multi-value display properties, display: contents for DOM manipulation, logical properties for internationalization, the ::backdrop pseudo-element, transition-behavior for animation control, @starting-style for initial animations, field-sizing for form elements, @scope for style isolation, anchor() positioning, container style queries, and interpolate-size for responsive sizing. Each feature is thoroughly explained with timestamps provided for easy navigation through specific topics.
Syllabus
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
Taught by
Web Dev Simplified