CSS Grid in IE: CSS Grid und der neue Autoprefixer

Im Teil 1 dieser Serie habe ich einige Missverständnisse entlarvt, die viele Leute bezüglich der CSS Grid-Implementierung im Internet Explorer (IE) haben. Dieser Artikel baut auf diesem Wissen auf. Es ist am besten, zuerst den Artikel zu lesen, wenn Sie dies noch nicht getan haben.

Heute werde ich das größte Missverständnis von allen ansprechen: dass die Verwendung der IE-Implementierung von CSS Grid extrem schwierig ist. Sie können CSS Grid jetzt sofort in IE verwenden, ohne sich um ein minderwertiges Fallback-Layout kümmern zu müssen. Es ist wirklich nicht so schwer.

Ein minderwertiges Fallback-Layout für IE an Kunden zu verkaufen, ist schwierig. Es ist besonders schwierig, wenn es sich um ein Intranet handelt, bei dem 90 % der Benutzer IE verwenden. Wenn Sie IE-Kompatibilität wünschen, müssen Sie sich zunächst damit abfinden, dass Sie nicht alle schicken Extras verwenden können, die in der modernen CSS Grid-Spezifikation zu finden sind. Lassen Sie sich davon aber nicht entmutigen, Sie wären erstaunt, wie viel IE11 bewältigen kann, besonders mit etwas Hilfe von Autoprefixer.

Bevor ich zu weit ins Detail gehe, müssen Sie wissen, dass dies kein allgemeiner Artikel zum Thema "Wie man CSS Grid benutzt" ist. Dieser Artikel richtet sich an diejenigen, die CSS Grid verstehen, aber entweder zu viel Angst haben oder es nicht nutzen dürfen, dank IE.

Ich gehe davon aus, dass Sie bereits ein gutes Verständnis dafür haben, wie man CSS Grid in modernen Browsern verwendet. Wenn Sie sich nicht sicher sind, wie man CSS Grid benutzt, sehen Sie sich Rachel Andrews hervorragende CSS Grid Video-Tutorial-Serie an. Danach spielen Sie ein paar Level des Browser-Spiels Grid Garden, um praktische Erfahrungen mit CSS Grid zu sammeln. Sobald Sie die Grundlagen der Verwendung von CSS Grid in modernen Browsern verstanden haben, kommen Sie hierher zurück und lernen, wie Sie es so verwenden, dass identische Ergebnisse in IE10 und 11 erzielt werden.

Autoprefixer einrichten

Bevor Sie etwas anderes tun, sollten Sie Autoprefixer zum Laufen bringen. Autoprefixer ist ein Werkzeug, das verwendet wird, um automatisch browserabhängige CSS-Präfixe zu Ihrem CSS hinzuzufügen, damit Sie das nicht tun müssen. Es ist ein bisschen wie Babel, nur für CSS. (Wir haben hier auf CSS Tricks eine großartige Übersicht vom Ersteller von Autoprefixer.)

Wenn Sie Autoprefixer (oder ein beliebiges Build-Tool) noch nie zuvor verwendet haben, installieren Sie zuerst Node auf Ihrem Computer und folgen Sie dann diesem Leitfaden, um einen grundlegenden Workflow einzurichten. Der Teil des Leitfadens, der sich speziell mit Autoprefixer befasst, befindet sich hier. (Ich empfehle die Gulp-Einrichtung gegenüber Grunt, wenn Sie unsicher sind, welche Sie wählen sollen.)

Wenn Sie Autoprefixer bereits in Ihren Projekten verwenden, stellen Sie sicher, dass Sie es mit diesem Befehl auf die neueste Version aktualisieren

npm i autoprefixer@latest -D

Einige Funktionen, die in der neuesten Version von Autoprefixer verwendet werden, werden in PostCSS Version 5 nicht unterstützt. Das bedeutet, dass Sie möglicherweise auch Ihre Version von PostCSS auf mindestens Version 6 aktualisieren müssen. Bei Verwendung von Gulp bedeutet dies, dass Sie gulp-postcss auf mindestens v7.0.0 aktualisieren müssen. Bei Verwendung von Grunt müssen Sie möglicherweise grunt-postcss auf mindestens v0.9.0 aktualisieren.

Sobald Sie eine Umgebung eingerichtet haben, müssen Sie die Autoprefixer-Einstellung grid auf true setzen. Ohne diese Einstellung werden Sie nicht in der Lage sein, die coolen Dinge zu tun, die ich Ihnen gleich zeigen werde.

Update: In Version 9.3.1 können Sie CSS Grid-Übersetzungen aktivieren, indem Sie einfach einen Steuerkommentar zu Ihrer CSS-Datei hinzufügen. Erfahren Sie mehr darüber in Teil 4.

Die genaue Methode zum Aktivieren der Grid-Einstellung hängt stark davon ab, wie Sie Ihren Code kompilieren. Wenn Sie den Leitfaden verwendet haben, den ich zuvor verlinkt habe, hätten Sie diesen Codeausschnitt gesehen

