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:
- Ich habe Inhalte.
- 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.
- 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!
Erst wenn Du das Video startest, werden Daten an YouTube übermittelt. Siehe Datenschutzerklärung
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
- Grid Garden: Ein Spiel mit dem Du CSS Grid lernen kannst
Schreibe einen Kommentar