CSS ist kein Ersatz für JavaScript

[molily]

Hallo,

Von display:none nach block lässt sich (noch) in keinem Browser animinieren. Das wird gerade erst diskutiert. Ich denke nicht, dass wir hier irgendwann mit einem Einblend- oder Aufklappeffekt rechnen können. Auch das Animieren von height:0; overflow:hidden zu height:auto geht nicht. Mit einem festen height-Wert ginge es, aber den kann und will man nicht ins CSS schreiben.

Darüber hinaus ist display:none ohnehin die falsche Methode, um Inhalte auszublenden. Das ist bekanntlich nicht barrierefrei insofern, dass viele Screenreader diese Inhalte dann komplett ignorieren. Barrierefrei wäre z.B. die Off-Left-Methode, allerdings kann man die ebenfalls nicht vernünftig mit CSS3-Transitions wieder ins Bild holen. Fazit: Solche flexiblen und ansehnlichen Animationen kann man mit CSS3-Transitions derzeit nicht lösen.

Die Idee, Elemente nur bei :target (also bei Fokussierung) einzublenden, halte ich prinzipiell für problematisch. Ich kann mir nicht vorstellen, dass das zugänglich ist - ich habe es aber nicht in Screenreadern getestet. Da die zumeist auf IE aufsetzen bzw. mit IE benutzt werden und z.B. NVDA für Firefox display:none ohnehin vorliest, ist das in der Praxis auch schwer testbar und hinge stark von dem JavaScript-Fallback ab.

Akkordeons in JavaScript sind von der Usability einfach vielseitiger und komfortabler umzusetzbar. Ein Element kann z.B. unabhängig von seinem Fokus gezeigt/verborgen werden. Das geht hervorragend mit Tastatur und Maus. Zudem ist die Barrierefreiheit gut getestet, siehe bspw. dieses Tab-Script (Akkordeons funktionieren prinzipiell ähnlich).

Programmatische Interfaces mit JavaScript erlauben bessere Interaktion als die sehr beschränkten CSS-Deklarationen (»standardmäßig unsichtbar, wenn :target, dann sichtbar«). Wenn die Gewinner für solche Aufgaben CSS benutzen, dann gewinnen sie damit höchstens eine schlecht benutzbare Site.

Mathias