var processorsArray = [
  // snipped for brevity
  require('autoprefixer')({ browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20']  })
];

WordPress konvertiert alle ">" Symbole in Code-Snippets in >. Es scheint keinen Weg zu geben, dies zu verhindern. Bitte behandeln Sie alle Instanzen von > in Code-Snippets als tatsächliche ">" Symbole.

Fügen Sie grid: 'autoplace' zu den Optionen hinzu, um das Präfixen von Grids zu aktivieren

var processorsArray = [
  // snipped for brevity
  require('autoprefixer')({ grid: 'autoplace', browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20']  })
];

Update: In Version 9.4.0 wurde begrenzte Autoplacement-Unterstützung in Autoprefixer eingeführt. Aus Gründen der Abwärtskompatibilität ist die neue empfohlene Einstellung für die Aktivierung von Grid-Übersetzungen jetzt grid: 'autoplace'. Ich habe alle Code-Snippets aktualisiert, um diese neue Empfehlung widerzuspiegeln.

Übrigens sind die Browser-Einstellungen im Tutorial ziemlich veraltet und werden weitaus mehr Präfixe ausgeben, als Sie tatsächlich benötigen. Allein die Angabe ">1%" bedeutet, dass Autoprefixer aufhört, Präfixe für einen Browser zu schreiben, wenn dieser veraltet ist. Es basiert die Browsernutzung auf globalen Browserdaten, die von caniuse.com bezogen werden.

Dies sind also die Autoprefixer-Einstellungen, die Sie verwenden sollten

var processorsArray = [
  require('autoprefixer')({ grid: 'autoplace', browsers: ['> 1%'] })
];

Nun zu den lustigen Sachen! 😃

Autoprefixer hat neue Superkräfte!

Sie haben vielleicht Rachel Andrews Artikel "Should I try to use the IE implementation of CSS Grid Layout?" gelesen. Dieser Artikel handelt von CSS Grid und dem Verständnis seiner Unterstützung in IE10 und 11. Es ist ein großartiger Artikel und sehr nützlich, um die Einschränkungen von IE zu verstehen. Es lohnt sich definitiv, ihn zu lesen, wenn Sie ihn noch nicht gesehen haben. Beachten Sie, dass er in Bezug auf die Informationen zu Autoprefixer **extrem veraltet** ist.

Autoprefixer hat sich seit Rachels IE11 CSS Grid-Artikel stark weiterentwickelt und unterstützt nun weitaus mehr CSS Grid-Übersetzungen. Schauen Sie sich diese neue, aktualisierte Version von Rachels Tabelle basierend auf Autoprefixer Version 8.6.4 an. Beachten Sie, dass fett gedruckte Einträge eine Änderung der Autoprefixer-Unterstützung im Vergleich zu Rachels Artikel darstellen.

CSS Grid-Eigenschaft	IE10-Implementierung	Autoprefixer?	Notizen
grid-template-columns	-ms-grid-columns	Ja
grid-template-rows	-ms-grid-rows	Ja
grid-template-areas	NA	Ja	Autoprefixer verwendet dies, um zu verstehen, wie das Grid aussieht, fügt aber keine zusätzlichen Eigenschaften hinzu.
grid-template	NA	Ja	Kurzschreibweise für grid-template-columns, grid-template-rows und grid-template-areas
grid-auto-columns	NA	Nein	IE unterstützt kein Auto-Placement
grid-auto-rows	NA	Nein	IE unterstützt kein Auto-Placement
grid-auto-flow	NA	Nein	IE unterstützt kein Auto-Placement
Grid	NA	Nein	Siehe dieses GitHub-Issue, warum dies nicht unterstützt wird
grid-row-start	-ms-grid-row	Ja1	Span-Syntax erfordert die Definition von grid-row-end
grid-column-start	-ms-grid-column	Ja1	Span-Syntax erfordert die Definition von grid-column-end
grid-row-end	NA	Ja1	grid-row-start muss definiert sein
grid-column-end	NA	Ja1	grid-column-start muss definiert sein
grid-row	NA	Ja1
grid-column	NA	Ja1
grid-area	NA	Ja2	Autoprefixer übersetzt den Grid-Bereich in Spalten-/Zeilenkoordinaten
grid-row-gap	NA	Ja3	Erzeugt zusätzliche Zeilen/Spalten in IE.
grid-column-gap	NA	Ja3	Erzeugt zusätzliche Zeilen/Spalten in IE.
grid-gap	NA	Ja3	Erzeugt zusätzliche Zeilen/Spalten in IE.
NA	-ms-grid-column-span	Ja	Übersetzt von grid-column-end und grid-area.
NA	-ms-grid-row-span	Ja	Übersetzt von grid-row-end und grid-area.
align-self	-ms-grid-row-align	Ja
justify-self	-ms-grid-column-align	Ja

Tabellen-Disclaimer

Diese werde ich später im Artikel ausführlicher behandeln

1. Autoprefixer kann keine negativen ganzen Zahlen präfixieren.
2. Jedes Grid-Element muss eindeutige Bereichsnamen haben.
3. Autoprefixer präfixiert grid-gap nur, wenn **sowohl** grid-template-areas **als auch** grid-template-columns definiert wurden. Es kann grid-gap auch nicht über Media Queries erben.

---

grid-template-areas ist Ihr neuer bester Freund

Wie Sie aus der aktualisierten (und wesentlich positiver aussehenden) Tabelle ersehen können, gibt es in Autoprefixer jetzt viele coole neue Funktionen. Die wichtigste davon ist die Unterstützung für grid-template-areas (und damit auch für grid-template). Durch die Unterstützung von grid-template-areas versteht Autoprefixer nun **genau**, wie Ihr Grid aussieht. Dies ebnete den Weg für Autoprefixer, auch (in begrenztem Umfang) grid-gap zu unterstützen.

Beachten Sie, dass Autoprefixer die Kurzschreibweise grid immer noch nicht unterstützt. Dies war eine bewusste Designentscheidung, über die Sie in diesem GitHub-Issue mehr erfahren können. Kurz gesagt ist die grid-Eigenschaft nicht nur eine Kurzschreibweise für die Templating-Einstellungen, sondern auch für die Auto-Placement-Einstellungen. Da IE kein Auto-Placement kann und die grid-template-Eigenschaft im Wesentlichen alles tun kann, was die grid-Eigenschaft kann (und was IE verarbeiten kann), wurde entschieden, dass die grid-Eigenschaft die Unterstützung nicht wert ist.

Als Rachel ihren Artikel schrieb, war dies die Art von Grid-Code, die Sie zur Unterstützung von IE schreiben mussten

/* IE-friendly source code 26 November 2016 */
/* Code needed to make Autoprefixer work properly */

.grid {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  grid-template-rows: 100px 10px 100px;
}

.cell-A {
  grid-column: 1;
  grid-row: 1;
}

.cell-B {
  grid-column: 3;
  grid-row: 1;
}

.cell-C {
  grid-column: 1;
  grid-row: 3;
}

.cell-D {
  grid-column: 3;
  grid-row: 3;
}

Jetzt können Sie stattdessen Code wie diesen schreiben

/* Today’s IE-friendly source code */
/* Autoprefixer can now make this code IE safe */

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "a   b" 100px
    "c   d" 100px /
    1fr  1fr;
}

.cell-A {
  grid-area: a;
}

.cell-B {
  grid-area: b;
}

.cell-C {
  grid-area: c;
}

.cell-D {
  grid-area: d;
}

Autoprefixer nimmt den obigen Code und übersetzt ihn für Sie in diesen wesentlich IE-freundlicheren Code

/* Autoprefixer’s IE-friendly translation */

.grid {
 display: -ms-grid;
 display: grid;
 grid-gap: 10px;
 -ms-grid-rows: 100px 10px 100px;
 -ms-grid-columns: 1fr 10px 1fr;
 grid-template:
   "a   b" 100px
   "c   d" 100px /
   1fr  1fr;
}

.cell-A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.cell-B {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: b;
}

.cell-C {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.cell-D {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: d;
}

Das Beste daran ist, dass Sie einfach die Eigenschaft grid-template oder grid-template-areas mit einer Media Query ändern können und Autoprefixer automatisch alle Grid-Zellkoordinaten für Sie aktualisiert.

/* Changing a grid-template with a media-query */

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

@media (min-width: 600px){
  .grid {
    /* Duplicating the grid-gap is no longer necessary as of Autoprefixer v9.1.1 */
    grid-gap: 10px;
    grid-template:
      "a   b   c" 100px
      "d   e   f" 100px /
      1fr  1fr 1fr;
  }
}

.cell-A {
  grid-area: a;
}

.cell-B {
  grid-area: b;
}

.cell-C {
  grid-area: c;
}

.cell-D {
  grid-area: d;
}

.cell-E {
  grid-area: e;
}

.cell-F {
  grid-area: f;
}

Das Obige wird in diesen IE-freundlichen Code übersetzt

/* Autoprefixer’s IE-friendly media query translation */

.grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-rows: 100px 10px 100px 10px 100px;
  -ms-grid-columns: 1fr 10px 1fr;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

@media (min-width: 600px) {
  .grid {
    /* Duplicating the grid-gap is no longer necessary as of Autoprefixer v9.1.1 */
    grid-gap: 10px;
    -ms-grid-rows: 100px 10px 100px;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
    grid-template:
      "a   b   c" 100px
      "d   e   f" 100px /
      1fr  1fr 1fr;
  }
}

.cell-A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.cell-B {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: b;
}

.cell-C {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.cell-D {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: d;
}

.cell-E {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: e;
}

.cell-F {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: f;
}

@media (min-width: 600px) {
  .cell-A {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  
  .cell-B {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  
  .cell-C {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  
  .cell-D {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  
  .cell-E {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  
  .cell-F {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
}

Die doppelte Media Query mag etwas unschön aussehen, aber ich versichere Ihnen, dass dies der bestmögliche Weg ist, wie Autoprefixer die Media Query-Übersetzung handhaben kann. Die neuen IE-Grid-Zellkoordinaten konnten nicht in dieselbe Media Query wie die Grid-Template-Definition eingefügt werden. Dies würde zu einem von zwei möglichen Ergebnissen führen.

Ein Ergebnis ist, dass die Standard-Grid-Zellpositionen die geänderten Positionen überschreiben würden, die in der Media Query angegeben sind. Dies würde dazu führen, dass die Media Query in IE keine Wirkung hat.

Das andere Ergebnis wäre, dass Autoprefixer *alle* Stile innerhalb der Media Query (ja, das schließt alle von Ihnen selbst geschriebenen Stile ein) an eine andere Stelle in der Stylesheet verschiebt, was potenziell zu schrecklichen CSS-Spezifitätsproblemen führen könnte. Mehr über die Überlegungen hinter dieser Entscheidung erfahren Sie im nun geschlossenen GitHub-Issue dazu.

Autoprefixer kann Sie immer noch nicht vor allem retten

Selbst Superman kann nicht jeden retten, und Autoprefixer ist keine Ausnahme. Während Autoprefixer viel von der Arbeit reduzieren kann, die für die IE-Kompatibilität unserer Grids erforderlich ist, kann er nicht alles beheben. Er kann nur Dinge übersetzen, die IE verstehen kann. Hier sind die vielen kritischen Dinge, die Sie beachten müssen, wenn Sie nicht wollen, dass Ihre Website eines Tages in IE geöffnet wird und Ihnen um die Ohren fliegt.

Grid Gap hat nur begrenzte Unterstützung

Wie Sie im letzten Beispiel vielleicht gesehen haben, kann grid-gap derzeit nicht über Media Queries vererbt werden. Wenn Sie grid-gap verwenden möchten, müssen Sie die grid-gap-Einstellung für **alle** Media Queries duplizieren, in denen Sie ein Grid-Template für dieses Grid definieren.

Update: Der Fehler bei der Vererbung von grid-gap über Media Queries wurde in Autoprefixer Version 9.1.1 behoben. Es ist jetzt sicher, grid-gap in Ihrem Standard-Grid-Template zu verwenden und die Lückeneinstellung dann in alle Ihre Media Query-Grid-Templates übernehmen zu lassen.

Das ist aber nicht das einzige Problem bei der Verwendung von grid-gap. Es wird von Autoprefixer nur unterstützt, wenn **sowohl** grid-template-areas **als auch** grid-template-columns definiert sind.

Autoprefixer fügt grid-gap-Unterstützung hinzu, indem es grid-template-areas verwendet, um zu verstehen, wie Ihr Grid aussieht. Dann nimmt es Ihre grid-template-columns und grid-template-rows Definitionen und fügt den grid-gap Wert zwischen jeder Zeile und Spalte ein, wodurch zusätzliche Zeilen und Spalten in IE erstellt werden.

Wenn Sie grid-gap allein ohne grid-template-areas verwenden, kann Autoprefixer nicht wissen, welche Zelle zu welchem Grid gehört. Ohne dieses kritische Wissen kann es die zusätzlichen Spalten und Zeilen, die IE benötigt, nicht sicher einfügen.

Das erklärt grid-template-areas, aber warum müssen wir auch grid-template-columns definieren? Sollte etwas wie das hier für Autoprefixer nicht genauso einfach zu übersetzen sein?

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-areas:
    "a  b  c"
    "d  e  f";
}

.cell-a {
  grid-area: a;
}

.cell-f {
  grid-area: f;
}

Zeilen und Spalten in CSS Grid haben standardmäßig den Wert auto, können also nicht Autoprefixer einfach etwas wie -ms-grid-columns: auto 20px auto 20px auto; hinzufügen? Das tut es für Zeilen, warum kann es das nicht auch für Spalten?

Nun, mein neugieriger Freund, ich habe in Teil 1 erklärt, dass auto in IE sich etwas anders verhält als auto in modernen Browsern. Wenn Spalten in IE auf auto gesetzt sind, schrumpfen sie immer auf den Wert von max-content. Moderne Grid-Spalten hingegen erweitern sich auf 1fr, wenn keine anderen fr-Einheiten in dieser Grid-Template-Deklaration verwendet werden. Diese Diskrepanz kann zu einem erheblichen Unterschied im Aussehen zwischen der modernen und der IE-Version eines Grids führen. Das Autoprefixer-Team war der Meinung, dass es zu gefährlich sei, Annahmen darüber zu treffen, daher haben sie grid-template-columns zu einer obligatorischen Einstellung gemacht, damit grid-gap wirksam wird.

Das erklärt also, warum Autoprefixer grid-gap nicht unterstützt, wenn grid-template-columns fehlt. Wenn auto sich in IE so anders verhält, warum unterstützt Autoprefixer dann grid-gap, ohne dass der Benutzer explizit grid-template-rows definieren muss? Ist das nicht genauso schlimm?

Nicht wirklich. Wenn Sie display: grid; auf etwas setzen, wächst seine Breite bis zur vollen Breite seines Containers. Seine Höhe schrumpft dagegen typischerweise auf die Höhe seines Inhalts. Dies ist natürlich nicht immer der Fall. Es gibt eine Reihe von Gründen, warum ein Grid höher als sein Inhalt sein kann. Wenn das Grid auch ein Flex-Item ist und der Flex-Container höher als das Grid ist, wäre das ein Grund dafür, dass das Grid höher als sein Inhalt ist. Im Allgemeinen, wenn keine anderen Kräfte im Spiel sind, ist ein Grid-Container immer so hoch wie sein Inhalt.

Da die Höhe eines typischen Grids die gleiche Höhe wie sein Inhalt hat, verhält sich auto in den meisten Fällen sowohl in IE als auch in modernen Browsern identisch. Es unterscheidet sich nur in der Funktionalität, wenn die Höhe des Grids die Höhe des Inhalts übersteigt. Für die beste Balance zwischen Benutzerkomfort und Browserkonsistenz traf das Autoprefixer-Team eine Entscheidung. Sie entschieden, dass die Unterstützung einer fehlenden grid-template-rows-Eigenschaft, aber nicht einer fehlenden grid-template-columns-Eigenschaft der beste Weg war, die grid-gap-Unterstützung zu handhaben.

Kein Auto-Placement! Kein Auto-Placement! Kein Auto-Placement!

Update: Obwohl IE immer noch kein Autoplacement unterstützt, wurde in Version 9.4.0 begrenzte Autoplacement-Unterstützung in Autoprefixer eingeführt. Wenn Sie diesen Abschnitt lesen, bedenken Sie, dass er zu einer Zeit geschrieben wurde, als absolut keine Autoplacement-Unterstützung verfügbar war.

Ich kann das gar nicht oft genug sagen. Das Wichtigste, woran Sie denken müssen, wenn Sie CSS Grid in IE verwenden, ist, dass **alles manuell** platziert werden muss. Sobald Sie anfangen, an Auto-Placement zu denken, wird Ihre Website in IE abstürzen. Ich habe eine Methode, um mit Grids umzugehen, die eine unbekannte Anzahl von Zellen haben. Das behandle ich in Teil 3 dieser Serie. Das Wichtigste, was Sie jetzt wissen müssen, ist, dass Sie CSS Grid nur dann in einer IE-freundlichen Weise verwenden sollten, wenn es eine bekannte Anzahl von Zellen für eine bekannte Anzahl von Zeilen und Spalten gibt.

Es ist dieser Mangel an Auto-Placement in IE, der den Zugriff auf Grid-Bereiche über Autoprefixer zu einem Segen macht. Anstatt alle Koordinaten manuell berechnen zu müssen, können Sie jede Zelle benennen und Autoprefixer die Berechnung für Sie durchführen lassen. Bei der Verwendung von Media Queries müssen Sie nur das Grid-Template neu definieren und Autoprefixer berechnet alle Koordinaten für Sie neu. Sie müssen selten Spalten oder Zeilen zählen. Das ist großartig!

Bereichsnamen müssen eindeutig sein

Update: Dieser Abschnitt ist jetzt veraltet. Autoprefixer 9.3.1 unterstützt doppelte Bereichsnamen. Lesen Sie mehr darüber in Teil 4 dieser Serie.

Die Fähigkeit, grid-template-areas zu verwenden, ist eine der größten Stärken von Autoprefixer, obwohl sie ihre Grenzen hat. Autoprefixer hat keinen Zugriff auf das DOM. Aus diesem Grund ist Autoprefixer vollständig darauf angewiesen, den Bereichsnamen zu verwenden, um zu verstehen, wo jede Zelle im Grid platziert werden muss. Dies kann zu Konflikten führen, wenn Sie denselben Bereichsnamen zweimal in derselben Stylesheet verwenden.

Hier ist ein kleines Beispiel. Früher in der Stylesheet hat Grid Alpha grid-template-areas: "delta echo". Später in der Stylesheet hat Grid Beta grid-template-areas: "echo delta". Wir sagen, unsere Grid-Zelle gehört zum Bereich echo... also, geht sie in Spalte 1 oder 2?

.grid-alpha {
  grid-template-areas: "delta  echo";
}

.grid-beta {
  grid-template-areas: "echo  delta";
}

.grid-cell {
  /* What column does .grid-cell go in? */
  -ms-grid-column: ???;
  grid-area: echo;
}

Moderne Browser wissen genau, in welche Spalte die Grid-Zelle platziert werden muss, weil sie Zugriff auf das DOM haben. Wenn die Zelle innerhalb von Grid Alpha platziert wird, geht sie in die erste Spalte. Wenn sie in Grid Beta platziert wird, geht sie in die zweite Spalte. Autoprefixer kann nur Ihr CSS lesen. Es hat keine Ahnung, ob die Grid-Zelle in Grid Alpha oder Grid Beta platziert wird. Alles, was es weiß, ist, dass die Grid-Zelle im Bereich "echo" platziert werden muss. Autoprefixer löst dieses Rätsel, indem es diejenige nimmt, die zuletzt in der Stylesheet vorkam. In diesem Fall wird Autoprefixer Grid Betas "echo delta" Bereichsdefinition berücksichtigen, da sie zuletzt vorkommt. Wenn Sie die Grid-Zelle in Grid Alpha platziert hätten, würde sie in modernen Browsern gut aussehen, aber in IE in der falschen Spalte platziert werden.

Das bedeutet auch, dass Sie die Strategie, einer Komponente einen einzigen bestimmten Bereichsnamen zu geben, der wiederholt referenziert wird, nicht wirklich verwenden können. Wenn Sie diesen Bereichsnamen in mehr als einer grid-template-areas-Eigenschaft referenzieren, wird IE definitiv kaputt gehen. Jeder einzelne Bereichsname in jedem einzelnen Grid in Ihrer Stylesheet muss eindeutig sein, sonst gerät Autoprefixer völlig aus der Rolle.

Der einfachste Weg, um sicherzustellen, dass jeder Bereichsname eindeutig ist, ist die Übernahme eines BEM-ähnlichen Ansatzes für die Benennung der Bereiche.

.grid-alpha {
  grid-template-areas: "grid-alpha__delta  grid-alpha__echo";
}

.grid-beta {
  grid-template-areas: "grid-beta__echo  grid-beta__delta";
}

.grid-cell {
  /* No more conflict :) */
  -ms-grid-column: 2;
  grid-area: grid-alpha__echo;
}

Das kann ziemlich umständlich sein, wenn es viele Spalten und Zeilen gibt. Sie möchten es vielleicht auf eine Abkürzung reduzieren. Je weniger umständlich Ihre Bereichsnamen sind, desto größer ist natürlich die Chance auf einen Konflikt.

.grid-alpha {
  grid-template-areas: "ga_delta  ga_echo";
}

.grid-beta {
  grid-template-areas: "gb_echo  gb_delta";
}

.grid-cell {
  -ms-grid-column: 2;
  arid-area: ga_echo;
}

Es gibt eine wichtige Ausnahme. Grid-Bereiche in Media Queries dürfen Duplikate anderer Bereiche sein, solange die in der Media Query definierten Bereichsnamen **dasselbe Element** ansprechen. Ohne diese Ausnahme wäre es unmöglich, die Grid-Bereiche basierend auf der Bildschirmgröße zu ändern. Das Wichtigste, was Sie sich merken müssen, ist, dass jedes Grid seine eigenen eindeutigen Bereichsnamen haben muss, die nicht mit anderen Grids geteilt werden dürfen.

@media (min-width: 600px) {
  .grid-one {
    grid-template-areas:
      "alpha bravo"
      "alpha charlie";
   }
}

@media (min-width: 900px) {
  .grid-one {
    /* This is fine */
    /* It is targeting the same element */
    grid-template-areas:
      "alpha bravo charlie";
  }
}

@media (min-width: 900px) {
  /* NOT FINE! */
  /* The "alpha" area is being reused on a different element! */
  .grid-two {
    grid-template-areas:
      "alpha delta";
  }
}

Autoprefixer hat eingeschränkte Spalten- und Zeilenüberspannungsunterstützung

Es gibt nur zwei Eigenschaften in der IE-Implementierung von CSS Grid, die Ihnen helfen, mehrere Spalten zu überspannen. Die wichtigste ist -ms-grid-column/row-span, die IE sagt, wie viele Spalten/Zeilen überspannt werden sollen. Die andere ist -ms-grid-column/row, die IE sagt, wo gezählt werden soll.

.grid-cell {
  -ms-grid-column-span: 2; /* number of cells to span */
  -ms-grid-column: 1; /* starting cell */
}

In modernen Browsern haben Sie Zugriff auf weitaus mehr Optionen.

Autoprefixer-freundlich

Von den modernen Methoden zur Überspannung mehrerer Zellen unterstützt Autoprefixer die folgenden vollständig. Sie können jede dieser Methoden gerne so oft verwenden, wie Sie möchten

Geben Sie eine Startlinie und die Anzahl der zu überspannenden Linien an (ähnlich wie bei IE)

.grid-cell {
  grid-column: 1 / span 2;
}

Geben Sie eine Endlinie an und spannen Sie dann rückwärts

.grid-cell {
  grid-column: span 2 / 3;
}

Geben Sie eine Startlinie und eine Endlinie direkt an

.grid-cell {
  grid-column: 1 / 3;
}

Geben Sie nur die Anzahl der zu überspannenden Zellen mit grid-column/row-end an. Denken Sie daran, dass IE kein Auto-Placement kann. Eine Startlinie muss immer noch irgendwo in der Stylesheet angegeben werden.

.grid-cell {
  /* Make sure you specify a starting line elsewhere */
  grid-column-end: span 2;
}

Geben Sie nur eine Startlinie an

.grid-cell {
  /* The short way */
  grid-column: 1;

  /* The more verbose way */
  grid-column-start: 1;
}

Autoprefixer-unfreundlich. Hier sind Drachen!

Hier stößt Autoprefixer an seine Grenzen. Die folgenden Methoden werden in modernen Browsern unterstützt, aber **nicht** von Autoprefixer. Dies liegt hauptsächlich daran, dass Autoprefixer keine Ahnung hat, zu welchem Grid die Grid-Zelle gehört, da er seine Entscheidungen nur auf der Grundlage dessen treffen kann, was in der Stylesheet steht.

Geben Sie eine Startlinie und die Anzahl der Zeilen vom Ende des expliziten Grids an, die überspannt werden sollen

.grid-cell {
  grid-column: 1 / -1;
}

Geben Sie sowohl die Start- als auch die Endlinie vom Ende des expliziten Grids an

.grid-cell {
  grid-column: -3 / -1;
}

Geben Sie nur die Anzahl der zu überspannenden Zeilen mit der Kurzschreibweise an (Issue in GitHub)

.grid-cell {
  /* Update: This is now supported as of Autoprefixer version 9.1.1 */
  grid-column: span 2;
}

Geben Sie nur einen rückwärts gerichteten Span an (IE kann nicht rückwärts spannen)

.grid-cell {
  grid-column-start: span 2;
}

Geben Sie nur eine Endlinie an (IE versteht end nicht und Autoprefixer weiß nicht, wo der Anfang ist)

.grid-cell {
  grid-column-end: 3;
}

Vermeiden Sie also im Grunde, vom Ende des Grids rückwärts zu zählen, und Sie werden keine Probleme haben. 😊

Verwenden Sie vorerst keine Zeilennamen

Eines der coolen Features moderner Grids ist die Benennung von Grid-Templates. Anstatt Zahlen zur Referenzierung einer Zeile zu verwenden, können Sie der Zeile einen Namen geben und diesen stattdessen referenzieren. Da Autoprefixer Grid-Bereiche unterstützt, würde man denken, dass es auch Zeilennamen unterstützt. Leider ist das nicht der Fall. Ab Version 8.6.4 unterstützt Autoprefixer keine Zeilennamen (zum Zeitpunkt des Schreibens). Aber keine Sorge! Es ist nicht unmöglich zu unterstützen (zumindest nicht vollständig), es war einfach keine hohe Priorität für sie. Wenn Sie Zeilennamen in Ihren Grids lieben, lassen Sie es sie in der GitHub-Issue dazu wissen. Posten Sie Ihre Anwendungsfälle und es wird die Priorität der Funktion sicherlich erhöhen. Versuchen Sie in der Zwischenzeit, stattdessen Grid-Bereiche zu verwenden.

Beachten Sie, dass, wenn es implementiert wird, jeder Zeilenname in Ihrer Stylesheet eindeutig sein muss. Wie bei Grid-Bereichen wüsste Autoprefixer nicht, welcher Zeilenname zu welchem Grid gehört. Der einzige Weg, wie es das erkennen kann, ist, wenn jeder Zeilenname in der Stylesheet eindeutig ist (außer Media Queries).

Update: Da doppelte Bereichsnamen jetzt unterstützt werden, gibt es keinen Grund, warum doppelte Zeilennamen nicht ebenfalls unterstützt werden könnten.

Sie müssen immer noch testen!

IE verhält sich meistens gut, solange Sie alle bisher behandelten Regeln befolgen. Dennoch kann IE manchmal unvorhersehbar sein. Vor kurzem habe ich ein Grid-Element zu einem vertikal fließenden Flex-Container gemacht und dabei einen seltsamen Bug in IE11 festgestellt. Die Spaltenbreite war auf minmax(min-content, 350px) gesetzt, aber IE behandelte min-content in diesem Fall wie max-content. Das hat das Layout komplett zerstört. Die Änderung auf minmax(0, 350px) hat das Problem behoben. Das zeigt, dass die Grid-Implementierung von IE nicht ganz perfekt ist.

Es gibt auch Zeiten, in denen Sie versehentlich vergessen, Grid-Zellen explizit zu platzieren. Wir erstellen unsere Grids in modernen Browsern, weil sie die schönen Grid-Entwicklungswerkzeuge haben (besonders Firefox). Moderne Browser haben jedoch Auto-Placement. Das bedeutet, dass Sie vielleicht auf halbem Weg beim Erstellen Ihres Grids sind, dann für einen Moment weggerufen werden. Wenn Sie zu Ihrem Schreibtisch zurückkehren, sehen Sie, dass das Layout in Ihrem Browser wunderschön aussieht, aber Sie vergessen völlig, dass Sie noch keine Grid-Zellen explizit platziert haben. Sie widmen sich der nächsten Aufgabe, unwissend, dass Sie IE in einem völlig kaputten Zustand hinterlassen haben.

Keines dieser Probleme wird sich zeigen, bis Sie Ihre Website in IE11 testen. Jedes Mal, wenn Sie ein Grid in einem modernen Browser gut aussehen lassen, öffnen Sie es in IE und überprüfen Sie doppelt, ob es immer noch so aussieht, wie Sie es erwarten.

Autoprefixer-Steuerkommentare

Trotz aller Bemühungen von Autoprefixer gibt es immer noch seltene Fälle, in denen es so scheint, als würde Autoprefixer Sie mehr behindern als unterstützen. Wenn Sie sich jemals in einer Situation befinden, in der es einfacher wäre, Autoprefixer Ihren Code nicht übersetzen zu lassen, können Sie Autoprefixer mit sogenannten "Steuerkommentaren" deaktivieren.

Update: Ab Autoprefixer 9.3.1 wird empfohlen, die neuen Grid-Steuerkommentare zu verwenden, um CSS Grid-Übersetzungen zu aktivieren und zu deaktivieren. Mehr über diese Steuerkommentare erfahren Sie in Teil 4.

autoprefixer: off

Dieser Steuerkommentar deaktiviert Autoprefixer-Übersetzungen für den gesamten CSS-Block. Er wird weder vor noch nach der Stelle, an der der Kommentar platziert wird, Stile prefixen.

/* Input CSS */

.normal-behavior {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.off-behavior {
  display: grid;
  /* autoprefixer: off */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.normal-behavior-again {
  display: grid;
}

/* Output CSS */

.normal-behavior {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.off-behavior {
  display: grid;
  /* autoprefixer: off */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.normal-behavior-again {
  display: -ms-grid;
  display: grid;
}

autoprefixer: ignore next

Wenn Sie eher ein Skalpell als einen Vorschlaghammer benötigen, ist der Steuerkommentar /* autoprefixer: ignore next */ besser für Sie geeignet. „Ignore next“ überspringt die nächste CSS-Deklaration, anstatt den gesamten CSS-Block zu ignorieren.

/* Input CSS */

.normal-behavior {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.ignore-next-behavior {
  display: grid;
  /* autoprefixer: ignore next */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Output CSS */

.normal-behavior {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.ignore-next-behavior {
  display: -ms-grid;
  display: grid;
  /* autoprefixer: ignore next */
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Pre-Prozessor-Kommentare

Wenn Sie Sass (oder einen anderen CSS-Präprozessor) in Ihrem Projekt verwenden, verwenden Sie nicht die Methode mit den doppelten Schrägstrichen (//) zum Schreiben dieser Kommentare. Sass entfernt diese Kommentare, bevor Autoprefixer die Chance hat, den Code zu übersetzen.

/* Input SCSS */

.normal-behavior {
  display: grid;
}

.failed-off-behavior {
  // autoprefixer: off
  display: grid;
}

.successful-off-behavior {
  /* autoprefixer: off */
  display: grid;
}

/* Output CSS */

.normal-behavior {
  display: -ms-grid;
  display: grid;
}

.failed-off-behavior {
  display: -ms-grid;
  display: grid;
}

.successful-off-behavior {
  /* autoprefixer: off */
  display: grid;
}

Fassen wir zusammen!

Nach all dem ist hier die Liste aller Dinge, die Sie sich merken müssen, um ein IE11 CSS Grid-Meister zu werden.

• Verwenden Sie die neueste Version von Autoprefixer (npm i autoprefixer@latest -D).
• Schalten Sie die Autoprefixer Grid-Einstellung ein.
• Versuchen Sie nicht, automatische Platzierung zu verwenden, jede Zelle muss manuell platziert werden.
• Verwenden Sie grid-template-areas als Ihre primäre Methode zur Platzierung von Grid-Zellen.
• Verwenden Sie grid-template (nicht grid) als Abkürzung.
• Verwenden Sie keine doppelten Bereichsnamen, es sei denn, sie befinden sich innerhalb einer Media Query, die dasselbe Element anspricht. (Kein Problem in 9.3.1)
• Sie können grid-gap verwenden, solange Sie sowohl grid-template-areas als auch grid-template-columns definieren.
• Wenn Sie mehrere Spalten und Zeilen überspannen, vermeiden Sie es, rückwärts vom Ende des Grids zu zählen. Autoprefixer versteht Ihre Grids nicht gut genug, um dies zu unterstützen.
• Vermeiden Sie vorerst die Verwendung von Zeilennamen. Geben Sie diesem GitHub-Issue einen Daumen nach oben, wenn Sie sie verwenden möchten.
• Verwenden Sie die Steuerkommentare /* autoprefixer: off */ und /* autoprefixer: ignore next */, um zu verhindern, dass Autoprefixer bestimmte Teile Ihres Stylesheets übersetzt, die Probleme verursachen.
• Vergessen Sie nicht zu testen!

…und aus Teil 1

• IE hat tatsächlich ein implizites Grid.
• IE unterstützt Wiederholungsfunktionalität.
• minmax(), min-content und max-content werden alle nativ unterstützt.
• fit-content() wird nicht nativ unterstützt, aber Sie können dies mit auto und max-width Einstellungen umgehen.
• IE auto ist nicht gleich auto in modernen Browsern.

Wenn Sie Fragen haben oder Ihnen dies wirklich geholfen hat, lassen Sie es mich in den Kommentaren wissen! Ich bin auch @Daniel_Tonon auf Twitter. 😁

Als Nächstes…

In Teil 3 werde ich behandeln, wie man ein vollständig responsives, auf Flexbox basierendes Grid in IE11 erstellt. Diese Flexbox-Technik repliziert sogar die grid-gap-Funktionalität!