Bringt das CSS Grid Layout mehr Nachteile als Vorteile?

CSS Grid Layout sinnvoll verwenden trotz nicht unterstützter Browser-Versionen

Zu Beginn des UX/UI Designs war die größte Herausforderung für ein paar unterschiedliche Bildschirmgrößen ein Layout zu erstellen. Aus einigen wenigen Größen sind aufgrund diverser Endgeräte wie Smartphones oder Tablets eine Vielzahl von unterschiedlichen Bildschirmgrößen geworden. Mit dem CSS Grid Layout ist es einfacher geworden, flexible und responsive Designs zu erstellen. Wie der Name bereits vermuten lässt, wird dazu ein Raster angelegt, in dem sich Kind-Elemente positionieren lassen, ohne diese beispielsweise mit festen Größenangaben oder anderen Einstellungen versehen zu müssen, sondern sich diese flexibel arrangieren lassen. Der Nachteil beim CSS Grid Layout ist jedoch, dass es nicht von allen Browsern unterstützt wird, was Webdesigner vor Probleme stellen kann. Dennoch ergibt es Sinn sich mit dem CSS Grid Layout auseinander zu setzen und für das Layout zu verwenden, denn es könnte dafür sorgen, dass sich das Internet zukünftig optisch anders zeigt.

Knapp ein Drittel der Browser werden nicht unterstützt

Das CSS Grid Layout wird bereits von vielen Browsern unterstützt. Mit Chrome, Firefox, Safari und Opera unterstützen die meisten gängigen Browser bereits das Layout. Mit der Integration in die Internetexplorer-Versionen 10 und 11 von Microsoft sowie Edge unterstützen rund 70 Prozent der Browser das Layout. Dies ist bereits eine sehr gute Quote, wenn es nicht noch weltweit zahlreiche Browser ohne Unterstützung gibt sowie auch zahlreiche nicht aktualisierte Versionen. Rund 30 Prozent der Browser unterstützen CSS Grid nicht, was zu Problemen bei der Darstellung führen kann. Trotzdem können Entwickler auf den Einsatz des CSS Grid Layouts nicht verzichten, da es mehr Flexibilität in der Entwicklung erlaubt.

CSS Grid Layout bringt viele Vorteile

Das Grid Layout ist ein Hilfsraster, der die Anordnung von Elementen erleichtert. Das System ist nicht neu und wurde bereits im Mittelalter verwendet, um bei der Abschrift von Büchern eine Einheitlichkeit zu gewährleisten. Mit dem Tabellen-Layout oder den CSS-Frameworks wurde in den Anfängen des Webdesigns versucht, Layouts etwas übersichtlicher zu gestalten. Allerdings waren diese Ansätze noch immer zu unübersichtlich. Dies lag vor allem daran, dass sie keine strikte Trennung von Bedienung, Layout und Inhalt erlaubten. Das CSS Grid Layout macht dies nun endlich möglich und es erlaubt sogar nachträgliche Änderungen im Grid-Container, was zu mehr Flexibilität führt.

Eine Lösung für nicht unterstützte Versionen

Obwohl das CSS Grid Layout viele Vorteile bringt, bleiben noch immer 30 Prozent an Browser-Versionen die nicht unterstützt werden. Um Grid bzw. Flexbox dennoch nutzen zu können, müssen Webdesigner ein Downgrade machen. Mit dem Überschreiben der Methoden können beispielsweise inline-block oder multiple-column dennoch verwendet werden und werden in nicht unterstützten Versionen auch entsprechend dargestellt. Diese sogenannten Fallbacks, die Designer integrieren müssen, werden von allen Browsern interpretiert und jene die das CSS Grid Layout nicht unterstützen stoppen automatisch beim Fallback. Browser, die Grid unterstützen übergehen den Fallback einfach und zeigen das definierte Grid Layout.

Doppelte Arbeit für den Einheitslook

