CSS Grid in IE: Gängige Irrtümer über IE Grid entlarvt

Dies ist der erste Teil einer dreiteiligen Serie darüber, wie Sie CSS Grid so verwenden können, dass es nicht nur in modernen Browsern, sondern auch im Internet Explorer (IE) funktioniert. Stellen Sie sich vor, Sie schreiben CSS Grid-Code, ohne ein Fallback-Layout schreiben zu müssen! Viele von uns denken, das sei eine ferne Zukunft, die noch viele Jahre entfernt ist. Wenn nur der IE11 Sie von dieser Realität abhält (prüfen Sie caniuse.com), dann haben Sie Glück! Dieser Tag ist heute! Oder zumindest wird er es sein, wenn Sie diese Serie gelesen haben. 😉

Zu Beginn wird dieser erste Teil einige gängige Irrtümer über die native Grid-Implementierung von IE11 entlarven.

In Teil 2 werde ich den Mythos widerlegen, dass die Verwendung von CSS Grid in IE11 super schwierig ist. Keine miesen Fallback-Layouts mehr für IE11!

In Teil 3 zeige ich Ihnen eine coole Flexbox-Technik, mit der ich einfache Auto-Placement-Grids erstelle. Diese gefälschten Auto-Placement-Grids haben feste, pixelbasierte Gitterabstände, die perfekt mit denen übereinstimmen, die mit echtem CSS Grid erstellt wurden. Sie funktionieren perfekt im IE11, sind vollständig responsiv und das Aktualisieren ihrer Spaltenanzahl basierend auf der Bildschirmbreite erfordert nur die Änderung eines einzigen Breitenwertes in einer Media Query.

Genug der Einleitungen, fangen wir mit diesen Irrtümern an!

IE hat ein implizites Grid

Im CSS Grid ist das explizite Grid dasjenige, das Sie manuell mit allen grid-template-* Eigenschaften definieren. Das implizite Grid ist, wie der Browser die Platzierung von Zellen handhabt, die außerhalb des expliziten Grids platziert werden.

Bei der Verwendung von CSS Grid in modernen Browsern ist das implizite Grid ziemlich offensichtlich, da das Grid weiterhin automatisch Rasterzellen erstellt und platziert, ohne dass Sie diese definieren müssen. IE hat kein Auto-Placement, daher ist es leicht anzunehmen, dass IE kein implizites Grid hat. Das tut es aber – Sie müssen nur bei der Verwendung etwas expliziter sein.

Sehen Sie den Pen Explizites vs. implizites Grid von Daniel Tonon (@daniel-tonon) auf CodePen.

Der häufigste Anwendungsfall für die Verwendung des impliziten Grids von IE ist die automatische Erzeugung von Zeilen. Wenn alle Zeilen im Grid ihre Höhe durch den Inhalt diktiert haben sollen, müssen Sie sich nicht die Mühe machen, -ms-grid-rows (die IE-Version von grid-template-rows) zu definieren. Die Zeilen werden in IE automatisch für Sie generiert, wenn Sie Ihre Rasterzellen platzieren.

Wichtig zu beachten ist jedoch, dass moderne Browser Zugriff auf die Eigenschaften grid-auto-rows und grid-auto-columns haben. Diese Eigenschaften ermöglichen es Ihnen, die Größenbestimmung von Zeilen und Spalten im impliziten Grid zu steuern. IE hat kein Konzept für diese Eigenschaften. Die impliziten Zeilen und Spalten von IE können nur als auto dimensioniert werden.

IE hat Repeat-Funktionalität

Keine Angst! Sie müssen 1fr 20px nicht 12 Mal für Ihr wertvolles 12-Spalten-Grid aufschreiben (IE hat keine native Gitterabstandsunterstützung). IE wird mit voller repeat()-Funktionalität ausgeliefert. Sie versteckt sich nur hinter einer anderen Syntax.

Die moderne Syntax für die Wiederholung von Werten in Spalten und Zeilen lautet repeat(12, 1fr 20px), was bedeutet: „Wiederhole das Muster 1fr 20px 12 Mal.“ Die IE-Version der Syntax lautet (1fr 20px)[12]. Die IE-Version hat die gleiche Funktionalität, nur eine andere Syntax.

/* This grid... */
.grid-one {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
}

/* ...is exactly the same as this grid: */
.grid-two {
  display: -ms-grid;
  display: grid;

  /* IE repeat syntax */
  -ms-grid-columns: 1fr (20px 1fr)[3];

  /* Modern repeat syntax */
  grid-template-columns: 1fr repeat(3, 20px 1fr);
}

