TIL: CSS interpolate-size: allow-keywords

[Rolf B]

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;
}

<details>
  <summary>Hello</summary>
  <div>
  World World World<br>
  World World World<br>
  World World World<br>
  World World World<br>
  World World World<br>
  World World World<br>
  </div>
</details>

Wie gesagt: nur Chrome (Desktop und Android), ab v129. Und Opera in der Preview-Version.

Rolf

[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

[Rolf B]

Hallo Matthias,

ach was, da war interpolate-size ja auch drin, gar nicht bemerkt 😀

Rolf