Silas Köhler

Webentwicklung

Details-Blöcke nur mit CSS animieren (Chrome & Edge)

Silas Köhler

|

Seit WordPress 6.3 gibt es den Details Block. WordPress nutzt dazu das Standard-HTML <details> Element – was cool ist – nur das Animieren beim auf- und zuklappen ist mit CSS nicht so easy.

Code-Snippet

Natürlich könntest du das ganze auch mit Javascript machen, aber für Javascript im Frontend möchte ich nur noch die Interactivity API nutzen, und mit dieser ist es aktuell noch umständlich Core Blöcke zu erweitern.

.wp-block-details {
	&::details-content {
		overflow: hidden;
		block-size: 0;
		transition-property: block-size, content-visibility;
		transition-behavior: allow-discrete;
		transition-duration: 0.5s;
	}

	&[open] {
		&::details-content {
			block-size: auto;
			block-size: calc-size(auto, size);
		}
	}
}Code-Sprache: SCSS (scss)
Beispiel auf CodePen

Warum funktioniert das?

Bekanntlich lässt dich auf height: auto nicht mit CSS animieren. Abhilfe schafft die CSS Eigenschaft block-size und die Möglichkeit auf die Höhe, die mit calc-size(auto, size) berechnet wird zu animieren.

content-visibility verbessert die Performance, indem Inhalte erst sichtbar werden, wenn sie wirklich gebraucht werden.

transition-behavior: allow-discrete ermöglicht es, dass die Animation auch beim Schließen funktioniert.

Der Haken: Nur Chrome und Edge

Leider unterstützen aktuell nur Chrome und Edge calc-size. Weil beide zusammen jedoch auf über 70 % Marktanteil kommen, nutze ich dieses Vorgehen bereits in aktuellen Projekten. Alle anderen Browser bekommen die gleiche Funktionalität nur ohne Animation.

Ach ja und die prefers-reduced-motion Beschränkung habe ich der Übersicht halber weggelassen, solltest du aber um der Barrierefreiheit mit bedenken.

Inhalt