Abgesehen von der Syntax gibt es nur einen Unterschied zwischen der Art und Weise, wie moderne Browser und IE die repeat()-Funktion implementieren. Moderne Browser haben die Schlüsselwörter auto-fit und auto-fill zur Funktion hinzugefügt. Da IE Auto-Placement nicht unterstützt, sind diese Schlüsselwörter für IE ziemlich bedeutungslos, vermeiden Sie sie daher.

minmax() wird nativ in IE unterstützt

minmax() ist eine CSS-Funktion zur Größenbestimmung, die (zumindest im Moment) exklusiv für CSS Grid ist. Ihre Funktionalität ist ziemlich selbsterklärend. Sie übergeben ihr einen Mindestwert im ersten Parameter und einen Höchstwert im zweiten Parameter. Die Spalte oder Zeile, auf die dies angewendet wird, kann dann zwischen diesen beiden Werten schrumpfen und wachsen, wenn der verfügbare Platz zu- und abnimmt. Versuchen Sie, das unten stehende Codepen zu vergrößern, um es in Aktion zu sehen.

Sehen Sie den Pen minmax() Demo von Daniel Tonon (@daniel-tonon) auf CodePen.

Viele Leute denken, dass dieses großartige kleine Feature in IE nicht unterstützt wird, aber es wird tatsächlich nativ unterstützt. Ich vermute, das liegt an mindestens einem der beiden folgenden Gründe:

1. Es ist eine coole Funktionalität und sie denken, IE kann keine coolen Dinge wie diese haben, weil IE schlecht ist.
2. Jeder hat diesen magischen Code-Schnipsel gesehen und seine Träume wurden zerstört, als er feststellte, dass er in IE nicht funktionieren würde: grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );.

(Wenn Sie diesen Schnipsel noch nie gesehen haben, sehen Sie sich dieses kurze Video an und bereiten Sie sich darauf vor, dass Ihr Verstand gesprengt wird.)

Da der magische Schnipsel in IE nicht funktioniert, gehen die Leute wahrscheinlich davon aus, dass nichts im Schnipsel IE-freundlich ist. In Wirklichkeit ist der einzige Grund, warum der Code-Schnipsel in IE nicht replizierbar ist, dass IE das auto-fit-Schlüsselwort und Auto-Placement nicht unterstützt.

min-content und max-content sind beide zu 100% IE-freundlich

IE hat volle native Unterstützung für beide Werte min-content und max-content.

min-content ist ein Schlüsselwortwert, der die Spalte/Zeile auf die kleinstmögliche Breite schrumpfen lässt, auf die sich der Inhalt schrumpfen lässt. Wenn er auf eine Spalte angewendet wird, bedeutet dies im Wesentlichen, dass die Spalte die Breite des längsten Wortes hat.

Sehen Sie den Pen min-content Demo von Daniel Tonon (@daniel-tonon) auf CodePen.

max-content hingegen lässt die Spalte/Zeile auf die maximal mögliche Breite ihres Inhalts wachsen und nicht weiter. Wenn Sie jemals white-space: nowrap auf einen großen Textabschnitt gesetzt haben, wird dies sehr ähnlich aussehen.

Sehen Sie den Pen max-content Demo von Daniel Tonon (@daniel-tonon) auf CodePen.

Ich hatte nicht erwartet, dass IE diese Werte unterstützt, hauptsächlich aufgrund von Grund eins unter minmax(). Ich war angenehm überrascht, als ich bei der Recherche zur IE11 Grid-Unterstützung widerlegt wurde. In Kombination mit minmax() gibt es nicht viele Grids, die ein moderner Browser erstellen kann, die IE nicht handhaben kann (solange die Grids kein Auto-Placement beinhalten).

fit-content() ist nicht IE-freundlich, aber...

fit-content() funktioniert in IE nicht nativ. 😢

Glücklicherweise ist fit-content() eine Art Kurzschrift-Syntax und wenn Sie sie ausgeschrieben schreiben, unterstützt IE sie doch! 🎉

Der ausgeschriebene Weg ist, auto (oder genauer gesagt, minmax(min-content, max-content)) auf die Spalte/Zeile in der Grid-Vorlage anzuwenden und dann max-width: [Wert] auf das Kind-Element zu setzen.

Hier ist ein Beispiel, wie Sie die Funktion fit-content() in einem modernen Browser verwenden könnten

/* This is not IE-friendly */
.grid {
  display: grid;
  grid-template-columns: 100px fit-content(300px) 1fr;
}

.cell {
  grid-column: 2;
}

