It’s #FrontendFriday – Darf es auch etwas mehr CSS sein?

Da man als Webentwickler hauptsächlich mit JavaScript arbeitet, sammelt man mit der Zeit mehr Erfahrung in dieser Sprache. Aus diesem Grund neigt man dazu, für fast alle Aufgaben JavaScript zu verwenden. Viele Entwickler verwenden in diesem Fall CSS hauptsächlich nur für Styling Aufgaben. CSS bietet neben simplen Styling auch weitere Möglichkeiten, wodurch es möglich ist, auf JavaScript zu verzichten.

Was spricht gegen JavaScript ?

Es gibt verschiedene Gründe, weshalb man in bestimmten Fällen teilweise oder komplett auf JavaScript verzichten sollte. Beispielsweise kann es eine Anforderung des Kunden sein, in der verlangt wird, dass eine Webanwendung ohne JavaScript auskommen muss. In manchen Projekten standen wir bereits vor Herausforderungen, in denen es Komplikationen in unterschiedlichen Browsern gab. Dabei wurden UI Komponenten aus einem UI Framework in bestimmten Browsern fehlerhaft oder auch gar nicht dargestellt. Browser interpretieren JavaScript Code unterschiedlich, wodurch es zu diesen Problemen führen kann.

Was spricht für CSS ?

CSS wird von den meisten Browsern gleich oder sehr ähnlich interpretiert (ggf. unter Angabe des jeweiligen Browser-Präfix). Besonders bei Animationen sollte CSS vorzugsweise verwendet werden. Diese Animationen werden durch den Browser gesteuert, wodurch eine deutlich bessere Performance erreicht wird. Der Browser erkennt, ob das jeweilige Fenster, in dem die Animation läuft, gerade sichtbar ist oder nicht. Dadurch kann der Browser seine Ressourcen besser steuern, was wiederum benutzerfreundlicher ist. Zudem bringt es den Vorteil, dass keine weiteren JavaScript Frameworks oder Plugins eingebunden werden müssen. Dadurch sich keine großen Gedanken über Updates und Support mehr nötig.

Pure CSS Akkordeon

Ein einfaches Beispiel dazu wäre dieses Akkordeon aus reinem HTML und CSS.