--- title: "Dagens CSS: interpolate-size" url: "https://www.bekk.christmas/post/2024/22/dagens-css-interpolate-size" authors: ["Einar Afiouni"] published: "2024-12-22" updated: "2024-12-17T19:46:02Z" language: "nb-NO" type: "article" tags: ["CSS"] keywords: ["css"] series: "Dagens CSS" --- # Dagens CSS: interpolate-size I dagens CSS skal vi se på `interpolate-size` Vi har alle vært der. Du prøver å lage en smooth animasjon av en infoboks eller trekkspill som skal vise og skjule innhold, men høyden på elementet er jo selvfølgelig avhengig av mengden innhold. Du prøver likevel og minnes nok en gang på at transition ikke fungerer på verdier som ikke er kjent i forkant. Man kan selvfølgelig løse dette med javascript og finne ut den endelige høyden i DOM-en, men hva om man kunne løst dette med bare CSS? Med `interpolate-size: allow-keywords;` kan du nettopp det. Når du setter denne regelen vil man kunne bruke både `animation` og `transition` på lengdeverdier som `fit-content`, `max-content` og `auto`. [CodePen](https://codepen.io/iernie/pen/zxONXqG) Her kommer de dårlige nyhetene dessverre. Denne regelen er ganske dårlig støttet med kun støtte i Chrome for øyeblikket. Forhåpentligvis er det ikke lenge før den blir litt mer tilgjengelig! ## Relevante lenker anbefalt av forfatteren - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size)