Lesetipp: The <details> and <summary> elements are getting an upgrade

[Matthias Scharwies]

Servus!

Hallo Matthias,

bei der Gelegenheit hab ich nochmal das animierte details-Element angeschaut. Ohne Javascript scheint's immer noch nicht zu gehen,

Stephanie Stimac hat in ihrem Blog folgendes gepostet:

The <details> and <summary> elements are getting an upgrade

Es geht um einige Vorschläge der open-ui, die mit Chrome 131 implementiert werden. Auf die Schnelle habe ich aber nur gefunden, dass man Animation ermöglichen will, aber nicht mit dem :part-Pseudoselektor.

[EDIT] mit ::details-content:

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

details {
  --open-close-duration: 500ms;
}

details::details-content {
  opacity: 0;
  height: 0;
  overflow-y: hidden; /* clip content when height is animating */
  transition: content-visibility var(--open-close-duration) allow-discrete,
              opacity var(--open-close-duration),
              height var(--open-close-duration);
}

details[open]::details-content {
  opacity: 1;
  height: auto;
}

[/EDIT]

Mal schauen, was da noch kommt!

Herzliche Grüße

Matthias Scharwies