TIL: CSS interpolate-size: allow-keywords

[Matthias Scharwies]

Servus!

Hallo alle,

Youtube machte mir heute diesen Vorschlag, der mich darüber informierte, dass Firefox jetzt @property unterstützt. Und über ein neues bzw. kommendes CSS opt-in Feature:

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

Zur Zeit nur in Chrome, ist aber Teil von CSS Values and Units Level 5. Zweck: endlich eine Höhe oder Breite von min-content nach max-content animieren können.

https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size

Mit <details> habe ich es allerdings nicht geschafft, es konsistent sanft aufgleiten zu lassen. Es klappt manchmal, aber nicht immer. Seltsam.

Das ist mein letzter Stand - viel Gefummel drin.

:root {
  interpolate-size: allow-keywords;
}
details div {
  transition: height 1s;
  background-color: yellow;
  overflow: visible hidden;
}
details:not([open]) div {
  height: 0;
}
details[open] div {
  height: max-content;
}

Vielleicht irgendwann mit :details-content

Herzliche Grüße

Matthias Scharwies