Browser-Kompatibilität für CSS Grid Layouts mit einfachen Sass-Mixins

Laut einem Artikel von A List Apart über CSS Grid bricht „gerade jetzt eine neue Ära des digitalen Designs an“. Mit Flexbox und Grid können wir Layouts erstellen, die früher extrem schwierig, wenn nicht sogar unmöglich zu implementieren waren. Es gibt ein völlig neues System zur Erstellung von Layouts, insbesondere mit Grid. Wie bei den meisten Webtechnologien ist die Browserunterstützung jedoch immer ein Thema. Schauen wir uns an, wie wir die grundlegenden Aspekte von Grid in den Browsern, die es unterstützen, zum Laufen bringen können, einschließlich älterer Versionen von Internet Explorer, die eine ältere und leicht unterschiedliche Version von Grid unterstützten.

Der Verkaufsansatz

Wenn Sie caniuse.com besuchen, werden Sie sehen, dass CSS Grid in aktuellen Versionen aller wichtigen Browser außer Opera Mini unterstützt wird. Warum also nicht damit anfangen? Rachel Andrew schrieb ausführlich über die Frage, ob es „sicher zu verwenden“ ist oder nicht. Das ist es, vorausgesetzt, Sie sind mit einem Fallback-Szenario zufrieden, das nicht genau das repliziert, was Grid leisten kann.

Wenn Ihre Website in allen Browsern wirklich gleich aussehen muss (was auch immer das für Sie bedeutet), können Sie keine Funktionen verwenden, die nur durch die Verwendung von Grid verfügbar sind. Benutzen Sie in diesem Fall kein Grid Layout! Verwenden Sie Grid Layout, wenn Sie etwas erreichen wollen, das mit älteren Technologien nicht gut möglich ist.

Wenn Sie mit dem Erlernen von Grid beginnen möchten, hat Jen Simmons eine schöne Sammlung von Links und hier gibt es einen Referenzleitfaden.

Grid ist eine wesentliche Änderung am CSS-Layout. Es ist leistungsfähig, (ziemlich) einfach zu bedienen und, wenn Sie an Open Source arbeiten oder in einem Team, für Kollegen leicht zu lesen. In diesem Artikel werden wir uns ansehen, wie wir Grid-Code so kompatibel wie möglich gestalten können, einschließlich eines gewissen Grades an Fallback.

Die Sauce

Das Wichtigste, was wir in diesem Beitrag behandeln wollen, ist die Browserkompatibilität für die Grundlagen von CSS Grid. Wir werden behandeln, wie man ein übergeordnetes Grid-Element konstruiert und untergeordnete Grid-Elemente darin platziert.

Die Ausreißer werden Internet Explorer und Edge sein. Edge liefert gerade die moderne CSS Grid-Syntax aus und ist ein Evergreen-Browser, sodass wir uns letztendlich nicht zu sehr um Edge sorgen müssen, aber zum Zeitpunkt des Schreibens spielt es eine Rolle. IE 10 und 11 sind eher in der Zeit eingefroren, und beide unterstützen die alte Syntax.

Auch hier hat Rachel Andrew Informationen zu dieser alten Syntax, was sie unterstützt und wie man sie verwendet. Die alte Syntax unterstützt zum Beispiel nicht display: grid;, wir müssen display: -ms-grid; verwenden. Und ähnliche Präfixe gibt es für viele der Eigenschaften.

Selbst dann sind viele der Eigenschaften selbst nicht dieselben. Aber das ist in Ordnung. Die Unterschiede sind nicht so groß und wir können Hilfe von Sass bekommen. Die Rettung hier ist, dass wir nur Vendor-Präfixe für IE/Edge benötigen. Alle anderen Browser werden durch die „Standard“-Eigenschaften abgedeckt.

Zuerst definieren wir ein Grid-Elternteil mit einem Sass @mixin

@mixin display-grid {
  display: -ms-grid;
  display: grid;
}

.grid-parent {
  @include display-grid;
}

Hier ist eine Demo davon, die auch ein einfaches Grid definiert und layoutet

Sehen Sie den Pen CSS Grid Demo 1 von Farley (@farleykreynolds) auf CodePen.

Das ist hilfreich, aber das Grid selbst ist noch nicht mit dem alten CSS Grid-Stil kompatibel.

