Das geht schon seit 2024!

Moin!

Eins vorweg: Heute wurde ein Sicherheitsupdate für alle aktiven Contao-Versionen veröffentlicht. Alle Details zur Lücke findest du hier: Cross-Site-Scripting durch SVG-Uploads

***

Die letzten Wochen habe ich immer mal wieder (für mich) neue CSS-Möglichkeiten vorgestellt – vor allem für Formulare. Und auch heute geht es um ein CSS-Feature, das ich mir schon lange gewünscht habe, ohne zu wissen, dass es das bereits gibt.

Das Problem: Für display: none zu display: block gibt es keine Übergänge (Transitions).

Wenn ich zum Beispiel eine Overlay-Navigation animiert einblenden wollte, dann hatte folgende Anweisung nicht den gewünschten Effekt:

.nav--overlay { [nbsp]
[nbsp] transform: translateX(-100%);
[nbsp] display: none;
[nbsp] transition: transform 0.7s, display 0.7s;
[nbsp][nbsp]
[nbsp] [&]--active {
[nbsp] [nbsp] transform: translateX(0);
[nbsp] [nbsp] display: block;
[nbsp] }
}

Durch display wird das Element – die transition ignorierend – direkt sichtbar und unsichtbar geschaltet.

Um das Problem zu umgehen, habe ich in der Vergangenheit dann aus zwei Alternativen gewählt: Entweder habe ich mit visibility gearbeitet oder im JavaScript darauf gewartet, dass die Transition zu Ende ist und dann das Element ausgeblendet.

Aber wenn es um das Thema Tastatur-Navigation geht, dann ist display: none oftmals die einzige Lösung, um sicherzustellen, dass sich der Tab nicht doch versehentlich in die unsichtbare Overlay-Navigation verirrt.

Neulich fand ich dann eher per Zufall die Lösung für mein Problem, über das ich mich bestimmt schon 5 Jahre ärgere.

Die Lösung: Mit transition-behavior: allow-discrete und @starting-style kann ich das display-Attribut so manipulieren, dass es so lange wartet, bis der Wechsel abgeschlossen ist.

Am Besten schaust du dir dafür meine Demo auf Codepen an.

Die Sache hat eigentlich nur einen Haken:
Im Moment hat der Firefox (Version 136) bei mir Probleme beim Ausblenden der Overlay-Navigation. Es scheint fast, als wäre der Bug neu, denn gefunden habe ich dazu auf die Schnelle nichts (und auch andere Demos, die in Chrome und Safari funktionieren, haben in Firefox Probleme). Hoffentlich wird der Fehler schnell behoben.

Wenn du mehr von solchen Tipps und Tricks kennst, dann lass es mich gerne wissen. Ich bin gerade hellauf begeistert, wieviel sich in den letzten Monaten im Bereich CSS getan hat.

Erstma',
Dennis