Steffen Voß - Technologie & Gesellschaft

CSS Grid : Endlich bekommt CSS vernünftige Layout-Möglichkeiten

Screenshot von CSS mit CSS Grid
Screenshot von CSS mit CSS Grid

Steffen Voß

WebDesignerinnen und WebDesigner aufgepasst: Endlich kann CSS, was CSS schon immer hätte können sollen! Mit CSS Grid kannst Du Deine Layouts aufbauen, ohne Umwege wie Tabellen, Frames oder die div-Monster heutzutage. Es gibt in letzter Zeit wenig Techniken, die mich sofort begeistern. CSS Grid ist eine davon.

Eigentlich sollte eine Webseite so funktionieren:

  1. Ich habe Inhalte.
  2. Das HTML gibt den Inhalten die Struktur. Es markiert, was die Überschrift ist, was ein Absatz ist, was die Navigation ist, was der Haupt-Inhalt der Seite ist und was Zusatzinformationen sind.
  3. Das CSS definiert, wie die HTML-Elemente aussehen und wie und wo sie angezeigt werden sollen.

Tabellen, Frames, divs…

Bisher mussten wir aber immer noch Krücken nutzen, um dem Browser klar zu machen, wo Inhalte angezeigt werden. Ganz früher hatten wir Tabellen und wir haben die Inhalte in die verschiedenen Zellen der Tabellen gesetzt. Dann haben wir die Seite in Frames aufgeteilt. Heute setzen nutzen wir exzessiv div-Tags, um sicher zu gehen, dass die Elemente richtig gruppiert sind und nebeneinander erscheinen.

divs haben aber überhaupt nichts mit der Struktur des HTML-Dokuments zu tun. Wir benötigen sie nur für die Darstellung. Mir war das schon immer suspekt und ich habe versucht so gut wie möglich die semantischen Tags zu nutzen. Dank HTML5 gibt es davon inzwischen eine ganze Menge.

Wer sich aber nicht komplett selbst damit herumschlagen wollte, ob das Webdesign in allen Browsern gut aussieht und funktioniert, hat dann doch auf Frameworks wie Bootstrap zurückgegriffen. Spätestens dann musste man wieder mit lauter divs arbeiten.

Jetzt kommt CSS Grid

CSS enthält inzwischen eine Lösung, die von allen Browsern, außer denen von Microsoft unterstützt wird: CSS Grid. Mit CSS Grid kann man mit ein paar einfachen CSS Anweisungen ein beliebiges HTML-Objekt in Zeilen, Spalten und Zellen aufteilen. Im CSS – nicht im HTML, wie früher mit den Tabellen-Layouts. Den Zellen kann ich dann im CSS Namen geben und per CSS den HTML-Elementen sagen, in welchen Zellen sie erscheinen sollen. Das ist sooo viel einfacher als sich dieser Schwachsinn mit divs und floats.

CSS Grid in der Praxis

Ich hab mir mein neues Theme für kaffeeringe.de mit CSS Grid gebaut. Zugegeben: Es ist ohnehin ein schlichtes Design und ein Blog hat nur Blog-Artikel. Das ist noch nicht die Meisterklasse. Trotzdem habe ich einen Vorgeschmack bekommen, wie super CSS Grid funktioniert.

Der Vortrag von Morten Rand-Hendriksen auf dem WordCamp Paris hat mich dazu inspiriert und ich musste das einfach ausprobieren!

Morten Rand-Hendriksen schlägt vor, mit einem kleinen, mobilen Layout zu starten und dann die verschiedenen größeren Layouts nach und nach hinzuzufügen. So habe ich das dann gemacht. Es gibt die kleine, mobile Version und eine für Bildschirme mit mehr als 980 Pixeln Breite. Für all das war viel weniger CSS nötig. Das fängt natürlich schon einmal damit an, dass ich kein Bootstrap einbinden musste. 60 Zeilen für ein Reset-CSS, das die Browser-Styles zurücksetzt, 250 Zeilen für das mobile Basis-Layout und 130 Zeilen CSS für das große Layout.

Ein kleiner Cheat

