Explore a comprehensive 21-minute video tutorial on CSS features with better browser support than commonly assumed. Learn about custom properties, object-fit, WebP and AVIF image formats, intrinsic and extrinsic sizing, grid layouts, conic gradients, logical properties, and modern CSS selectors. Discover the power of gap, aspect-ratio, @layer, container queries, viewport units, media query range syntax, and subgrid. Gain insights into the limitations of browser support tables and understand the difference between breaking your site and progressive enhancement. Master CSS feature detection using @supports and SupportsCSS to create more robust and compatible web designs.
Overview
Syllabus
- Introduction
- Custom Properties
- Object Fit
- WebP
- AVIF
- Intrinsic and Extrinsic sizing
- Grid
- Conic gradients
- Logical properties
- :is and :where
- gap
- aspect-ratio
- @layer
- :has
- Container queries
- dynamic, small, and large viewport units
- Media query range syntax
- Subgrid
- Floats and the flaws with browser support tables
- Breaking your site vs. progressive enhancement
- CSS feature detection with @supports and SupportsCSS
Taught by
Kevin Powell
