DevTools, the CSS Advocate in Your Browse

Explore DevTools features that demystify CSS and empower web developers to experiment with new techniques in this 43-minute JSConf talk. Dive into content-based sizing, flexbox, free-space distribution, and flex-based sizing. Learn to leverage the Grid Inspector for flexible sizing and CSS Grid implementations. Understand the nuances of MinMax, Auto, and their interactions in various scenarios. Examine real-world examples that demonstrate how these concepts apply to practical web development challenges. Gain insights into making CSS less intimidating and more accessible for both novice and experienced developers.

Intro
Contentbased sizing
Flexbox
Freespace distribution
Flexbased sizing
Grid Inspector
Flexible Sizing
CSS Grid
CSS Fr
MinMax
MinMax vs Auto
MinMax shrinks
MinMax shrinks together
MaxMax shrinks together
MaxMax continues to grow
MaxMax stops growing
Blue stops growing
Real world examples