Was fit-content() hier im Grunde sagt, ist: „Lassen Sie die mittlere Spalte die maximale Breite ihres Inhalts einnehmen (d. h. ihren max-content-Wert), bis sie 300 Pixel erreicht, danach wächst sie nicht weiter, es sei denn, sie wird dazu gezwungen.“

Sehen Sie den Pen fit-content() modernes Beispiel 1 von Daniel Tonon (@daniel-tonon) auf CodePen.

Wenn Sie dies auf einem Mobilgerät lesen, sehen Sie die Codepen-Demos dieses Abschnitts im Querformat, um ein besseres Verständnis zu erhalten.

Um IE in gewisser Weise ähnlich verhalten zu lassen, müssten Sie den Code wie folgt schreiben:

/* IE-friendly `fit-content()` alternative */
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100px auto 1fr;
  grid-template-columns: 100px auto 1fr;
}

.cell {
  -ms-grid-column: 2;
  grid-column: 2;
  max-width: 300px;
}

Sehen Sie den Pen fit-content IE Hack von Daniel Tonon (@daniel-tonon) auf CodePen.

Beachten Sie, dass dies keine narrensichere Methode zur Replikation von fit-content() in IE ist. Wenn es eine andere Rasterzelle mit Inhalt gibt, der mehr Breite einnimmt als die max-width-Einstellung der anderen Zelle, wächst die Rasterspalte, um die größere Zelle zu passen. Sie wird nicht bei 300 Pixeln begrenzt, wie es bei fit-content() der Fall wäre.

Sehen Sie den Pen Kaputter fit-content Hack von Daniel Tonon (@daniel-tonon) auf CodePen.

Vergleichen Sie das mit der modernen Funktion fit-content(), die die gesamte Spalte begrenzt

Sehen Sie den Pen fit-content() modernes Beispiel von Daniel Tonon (@daniel-tonon) auf CodePen.

Wo wir gerade dabei sind, sollte ich einen gängigen Irrtum bezüglich der Funktion fit-content() klären. Der Irrtum ist, dass die Spalte (oder Zeile), auf die sie angewendet wird, niemals den Wert überschreiten kann, den Sie der Funktion angegeben haben. Das ist nicht der Fall. Wenn eine Spalte auf eine Breite von fit-content(300px) eingestellt ist und eine Rasterzelle innerhalb dieser Spalte auf eine Breite von 400px eingestellt ist, beträgt die Spaltenbreite 400px, nicht 300px, wie viele Leute erwarten.

Sehen Sie den Pen Kaputtes modernes fit-content von Daniel Tonon (@daniel-tonon) auf CodePen.

IE auto != Modern auto

Der Wert auto in IE verhält sich etwas anders als auto in modernen Browsern. In IE entspricht auto strikt minmax(min-content, max-content). Eine Spalte oder Zeile, die in IE auf auto gesetzt ist, kann niemals kleiner als min-content schrumpfen. Sie kann auch niemals größer als max-content wachsen.

Moderne Browser behandeln den Wert auto etwas anders. Zum größten Teil, wenn der Wert allein verwendet wird, behandeln sie auto immer noch wie minmax(min-content, max-content). Es gibt jedoch einen kleinen, aber kritischen Unterschied: auto kann in modernen Browsern durch die Eigenschaften align-content und justify-content gestreckt werden. IE erlaubt das nicht.

Wenn auto zur Größenbestimmung von Spalten in einem modernen Browser verwendet wird, verhält sich auto eher wie 1fr, wenn nicht genügend Inhalt vorhanden ist, um die Spalte zu füllen. IE nicht. IE schrumpft die Spalte immer auf die Größe von max-content.

Wenn Sie also diesen Code haben, der Ihr Grid definiert

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
  grid-template-columns: auto auto;
}

Sie erhalten in modernen Browsern Folgendes:

…und das in IE:

Ok, die Version des modernen Browsers sieht dem ähnlich, was wir bekommen, wenn wir 1fr verwenden. Können wir dann minmax(min-content, 1fr) für IE verwenden? Das wird es doch wie in modernen Browsern dehnen, oder?

Ja, aber dann stoßen wir auf dieses Problem:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(min-content, 1fr) minmax(min-content, 1fr);
  grid-template-columns: auto auto;
}

Moderne Browser

IE

Nebenbei bemerkt, minmax(min-content, 1fr) ist im Wesentlichen 1fr und 1fr und entspricht nicht auto. Ich habe auch minmax(min-content, 100%) in IE ausprobiert, aber das führte nur zum gleichen Grid wie die Verwendung von 1fr. Soweit ich das beurteilen kann, ist es nicht möglich, die Auto-Funktionalität moderner Browser in IE zu replizieren.