Als nächstes müssen wir die Unterschiede bei der Definition der Zeilen und Spalten des Grid-Elternteils behandeln. Lassen Sie uns das Grid etwas aufpeppen und es für die Kompatibilität über alle Browser hinweg definieren (z. B. durch die Verwendung von -ms-grid-columns zusätzlich zu grid-template-columns)

Sehen Sie den Pen CSS Grid Demo 2 von Farley (@farleykreynolds) auf CodePen.

Die -ms- Präfix-Eigenschaften funktionieren für IE/Edge und die nicht-präfixierten Eigenschaften funktionieren für andere Grid-unterstützende Browser. Dieses spezielle Demo gibt uns die folgenden Abmessungen:

• Eine Spalte mit 75px Breite.
• Eine Spalte, die den gesamten verbleibenden Platz einnimmt, nachdem die anderen Spalten berechnet wurden (1fr = 1 Bruchstück des verbleibenden Platzes nach der Berechnung anderer Elemente).
• Zwei Spalten mit jeweils 50px Breite.
• Drei Zeilen mit jeweils 1fr Höhe.

Schauen Sie sich den Wert für die Gruppierung in Zeile 19 an. IE und Edge haben keine Syntax zum Gruppieren einer Reihe von Zeilen oder Spalten gleicher Abmessungen. In allen anderen Browsern können wir dasselbe mit der Funktion repeat() erreichen.

repeat([number of columns or rows], [width of columns or height of rows])

Kein Vendor-Präfix kann uns hier helfen, wir müssen jede Spalte manuell mit der alten Syntax schreiben.

Jetzt haben wir ein Grid, das mit allen Browsern kompatibel ist, aber wir müssen uns immer noch um die Grid-Kinder kümmern. Der folgende Pen veranschaulicht, wie diese kompatibel gemacht werden können.

Sehen Sie den Pen CSS Grid Demo 2.5 von Farley (@farleykreynolds) auf CodePen.

Hier ist das Mixin, um die Grid-Elemente sowohl in der alten als auch in der neuen Syntax zu platzieren.

@mixin grid-child ($col-start, $col-end, $row-start, $row-end) {
  -ms-grid-column: $col-start;
  -ms-grid-column-span: $col-end - $col-start;
  -ms-grid-row: $row-start;
  -ms-grid-row-span: $row-end - $row-start;
  grid-column: #{$col-start}/#{$col-end};
  grid-row: #{$row-start}/#{$row-end};
}

.child {
  @include grid-child(2, 3, 2, 3);
}

Hier sind die wichtigsten Informationen über den Unterschied zwischen Eigenschaften für die Grid-Kinder in verschiedenen Browsern. In den meisten Browsern definieren Sie ein Grid-Kind durch die Grid-Linien, an denen es beginnt und endet. Grid-Linien sind die Linien, die zwischen den von Ihnen definierten Spalten und Zeilen existieren. Die Syntax sieht so aus:

grid-column-start: 3;
grid-column-end: 5;
/* or the shorthand version: */
grid-column: 3 / 5;

Dieses Element erstreckt sich über die Spaltenlinien 3 bis 5 in Ihrem Grid.

In IE und Edge definieren Sie ein Grid-Kind durch die Linie, auf der es beginnt, und wie viele Zeilen oder Spalten es überspannt (es gibt keine Kurzschreibweise wie im vorherigen Beispiel). Die Syntax sieht so aus:

-ms-grid-column: 3;
-ms-grid-column-span: 2;

Dieses Element beginnt auf Linie 3 und überspannt 2 Spalten. Die beiden obigen Code-Schnipsel erstellen effektiv dasselbe Element. Beachten Sie, dass 5 – 3 (aus dem ersten Schnipsel) 2 ergibt, was der Spalten-Span aus dem IE/Edge-Beispiel ist. Dies ermöglicht uns eine schnelle Berechnung in unserem @mixin und die Gewinnung aller benötigten Informationen aus vier Zahlen. Die Subtraktion in den Zeilen 17 und 19 setzt Ihre Span-Nummer für IE/Edge.

Die Verwendung von @include grid-element; ermöglicht es Ihnen, ein Grid-Kind für jeden Browser mit nur vier Zahlen zu definieren: Spaltenstart und -ende sowie Zeilenstart und -ende.

Nun haben wir Grid-Elternteile und -Kinder, die für alle Browser funktionieren.

Nachteile und Fallbacks

