Problem Animation Details-Tag
Das Öffnen des Details-Tag lässt sich ja animieren, das Schließen aber (derzeit, 2025) nicht.
Gustavo Alexandrino zeigte einen CSS-Trick, über den auch das Schließen des Details-Tag animiert erscheint, aber nicht wirklich animiert wird, da der Inhalt des Details-Tag ausgelagert wurde – im Details-Tag steht dann KEIN Inhalt, was ja ziemlich kurios ist und gewiss semantisch unfein.
Siehe dazu die Seite animiertes Öffnen UND Schließen von Details-Tag via puren Cascading-Style-Sheets (CSS) (CSS-Trick).
Inhalt ins Details-Tag schreiben
… wie es sich ja gehört! Und die ausgelagerte Inhaltsbox animieren:
„Kreisel-Spiele“ –
Inhalt Details-Tag – beim Schließen des Tags nicht animierbar.
Die gesamte Knospe ein Kreisel …
Dies ruckelt halt unfein – und der Inhalt des Details-Tag macht noch keinen Sinn.
Erweiterung des CSS-Tricks
Im Details-Tag kommt nun sinnvoller Inhalt.
Dieser Inhalt ist für Screenreader und enthält einen Link zu einem Sprunganker, der zu den Inhalten führt, welche der ausgelagerten (animierten) Inhaltsbox folgen.
Hier zunächst die Variante, die den Inhalt des Details-Tag öffnet und gleichzeitig die animierte ausgelagerte Inhaltsbox zeigt.
Das darauf folgende Beispiel versteckt dann den Inhalt des Details-Tag für Sehende.
Beispiel mit nicht versteckten Inhalt des Details-Tag
„Kreisel-Spiele“ –
Folgender Absatz zeigt ein vergrößertes Bild der Blütenkelche der “Dornenlose Kreiselrose”.
Die Kelche erinnern in der Form an Kreisel, etwa solchen, die zwischen den Fingern auf ebener Fläche gedreht um sich selbst rotieren.
Die Kelche sind hellgrün, leicht borstig und etwa Fingerkuppen groß.
Die gesamte Knospe ein Kreisel …
Beispiel mit versteckten Inhalt des Details-Tag
Quasi im Quelltext identisch mit obigen Beispiel, nur der Inhalt des Details-Tag wird nun via CSS für Sehende versteckt.
Wenn ich es richtig gemacht habe, ist das Ganze auch via Tastatur bedienbar … ansonsten müsste jemand her, der hier Routine hat.
„Kreisel-Spiele“ –
Folgender Absatz zeigt ein vergrößertes Bild der Blütenkelche von “Dornenlose Kreiselrose”, ‘Minette’, Rosa x suionum.
Die Kelche erinnern in der Form an Kreisel, etwa solchen, die zwischen den Fingern auf ebener Fläche gedreht um sich selbst rotieren.
Die Kelche sind hellgrün, leicht borstig und etwa Fingerkuppen groß.
Den folgenden Absatz, der ein vergrößertes Bild dieser Kelch-Kreisel zeigt, überspringen.
Die gesamte Knospe ein Kreisel …
Die CSS fürs Verstecken könnte so aussehen:
.hidden-inhalt-details-tag {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
Barrierefrei?
Also, da bin ich derzeit nicht fit genug – denke aber, so wie hier angeboten, müsste es stimmen und für Nutzer von Screenreadern wie für Sehende gut nutzbar sein.
Semantisch ist es dann auch in Ordnung.
Ein Nachteil aber bleibt: eine gewisse Redundanz des Inhaltes ist möglich, je nachdem, was innerhalb des Details-Tag steht und was in dieser ausgelagerten, animierbaren „Inhaltsbox“.
Anstatt DIV-Elemente (wie ich es jetzt hier gemacht habe) könnten passend aside- oder section- oder figure-Elemente gewählt werden. Und zwar innerhalb des Details-Tag wie in der ausgelagerten Box.
Zumindest stolpern Nutzer nicht über ein leeres Details-Tag … und Nutzer von Screenreadern könnten eine gewisse Redundanz via Ankerlink umgehen (die ausgelagerte Box überspringen).
Für Sehende erscheint ja alles ohnehin in bester Ordnung …
Die beste Lösung
… wäre, wenn es Standard würde, auch das Schließen eines Details-Tag animieren zu können.
Ein geschmeidiges Öffnen und Schließen ist auf Websites schon sehr angenehm und entspricht den Erfahrungen „im wirklichen Leben“.
Inkonsistenz vermeiden
Es macht sich nicht gut für eine Website, wenn gewisse Gestaltungselemente nicht konsistent gehalten werden; und ich denke, die Bedienung des Details-Tag gehört dazu: Gestaltungselemente sollten auf einer Website weitgehend einheitlich sein.
Wenn nun allein für eine Animation eine Redundanz der Inhalte im Detail-Tag und in der (animierbaren) ausgelagerten Box entsteht, sollte wohl derzeit generell auf eine Animation des Schließens des Details-Tag auf einer Website verzichtet werden.
Der Einsatz von Scripten halte ich auch hier für aufgebauscht und übertrieben.