Nutzer schätzen es, wenn sie - egal welches Endgerät bzw. Browser-Version sie nutzen - eine Seite optisch immer gleich aufgemacht ist. Lediglich bei mobilen Endgeräten wird bedingt durch die kleine Displaygröße ein anderer Look akzeptiert. Gegen die Existenz von Browser-Versionen die das CSS Grid Layout nicht unterstützen, können Webdesigner wenig unternehmen und es obliegt ihrer Entscheidung, ob sie den Einheitslook unterstützen. Wer jedoch auf die Features des CSS Grid Layouts angewiesen ist, dem bleibt die Arbeit von Fallbacks nicht erspart. Denn genau das ist, was Grid ausmacht - es ermöglicht Features, die vorher nicht nutzbar gewesen sind.

Polyfiller können Probleme verursachen

Polyfiller im Layout können zu einem Worst-Case-Erlebnis für Nutzer werden. Grid unterstützt JavaScript nicht, was für Nutzer zu endlosen Ladezeiten führen kann. Bei Browsern, die Grid nicht unterstützen, machen JavaScripts durchaus Sinn. Wer sich jedoch auf langsam kleiner werdenden Anteil nach nicht unterstützten Versionen konzentriert, der macht sich nur unnötig Arbeit. Die JavaScripts müssen nicht nur geschrieben, sondern auch ausführlich getestet werden, da sie anderenfalls erst recht Probleme verursachen können. Wer die Wahl hat, sollte daher darauf verzichten und das Grid Layout integrieren. Manchmal muss man hier auch den Kosten-Nutzen-Faktor bei der Entwicklung einer Webseite im Auge behalten und unnötiger Code ist auch immer eine unnötige Fehlerquelle, die dann wiederum Kosten verursacht.

Vor- und Nachteile abwägen

Der Einsatz von bestimmten Technologien ist in der Regel nicht immer ausschließlich mit Vorteilen verbunden. Im Falle von CSS Grid Layout werden die nicht unterstützen 30 Prozent lange Zeit für viel Gesprächsstoff bei Webentwicklern sorgen. Zukünftig gilt es für jedes einzelne Projekt abzuwägen, ob das CSS Grid Layout verwendet wird oder, ob es wirklich rentabel ist, für nicht unterstützte Versionen ein eigenes Layout zu machen. Bei bereits bestehenden Webprojekten können sich Entwickler die Entscheidung vereinfachen, indem Statistiken geführt werden, welche Nutzer mit welcher Browser-Version auf eine Webseite zugreifen. Nutzt nur eine verschwinden kleine Anzahl an Nutzern eine nicht unterstützte Version, kann man diese beim Design vernachlässigen. Lediglich wenn eine größere Anzahl an Nutzern nicht unterstützte Browser verwenden, sollte ein alternatives Design-Konzept in Betracht gezogen werden. Schwieriger ist es eine Entscheidung bei Projekten zu treffen, für die es noch keine bestehende Webpräsenz gibt. In diesem Fall spielen mehrere Faktoren eine Rolle und nicht zuletzt hängt diese Entscheidung auch vom Budget ab, das für ein Webprojekt zur Verfügung steht.

CSS als Zukunft

Wie die Zukunft der Webentwicklung aussehen wird, liegt unter anderem auch in den Händen der Entwickler. Wie viele Innovationen gab es in den vergangenen Jahrzehnten, die schneller in der Versenkung verschwunden sind, als sie überhaupt die Runde machen konnten. Das CSS Grid Layout bietet den Entwicklern die Möglichkeit sich endgültig von verstauben Layouts zu lösen und den Weg für weitere Entwicklungen zu ebnen. Sie haben es nun in der Hand, ob das CSS Grid Layout zu etablieren und damit auch nachhaltig das Design im Netz zu ändern. Das CSS Grid Layout gibt den Entwicklern neue Werkzeuge in die Hand, mit denen es möglich ist wieder zu experimentieren und etwas Neues zu schaffen. Das impliziert jedoch auch den Nutzern zu zeigen, welche Vorteile das Grid Layout hat und das geht nur durch den bewussten Einsatz des Layouts. Letztendlich hängt es von ihm ab, ob es eine breite Akzeptanz findet.