Es gibt jedoch einen weiteren kritischen Unterschied zwischen IE und modernen Versionen des auto-Werts. Da die IE-Version von auto explizit minmax(min-content, max-content) entspricht, kann auto nicht in minmax()-Ausdrücken verwendet werden. minmax() kann nicht innerhalb einer anderen minmax()-Funktion verwendet werden, daher ist auto disqualifiziert.

Moderne Browser sind etwas nuancierter. Sie erkennen, dass auto in verschiedenen Kontexten unterschiedliche Bedeutungen haben kann. Wenn es allein verwendet wird, entspricht es im Wesentlichen minmax(min-content, max-content), jedoch mit der zusätzlichen Fähigkeit zu strecken. Wenn es als Maximalwert verwendet wird, ist auto identisch mit max-content. Wenn es als Minimalwert verwendet wird, entspricht es im Wesentlichen min-content.

Wenn Sie jetzt schwören, auto nie wieder in Ihren Grid-Vorlagen zu verwenden, sollten Sie das überdenken. Es gibt nur drei Umstände, unter denen auto zwischen modernen Browsern und IE unterschiedlich verhält. Diese sind:

1. auto wird in grid-template-columns ohne eine fr-Einheit in derselben Deklaration verwendet.
2. auto wird in grid-template-rows ohne eine fr-Einheit in derselben Deklaration verwendet und die Höhe des Grids ist größer als die Höhe seiner Rasterzellen.
3. auto wird in einer minmax()-Funktion verwendet.

Das ist alles! Das sind die einzigen Fälle, in denen auto in IE anders verhält als in modernen Browsern. auto ist viel einfacher zu schreiben als minmax(min-content, max-content), daher lohnt es sich nicht, es wegen ein paar kleiner Browser-Inkonsistenzen, die leicht zu vermeiden sind, zu verdammen.

(Update) IE Grid funktioniert nicht bei display: inline Elementen

Wenn Sie <span>- oder <a>-Elemente als Rasterzellen in Ihrem Grid verwenden, werden Sie überrascht sein, wenn Sie im IE testen und Ihr Grid nicht wie erwartet aussieht. Alle Ihre Block-Level-Elemente (z. B. <p>, <div>, <ul> usw.) scheinen im Grid wie erwartet zu funktionieren, aber Ihre Inline-Elemente (z. B. <span>, <a>, <label> usw.) nicht.

Leider kann IE Grid display: inline-Elemente nicht korrekt in ein Grid platzieren. Sowohl <span>- als auch <a>-Elemente sind in Browsern standardmäßig auf display: inline gesetzt. Machen Sie sich aber keine Sorgen, Sie können dieses Problem in IE leicht beheben, indem Sie dem Inline-Element explizit display: block zuweisen.

Sehen Sie den Pen
Inline-Grid-Elemente funktionieren nicht in IE von Daniel Tonon (@daniel-tonon)
auf CodePen.

Standardmäßig sind HTML5-Elemente wie <main>, <header> und <footer> in Browsern normalerweise auf display: block gesetzt. Da diese Elemente jedoch nach der Veröffentlichung von IE11 erschienen sind, erkennt IE11 sie nicht. Nicht erkannte Elemente werden in nicht unterstützenden Browsern auf das Äquivalent von <span>-Elementen zurückgesetzt. Das bedeutet, wenn sie zu Grid-Elementen werden, funktionieren sie in IE standardmäßig nicht.

Sie können diese modernen Elemente wie erwartet zum Laufen bringen, indem Sie ihnen explizit display: block zuweisen. Alternativ können Sie normalize.css zu Ihrem Projekt hinzufügen, das dies für Sie tut. Es wird auch viele andere kleine Dinge tun, die Ihre Entwicklungserfahrung angenehmer machen.

Was haben wir gelernt?

• IE hat ein implizites Grid.
• IE unterstützt die Repeat-Funktionalität.
• minmax(), min-content und max-content werden alle nativ unterstützt.
• fit-content() wird nicht unterstützt, aber Sie können es mit auto und max-width Einstellungen umgehen.
• IE auto ist nicht gleich auto in modernen Browsern.
• IE Grid funktioniert nicht bei display: inline Elementen.

Geben Sie die Grids aber noch nicht auf. Es gibt noch viele Dinge, die Sie wissen müssen, bevor Sie IE Grids sicher in Ihre Websites implementieren können. Bleiben Sie unbedingt bei Teil 2! Ich werde Ihnen alles zeigen, was Sie wissen müssen, um Websites für IE und moderne Browser nur mit CSS Grid sicher zu erstellen. Und das Beste daran: Es gibt keine Notwendigkeit mehr für miese Fallback-Layouts!