Endlich bekommt CSS vernünftige Layout-Möglichkeiten

Web­De­si­gne­rin­nen und Web­De­si­gner auf­ge­passt: End­lich kann CSS, was CSS schon immer hät­te kön­nen sol­len! Mit CSS Grid kannst Du Dei­ne Lay­outs auf­bau­en, ohne Umwe­ge wie Tabel­len, Frames oder die div-Mons­ter heut­zu­ta­ge. Es gibt in letz­ter Zeit wenig Tech­ni­ken, die mich sofort begeis­tern. CSS Grid ist eine davon.

Eigent­lich soll­te eine Web­sei­te so funktionieren:

1. Ich habe Inhalte.
2. Das HTML gibt den Inhal­ten die Struk­tur. Es mar­kiert, was die Über­schrift ist, was ein Absatz ist, was die Navi­ga­ti­on ist, was der Haupt-Inhalt der Sei­te ist und was Zusatz­in­for­ma­tio­nen sind.
3. Das CSS defi­niert, wie die HTML-Ele­men­te aus­se­hen und wie und wo sie ange­zeigt wer­den sollen.

Tabellen, Frames, divs…

Bis­her muss­ten wir aber immer noch Krü­cken nut­zen, um dem Brow­ser klar zu machen, wo Inhal­te ange­zeigt wer­den. Ganz frü­her hat­ten wir Tabel­len und wir haben die Inhal­te in die ver­schie­de­nen Zel­len der Tabel­len gesetzt. Dann haben wir die Sei­te in Frames auf­ge­teilt. Heu­te set­zen nut­zen wir exzes­siv div-Tags, um sicher zu gehen, dass die Ele­men­te rich­tig grup­piert sind und neben­ein­an­der erscheinen.

divs haben aber über­haupt nichts mit der Struk­tur des HTML-Doku­ments zu tun. Wir benö­ti­gen sie nur für die Dar­stel­lung. Mir war das schon immer suspekt und ich habe ver­sucht so gut wie mög­lich die seman­ti­schen Tags zu nut­zen. Dank HTML5 gibt es davon inzwi­schen eine gan­ze Menge.

Wer sich aber nicht kom­plett selbst damit her­um­schla­gen woll­te, ob das Web­de­sign in allen Brow­sern gut aus­sieht und funk­tio­niert, hat dann doch auf Frame­works wie Boot­strap zurück­ge­grif­fen. Spä­tes­tens dann muss­te man wie­der mit lau­ter divs arbeiten.

Jetzt kommt CSS Grid

CSS ent­hält inzwi­schen eine Lösung, die von allen Brow­sern, außer denen von Micro­soft unter­stützt wird: CSS Grid. Mit CSS Grid kann man mit ein paar ein­fa­chen CSS Anwei­sun­gen ein belie­bi­ges HTML-Objekt in Zei­len, Spal­ten und Zel­len auf­tei­len. Im CSS – nicht im HTML, wie frü­her mit den Tabel­len-Lay­outs. Den Zel­len kann ich dann im CSS Namen geben und per CSS den HTML-Ele­men­ten sagen, in wel­chen Zel­len sie erschei­nen sol­len. Das ist sooo viel ein­fa­cher als sich die­ser Schwach­sinn mit divs und floats.

CSS Grid in der Praxis

Ich hab mir mein neu­es The­me für kaffeeringe.de mit CSS Grid gebaut. Zuge­ge­ben: Es ist ohne­hin ein schlich­tes Design und ein Blog hat nur Blog-Arti­kel. Das ist noch nicht die Meis­ter­klas­se. Trotz­dem habe ich einen Vor­ge­schmack bekom­men, wie super CSS Grid funktioniert.

Der Vor­trag von Mor­ten Rand-Hen­drik­sen auf dem Word­Camp Paris hat mich dazu inspi­riert und ich muss­te das ein­fach ausprobieren!

Mor­ten Rand-Hen­drik­sen schlägt vor, mit einem klei­nen, mobi­len Lay­out zu star­ten und dann die ver­schie­de­nen grö­ße­ren Lay­outs nach und nach hin­zu­zu­fü­gen. So habe ich das dann gemacht. Es gibt die klei­ne, mobi­le Ver­si­on und eine für Bild­schir­me mit mehr als 980 Pixeln Brei­te. Für all das war viel weni­ger CSS nötig. Das fängt natür­lich schon ein­mal damit an, dass ich kein Boot­strap ein­bin­den muss­te. 60 Zei­len für ein Reset-CSS, das die Brow­ser-Styl­es zurück­setzt, 250 Zei­len für das mobi­le Basis-Lay­out und 130 Zei­len CSS für das gro­ße Layout.

Ein kleiner Cheat

Okay. Ich habe dann doch noch ein klei­nes CSS-Frame­work ein­ge­bun­den – für das Kom­men­tar-For­mu­lar. Denn einen Vor­teil haben Frame­works wie Boot­strap: Man muss sich auch über das Aus­se­hen von ganz vie­len Ele­men­ten kei­ne Gedan­ken mehr machen. Und For­mu­la­re zu desi­gnen, macht mit kei­nen Spaß. Das Frame­work „For­ma­nizr“ von André Firch­ow macht das ganz ange­nehm, wie ich finde.

Microsoft Edge und der Internet Explorer

Erfun­den hat CSS Grid offen­bar Micro­soft, erzählt Mor­ten Rand-Hen­drik­sen. Micro­soft nutzt das wohl in Win­dows für alles mög­li­che. Die ande­ren Brow­ser­her­stel­ler haben sich dann aber auf einen ande­ren Stan­dard geei­nigt, so dass Micro­soft jetzt mit sei­nen Brow­sern mal wie­der hin­ter­her hinkt. Mor­ten Rand-Hen­drik­sen emp­fiehlt, den Micro­soft-Brow­ser ein­fach die mobi­le Sei­te auszuliefern.

So habe ich das jetzt auch gemacht. Im CSS tes­te ich, ob der Brow­ser kann, was alle Brow­ser kön­nen – außer denen von Micro­soft. Edge und Inter­nat Explo­rer bekom­men die mobi­le Sei­te in einer fes­ten Brei­te ange­zeigt. Dadurch fehlt die rech­te Spal­te. Da ste­hen aber auch nur Zusatz­in­fos. Die Arti­kel funk­tio­nie­ren auch so.

Das coo­le an die­ser Lösung: Soll­te Micro­soft sei­ne Brow­ser irgend­wann nach­rüs­ten, bekom­men die dann auto­ma­tisch das rich­ti­ge Lay­out aus­ge­lie­fert. Dann muss nie­mand mehr die­se CSS-Frame­works nut­zen, nur um Lay­outs so umzu­set­zen, wie es schon immer hät­te sein sol­len: Mit einer kon­se­quen­ten Tren­nung von Inhalt, Struk­tur und Layout.

Links

• Grid Gar­den: Ein Spiel mit dem Du CSS Grid ler­nen kannst