What's New in CSS - Ste Greig

Transitioning to height/width auto

One of the biggest frustrations in CSS has been not being able to transition to auto width/height values.

Thankfully that has now been fixed with a simple global property that sits on your :root element.

:root {
  interpolate-size: allow-keywords;
}

Hover over the icons below (these will only transition if your browser supports interpolate-size)...

button {
  width: 48px;
  transition: width .3s;
}

button:hover {
  width: auto;
}

<button class="w-12 hover:w-auto transition-[width]">

My Card Title

.cards {
  height: 208px;
  transition: height .5s;
}

.cards:has(:checked) {
  height: auto;
}

<div class="h-52 has-[:checked]:h-auto transition-[height]">

(For the sake of this demo, I've made the button a checkbox under the hood and used :has)