Es ist eine leider Realität, dass nicht alle Browser CSS Grid unterstützen und dass die alte Syntax nicht alles von der modernen Syntax unterstützt. Zum Beispiel sind grid-gap und grid-auto-rows oder grid-auto-columns sehr nützliche Eigenschaften in der modernen Syntax, für die es kein Äquivalent in der alten Syntax gibt.

Manchmal können Sie @supports zur Hilfe nehmen. @supports funktioniert ähnlich wie eine Media Query, wobei CSS innerhalb angewendet wird, wenn es übereinstimmt.

Das kann jedoch sehr knifflig werden, da @supports in IE nicht unterstützt wird. Das schafft ein Rätsel, wenn Sie Funktionen wie grid-auto-rows oder grid-gap verwenden möchten, um Teile des Layouts zu automatisieren, da Sie nun drei Szenarien haben: moderne Grid-Unterstützung, alte Grid-Unterstützung mit @supports, alte Grid-Unterstützung ohne @supports.

@supports (display: -ms-grid) {
  /* This will apply in Edge (old syntax), but not IE 10 or 11 */
}

Für die alte Syntax müssen Sie Ihre Grid-Kinder platzieren und ihre Ränder explizit festlegen, damit das CSS von IE erkannt wird, was die Notwendigkeit für automatische Platzierung oder grid-gap in anderen Browsern aufhebt.

Der folgende Pen ist eine Art Sammelsurium, aufgrund des Problems der @supports-Kompatibilität. Sie können sehen, wie grid-auto-rows funktioniert und wie die Abstände für IE/Edge festgelegt werden, wo grid-gap nicht funktioniert. Nochmals, wenn Sie IE unterstützen müssen, kann die Notwendigkeit, Werte explizit festzulegen, die Notwendigkeit von Eigenschaften, die Layoutstile automatisch festlegen, aufheben.

Sehen Sie den Pen Grid Demo 3 von Farley (@farleykreynolds) auf CodePen.

Die Eigenschaft grid-auto-rows generiert automatisch aufeinanderfolgende Zeilen einer angegebenen Höhe, wenn sich die Spalten füllen. Sie können damit im Pen spielen, indem Sie weitere divs hinzufügen. Eine weitere Zeile wird jedes Mal hinzugefügt, wenn Sie die Anzahl der divs über ein Vielfaches von drei (der Anzahl der Spalten) erhöhen.

Die Eigenschaft grid-gap verwandelt die Linien zwischen Ihren Grid-Kindern im Wesentlichen in Ränder. Sie können ihren Wert mit allen üblichen CSS-Größeneinheiten wie rem, em, Pixel usw. festlegen. Im obigen Demo setzen die Eigenschaften, die nth-child beinhalten, Ränder, die den Rand-Effekt von grid-gap für IE und Edge replizieren. Es ist nicht allzu schwierig, dies bei einfachen Grids zu berücksichtigen, aber Sie können sehen, wie es bei fortgeschritteneren oder flexibleren Grids schnell aus dem Ruder laufen könnte.

Diese beiden Eigenschaften und andere können als Grundlage für sehr leistungsfähige Layouts dienen. Wenn Sie für die Unterstützung von IE und Edge verantwortlich sind, wird es auf die Entscheidung hinauslaufen, ob Ihr Projekt den Code rechtfertigt, der zur Berücksichtigung dieser erforderlich ist. Es ist auch wahr, dass Websites nicht unbedingt in allen Browsern gleich aussehen müssen. Und da Grid-Layouts so einfach zu konstruieren sind, sind sie wahrscheinlich die zusätzliche Zeit wert.

Ich denke, es lohnt sich, einige Zeit darüber nachzudenken, ob Ihr Projekt von CSS Grid profitieren würde und die @supports-Regel zu verwenden, wenn dies der Fall ist.

Fazit

CSS Grid verändert die Art und Weise, wie Layouts im Web konstruiert werden und wie sie funktionieren. Browserunterstützung wird wahrscheinlich immer ein Problem für Webtechnologien sein, aber die Rettung hier ist, dass es für CSS Grid wirklich nicht schlecht ist. Und selbst dann sind die Unterschiede in unserem Code leicht zu berücksichtigen. CSS Grid-Layouts sind großartig und leistungsfähig und mit ein wenig Hilfe von Tools wie Sass können sie auch kompatibel sein.