CSS “locks”
Tim Brown with a new (metaphorical) term to describe a value that can fluctuate between two set values:
In canal and river navigation, a lock is a device used for raising and lowering vessels between stretches of water that are at different levels. That’s exactly what our formula accomplishes. Our formula is a CSS calc “lock”.
To fluctuate between a 1.3em and 1.5em line-height depending on the screen width:
line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));Bram Stein made a helper plugin for PostCSS.
Part of the “lock” is an additional media query that overrides the value at one end of the extremes. Similar to what Mike Riethmuller did when he was playing with molten leading and how Eduardo Bouças approached viewport sized type with minimums and maximums.
Direct Link to Article — Permalink
CSS “locks” is a post from CSS-Tricks