Okay. Ich habe dann doch noch ein kleines CSS-Framework eingebunden – für das Kommentar-Formular. Denn einen Vorteil haben Frameworks wie Bootstrap: Man muss sich auch über das Aussehen von ganz vielen Elementen keine Gedanken mehr machen. Und Formulare zu designen, macht mit keinen Spaß. Das Framework „Formanizr“ von André Firchow macht das ganz angenehm, wie ich finde.

Microsoft Edge und der Internet Explorer

Erfunden hat CSS Grid offenbar Microsoft, erzählt Morten Rand-Hendriksen. Microsoft nutzt das wohl in Windows für alles mögliche. Die anderen Browserhersteller haben sich dann aber auf einen anderen Standard geeinigt, so dass Microsoft jetzt mit seinen Browsern mal wieder hinterher hinkt. Morten Rand-Hendriksen empfiehlt, den Microsoft-Browser einfach die mobile Seite auszuliefern.

So habe ich das jetzt auch gemacht. Im CSS teste ich, ob der Browser kann, was alle Browser können – außer denen von Microsoft. Edge und Internat Explorer bekommen die mobile Seite in einer festen Breite angezeigt. Dadurch fehlt die rechte Spalte. Da stehen aber auch nur Zusatzinfos. Die Artikel funktionieren auch so.

Das coole an dieser Lösung: Sollte Microsoft seine Browser irgendwann nachrüsten, bekommen die dann automatisch das richtige Layout ausgeliefert. Dann muss niemand mehr diese CSS-Frameworks nutzen, nur um Layouts so umzusetzen, wie es schon immer hätte sein sollen: Mit einer konsequenten Trennung von Inhalt, Struktur und Layout.

Links

Kommentare

Wilma456
Wilma456:

War das nicht der Aprilscherz von Heise Online? https://www.heise.de/ix/meldung/Webseiten-Layout-mit-CSS-Grids-3672722.html

15.8.2017 um 20:10
Steffen Voß
Steffen Voß:

Nein. 😉

16.8.2017 um 10:07
Andreas Weggel
Andreas Weggel:

Etwa 66,65% volle Unterstützung bei den verwendeten Browsern ist mir etwas zu wenig. Da bleibe ich lieber bei flexbox . Damit kann man auch recht problemlos arbeiten

http://caniuse.com/#feat=css-grid

16.8.2017 um 13:58
Steffen Voß
Steffen Voß:

@Andreas: Prinzipiell hast Du recht. Trotzdem kann man sich ja schon mit dem beschäftigen, was absehbar Standard wird. Dazu musst Du jeweils sehen, was denn das Drittel ist, das Grid noch nicht unterstützt:

Opera Mini. Opera insgesamt hat auf meinem Blog einen Anteil von 1%
Internet Explorer/Edge. Die Microsoft-Browser haben bei mir einen Anteil von ca. 14% – 1% Edge und 13% Internet Explorer 9!! Ich weiß, dass der Internet Explorer 9 der Standard-Browser bei Windows7 ist. Aber: Der Internet Explorer 9 ist von 2010!

Ey, Microsoft soll das Internet endlich mal ernst nehmen. Ich habe keine Lust in meinem privaten Blog allzu große Rücksicht auf Microsofts faule Release-Politik zu nehmen. Seit fast 20 Jahren schlage ich mich mit den Schwächen des IE herum. Irgendwas reichts mal.

IE-Besucher bekommen deswegen das zu sehen, was alle mobilen Nutzer zu sehen bekommen. Was mobil gut ist, kann auf dem Desktop nicht sooo schlecht sein.

Diese Abwägung habe ich für kaffeeringe.de getroffen. Für andere Seiten würde ich unter Umständen anders entscheiden. Das ist ja kein Dogma 😉

16.8.2017 um 16:49
Steffen Voß
Steffen Voß:

Ich seh gerade, dass die Browser-Anteile bei mir sogar relativ repräsentativ sind: https://www.stetic.com/de/market-share/browser/

Ich schließ also nicht 33% sondern nur 12% User vom vollen Erlebnis aus. 😉

16.8.2017 um 17:06

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Möchtest Du per E-Mail benachrichtigt werden, wenn Dir hier jemand antwortet?