CSS Grid Layout Spec 2 > Spec 1 Transpiler mit Sass

Ich muss ja zugeben, als ich vor fünf Jahren das erste mal was von CSS Grids gehört hab, hab ich noch gedacht „Noch ein Display Mode, jetzt kommt man doch erst langsam in den Genuss von Flexbox“. Gut das Ding war auch von Microsoft, da ist man eh schon innerlich auf Abwehrhaltung. Aber mit der Zeit wurde es doch interessanter, aber dann kamen halt wieder die Gedanken, wegen der Browser-Kompatibilität. Aber seit ein paar Wochen schreit das Netz ja „Hurra“, ja alle Browser sind jetzt grün, also die aktuellsten Versionen. Ich blieb erstmal skeptisch, bis ich am Wochenende das Video gesehen hab.

Ich denke Morten Rand-Hendriksen hat genau das richtige gesagt, was für mich wichtig war. Progressive Enhancement, Browser die es nicht können, können den Inhalt ja immer noch darstellen. Ich war also angefixt, also fing ich an zu testen. Es folgten viele „Aaaaaahs“ und „Ooooohs“, gefolgt von einigen „WTF ist das Geil!“. Template Area hat es mir angetan, im Geiste fing ich an Layouts im Grid Layout aufzubauen, was ich alles beachten muss um alle Vorteile auszukosten, nie wieder Helper und Grouping Divs im Markup. Und im Hinterkopf war der Gedanke „IE und Edge können das ja auch, waren ja die ersten mit CSS Grid“. Zu meiner Schande muss ich zugeben, ich hab es vorher auch nicht ausprobiert, alleine weil ich mich kenne. Wenn ich was gut finde und dann nicht nutzen kann, werde ich nölig und maulig :D

Also IE Test folgte am nächsten Tag und meine Laune passte sich dem Sommerlichen Wetter an, regnerisch mit der Aussicht auf Gewitter. Tja da war er wieder mein guter alter Freund, Internet Explorer mit seinem Nachfolger auf der Kante. Beide versagt, oder war ich das? Ich mit meiner leichtgläubigen und sehr enthusiastischen Art. Es folgte das Studium, was IE und Edge im Grid Bereich können und was sie nicht gebacken bekommen.

Should I try to use the IE implementation of CSS Grid Layout?

Ja ich war traurig, die für mich besten Features wie grid-gap, grid-template-area und grid-area gehen gar nicht mit IE und Edge (ab Version 16 soll das mit Edge aber auch kein Problem mehr sein). Na Toll! Frustlevel 100, da war das Thema durch. Durch die ganzen Boxen toben und für MS Browser die grid-row und grid-column setzen war mir dann irgendwie zu blöd. Vor allem wenn mir dann noch einfällt ich hätte gerne ein Abstand zwischen den Spalten, dann müsste ich für die MS Browser Spalten zwischen die Spalten bauen. Na vielen dank aber auch! Gedanklich wieder abgeschrieben „Ach was Flexbox tut es doch auch“.

Nun ich wäre nicht ich, wenn es mir keine Ruhe lassen würde, es ist wie die juckende Stelle am Gaumen, es hört nicht auf. Also hingesetzt und nachgedacht. Wie wäre es wenn ich mit Sass einen Transpiler baue? Ich schreibe Spec 2 und für MS Browser wird das in Spec 1 übersetzt. Bei der Gelegenheit konnte ich https://github.com/kittn/generator-kittn eine neue „Browser Detection“ spendieren, denn dieses mal brauch ich Edge und dazu die jeweiligen Versionsnummer (https://github.com/lancedikson/bowser), da ab Edge16 ja alles besser laufen soll, brauch ich für IE11 bis Edge 15 eine Fallback-Class.

Columns und Rows

An sich ist der Fallback für grid-template-columns und grid-template-rows harmlos. In der Regel würde Autoprefixer sich darum kümmern. Nur was mach ich wenn ich Gaps einbauen will. Dann werden aus drei Spalten auf einmal fünf Spalten, da man das Gap mit Zwischenräumen generieren muss. Das Mixin für Rows und Columns generiert dabei einmal für Spec 2 und einmal für Spec 1 (in dem Fall dann mit optionalen Zwischenräumen).

Auf Shorthands wie repeat(3, 1fr) muss man im Mixin verzichten.

.wrapper {
   @include grid-columns(10px 250px 1fr 50px 100px);
   @include grid-rows(10px 1fr);
 }

Area Matrix

Da ich die Template Areas noch weiter verarbeiten muss, brauch ich diese in einer Map. Das Mixin hier macht aber erstmal nichts besonderes, es baut aus der Map die Template-Areas für Spec 2 fähige Browser.

$gridAreaMap: (
  row1: ('logo', 'nav', 'nav', 'nav'),
  row2: ('logo', 'empty', 'search', 'search')
);
@include grid-matrix($gridAreaMap);

Grid Area

Das obere Mixin ist für Spec 1 jetzt nicht wichtig, wichtiger ist die Area Map die wir mit dem folgenden Mixin aufgreifen. Das Mixin macht dabei nichts anderes, als anhand des Area Namens, die entsprechenden Colum und Row Line Numbers aus der Map zu picken und daraus dann die Koordinaten für Spec 1 fähige Browser zu generieren. Das ganze mit Optionalen Span (wenn die Box größer ist als eine Column / Row) und wenn ein Gap aktiv ist die Koordinaten entsprechend anzupassen.

.logo {
  @include grid-area(logo, $gridAreaMap, true, true);
  -ms-grid-row-align: center;
}

Ergibt dann:

.logo {
  grid-area: logo;
  -ms-grid-row-align: center; 
}
.old-grid-spec .logo {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3; 
}

Wie man sieht ist das relativ einfach, muss sich weniger um IE / Edge sorgen und hat dennoch die Vorteile von der aktuellen Spezifikation.

Bevor ich das vergesse, ich verwende noch https://github.com/at-import/SassyLists um die Listen zu bearbeiten.