Learn how to animate and perform mathematical operations on height properties like 'auto' in this 15-minute tutorial video that explores the powerful CSS features interpolate-size and calc-size(). Master the implementation of interpolate-size on HTML selectors, understand why it isn't set as a default property, and discover its compatibility with various keywords beyond focus. Explore practical applications as a progressive enhancement technique and see how these properties work seamlessly with animations. Gain insights into calc-size() functionality and develop the knowledge to choose the most appropriate sizing method for specific use cases. Through hands-on demonstrations and clear explanations, grasp these modern CSS techniques to create more dynamic and responsive web layouts.
Overview
Syllabus
- Introduction
- 12 days of web
- interpolate-size
- put interpolate-size on your html selector
- why this isn’t the new default
- works with keywords other than focus
- using it as a progressive enhancement
- it works with animations too
- calc-size
- how to pick which one to use
Taught by
Kevin Powell
