Pure Cascading Style-Sheets (CSS) für das Öffnen UND Schließen von Details-Tag

Animationen und das Details-Tag

Ich prüfe seit etlichen Jahren solche CSS NICHT mehr in verschiedenen Browsern – geschweige, dass ich „spezifische“ Anpassungen schreibe.
Falls die Animationen bei Ihnen nicht funktionieren, kann ich heute nur noch kommentieren, Sie nutzen offenbar keinen aktualisierten Firefox …

Beispiel: Fotos via Details-Tag animiert vergrößern

JavaScript ist nicht nötig – wenigstens nicht bei meinem Browser „Firefox“. Via CSS kann auch das Detail-Tag beim Schließen animiert werden:

Vorgehensweise: Den Inhaltsbereich des Details-Tag „auslagern“, mit einer Klasse versehen (zum Beispiel „inhaltsbox“), sodann im CSS mit dem Details-Tag verknüpfen: details[open] + div.inhaltsbox.

Tipps habe ich abgeschaut bei Gustavo Alexandrino (inklusive Update aus Juni 2023) – und das Ganze für meine Seiten angepasst und etwas erweitert.

Wer es genauer wissen will, findet im Quelltext meine aktuellen Style-Anweisungen.

Ob man derlei schon produktiv einsetzen sollte, danach fragen die Anmerkungen.

Details-Tag – ohne position: absolute;

So wie folgt verwende ich das Details-Tag am liebsten; alle schon genannten Vorteile bleiben erhalten, ob mit oder ohne Animationen beim Öffnen / Schließen des Details-Tag:

„Kreisel-Spiele“ –

Spielvariante: Einblenden des Bildes von linker Seite

„Kreisel-Spiele“ –

Animiertes Details-Tag – mit position: absolute;

Inhalt, der diesem absolut positioniertem Tag folgt, ist nur dann verfügbar, wenn das Details-Tag geschlossen wird – nachfolgender Inhalt wird ansonsten überdeckt:

Erneut Spielvariante: Einblenden des Bildes von linker Seite

Durch das seitliche Einblenden des Bildes sieht man gut, dass Inhalt, der dem Detail-Tag folgt, schlicht überdeckt wird.

Anmerkungen zu Barrierefreiheit und saubere HyperText Markup Language (HTML)

Streng gesehen ist der via Cascading-Style-Sheets (CSS) sich ein-, ausblendende Inhalt nicht mehr Teil des Details-Tag – inwieweit dies frei von Hürden für alle Nutzer ist, bliebe zu fragen (und wie man diesbezügliche Probleme lösen könnte).

Daraus ergibt sich auch die Frage, ob dieser „CSS-Trick“ nicht ein unfeines Schreiben des Inhaltes ist: Denn ein Details-Tag ohne Inhalt ist im Quelltext mindestens „kurios“ …
Gustavo Alexandrino merkt dies ebenfalls an (ebenda, Sprung zum Absatz Final words).

Auch das Details-Tag wird wohl weiter entwickelt werden – und die Möglichkeiten, es zu gestalten, es wird Standard werden, also auch die Möglichkeit, das Schließen des Details-Tag regelkonform animieren zu können.

Innerhalb der Gestaltung einer Website sollte dieser derzeitige „CSS-Trick“ also nur bedingt oder umsichtig eingesetzt werden …

Derlei Überlegungen führen zu der nicht leicht zu beantwortenden Frage: Was sind Webstandards? Und wie entstehen sie überhaupt (heutzutage) …?

Dazu vielleicht folgende Anmerkungen über
„Entwicklungen der CSS“ (…)
von Websites (…)
des WorldWideWeb (…)

Entwicklungen der CSS

In 2010 war viel von dem, was heute Standard geworden ist, nicht einmal geträumt realisierbar. Die Entwicklungen dieser Designsprache „CSS“ der letzten Jahre sind enorm – und ich wüsste keinen sinnvollen Einsatz von JavaScript, der über das Ausspionieren der Nutzer hinausweist … „Online-Shops“ hin und her …

Animierte sowie (etwa über die Maus des Nutzers) interaktive räumliche 3D-Darstellungen von Objekten werden ebenso realisiert wie komplexe Designs von ganzen Websites – mit und ohne Kombination mit Scripten.
Hier biete ich keine Links, Sie finden etwa unter „(3D) Animationen pures CSS“ endlose Beispiele im Netz … dies ist eine gute Entwicklung.

Mitunter aber sind CSS noch sehr umfangreich (und im Vergleich sind dann Scripte für die selbe Sache mitunter schlanker). Aber auch hier, bei der Verschlankung des CSS sind die Entwicklungen rasant.
Allein die „schnöde“ Darstellung von Bildern mit jeweiligen Texten darunter (also beschriftete Bildergalerien) sind heute und seit einigen Jahren via CSS überhaupt kein Problem mehr, während noch in 2013 geradewegs akrobatische Style-Anweisungen und Browser-*-Geflimmer aller Art sich redlich aber ziemlich verkrampft bemühten.

Scripte

Scripte aber sterben im Netz allein deswegen schon nicht, weil die menschliche Gier – also jegliche Arten eines enthemmten Eigennutzes – sie braucht. Und derlei stirbt halt nicht, im Gegenteil: Gier pflegt ihre Werkzeuge und sucht und findet erfolgreich Wege, die eigene Steigerung zu entwerfen:

• Künstliche Intelligenz generiert Content …
• Lobbyismus und Politik erfinden marktkonformen Datenschutz …
• zeitigen eine Aushöhlung digitaler Rechte innerhalb der Europäischen Union …
• und treffen zielsicher jede digitale Bequemlichkeit und jedes gepflegte Desinteresse gegenüber Entwicklungen des WorldWideWeb …

Scripte innerhalb von Websites sind heute kaum mehr in der Kritik oder gar wie in den Anfängen des WorldWideWeb verpönt, sie sind „Standard“ geworden.
Dieser aktuell massive Einsatz von Scripten wird gern verkleidet mit der Lüge, Nutzererlebnisse verbessern zu wollen …

Am Ende des Tages braucht allein die Branche rund um das ungehörige und enthemmte Ausspionieren und Manipulieren der Nutzer allerlei Scripte.
Der Rest der WWW-Welt benötigt diese „Instrumente“ nicht …