Was man alles ohne JavaScript machen kann

„JavaScript ist keine Layout-Technologie“ – Interview mit Sven Wolfermann
Kommentare

Die Webstandards haben sich massiv entwickelt. Mittlerweile sind viele CSS-Techniken verfügbar, die es nicht mehr nötig machen, JavaScript für Layoutgestaltung zu verwenden – sagt Sven Wolfermann, freier Webdeveloper und Sprecher auf der International JavaScript Conference. Wir haben mit ihm auf der Konferenz darüber gesprochen, ob JavaScript als Layout-Technologie (endlich) ausgedient hat.

Hallo Sven! Auf der iJS hast du CSS-Techniken vorgeführt, die JavaScript für die Layoutgestaltung unnötig machen. Kannst du einmal ein Beispiel geben?

Sven Wolfermann: Flexbox ist so ein Klassiker, für den heutzutage kein JavaScript mehr notwendig ist. Gleich hohe Elemente sind mit Flexbox ein Kinderspiel. Flexbox kann nun auch vertikal zentrieren, was ein lang ersehntes Feature von CSS ist.

Ist JavaScript damit als Layout-Technologie völlig aus dem Rennen?

Sven Wolfermann: JavaScript ist überhaupt keine Layout-Technologie. Hin und wieder gab es zwar die Notwendigkeit, Layout Features in JavaScript umzusetzen. Wenn ich zum Beispiel daran denke, Container mit unterschiedlichen Inhalten gleich groß zu machen, gab es in bestimmten Kontexten keine andere Möglichkeit, als mit JavaScript alle Elemente durchzugehen und alle zu klein geratenen Containern die größte Größe mitzugeben. Das hat sich aber deutlich geändert. Heute gibt es – abseits von komplexen Effekten – keine Notwendigkeit mehr für ein solches Vorgehen. CSS ist durch die neuen Layout-Technologien wie Flexbox und Grid sehr mächtig geworden.

Wie sieht es mit der Browser-Unterstützung aus. Gehen die gezeigten CSS-Techniken auf allen gängigen Browsern schon?

Sven Wolfermann: Natürlich. Flexbox wird ab IE10 mit einigen Abstrichen unterstützt. CSS Grids ist relativ neu dieses Jahr, ist aber in allen modernen Browsern vorhanden. Auch hier unterstützt der IE10 schon den ersten Wurf von Grids, leider nicht den vollumfänglichen Featurestand wie alle anderen Browser, ein Fallback ist aber möglich. Hier sollte man eher alte Androids oder Samsung-Browser im Auge behalten, die haben kein Grids-Support.

API Summit 2017

Moderne Web APIs mit Node.js – volle Power im Backend

mit Manuel Rauber (Thinktecture), Sven Kölpin (Open Knowledge)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

Kannst du einmal ein Beispiel einer Cutting-Edge-Technik zeigen, die noch nicht überall unterstützt wird?

Sven Wolfermann: Ein Beispiel ist `display: flow-root` – das ist eingeführt worden, weil Entwickler immer wieder Schwierigkeiten mit Float-Layouts haben. Der sogenannte „Clearfix-Hack“ hilft in den häufigsten Fällen. Da es keine einfache Lösung für diese Schwierigkeiten gab, hat das W3C jetzt `display: flow-root` spezifiziert, das den zusätzlichen Code unnötig macht. Leider unterstützen erst Firefox und Chrome (Opera) das Feature.

Wo liegt aus deiner Sicht der Vorteil, auf JavaScript zur Layoutgestaltung zu verzichten?

Sven Wolfermann: JavaScript sollte nur die letzte Instanz für Layoutgestaltung sein, CSS ist für solche Dinge da. Glücklicherweise haben wir heutzutage viele Möglichkeiten, Designs mit CSS umzusetzen, es macht es kaum notwendig, JavaScript zu verwenden. CSS ist zudem viel schneller als JavaScript und hat Priorität beim Rendern. Greift JavaScript dort ein, verlangsamt das den Seitenaufbau oder bremst das Scrollverhalten. Gerade bei alten Browsern und schwachen Mobilgeräten kommt das besonders zum Tragen.

 Vielen Dank für dieses Interview!

Unser Interview-Partner

Sven Wolfermann ist freier Webdeveloperaus Berlin mit Fokus auf moderner Frontend-Entwicklung. Er gilt als Experte im Bereich des „Responsive Webdesigns“ und gibt sein Wissen in Vorträgen und Workshops weiter. Sein Augenmerk liegt dabei auch immer auf der User Experience, Accessibility und der Performanceoptimierung. Bereits seit 2003 unterstützt er mit seiner Firma „maddesigns“ Agenturen und Firmen im Projektgeschäft. Bei Twitter ist er unter @maddesigns anzufinden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -