CSS-Grid-in IE: Debunking Common IE Grid Missverständnisse

0
14

Dies ist die erste in einer dreiteiligen Serie alles über die Verwendung von CSS-grid-in einer Weise, dass arbeiten nicht nur in modernen Browsern, aber auch in Internet Explorer (IE). Stellen Sie sich dem schreiben von CSS-grid-code, ohne zu schreiben, eine fallback-layout! Viele von uns denken, dass dies einem weit entfernten Zukunft, die viele Jahre entfernt ist. Wenn das einzige, was hält Sie zurück, dass die Realität IE11 (check caniuse.com), dann sind Sie im Glück! Dieser Tag ist heute! Oder zumindest wird es sein, wenn Sie fertig sind der Lektüre dieser Serie. 😉

Artikel-Serie:

  1. Debunking Common IE Grid Missverständnisse (Dieser Beitrag)
  2. CSS-Grid und der neue Autoprefixer (Kommt Bald!)
  3. Faking eine automatische Platzierung raster mit Lücken (Kommt Bald!)

Um zu beginnen, in diesem ersten Teil geht, zu entlarven einige häufige Missverständnisse rund um IE11 native-grid-Implementierung.

In Teil 2 werde ich mir Schlag den Deckel der Mythos, dass die Verwendung von CSS-grid in IE11 ist super schwer. Nicht mehr beschissen fallback-layouts für den IE11!

In Teil 3 zeige ich Euch einen coolen flexbox-Technik, die ich verwenden für die Erstellung von einfachen auto-Platzierung Netze. Diese gefälschte auto-Platzierung Netze haben Feste pixel-basierten grid Lücken und raster Lücken im line-up perfekt mit denen gemacht werden könnte, dass mit der eigentlichen CSS-grid. Außer, in diesem Fall, Sie arbeiten perfekt im IE11, sind voll ansprechbar, und aktualisieren Ihre Spalte zählen, basierend auf der Bildschirmbreite, erfordert nur das ändern eines einzigen Wertes in einem media-query.

Das ist genug, intro, lässt sich auf diese Missverständnisse!

DH hat einen impliziten grid

In der CSS-raster, die explizite grid ist die eine, die Sie manuell definieren, die mit allen raster-Vorlage -* – Eigenschaften. Die implizite raster ist wie der browser übernimmt die Platzierung der Zellen, die sich außerhalb der expliziten raster.

Bei der Verwendung von CSS-grid in modernen Browsern, die impliziten grid ist ziemlich offensichtlich, da das raster weiter zu erstellen und platzieren Sie raster-Zellen automatisch auf neue Zeilen, ohne Sie definieren zu müssen. Also die nicht die automatische Platzierung, so ist es leicht anzunehmen, dass der IE nicht über eine implizite raster. Tut es aber — Sie müssen nur etwas expliziter, wenn es um die Verwendung es.

Finden Sie den Stift, Explizite vs. implizite raster von Daniel Tonon (@daniel-tonon) auf CodePen.

Der häufigste Anwendungsfall für die Verwendung von IE implizite raster verwenden, um erstellen Sie Ihre Zeilen für Sie. Wenn Sie möchten, dass alle Zeilen im raster, um Ihre Höhe bestimmt durch die Höhe Ihrer Inhalte, die Sie nicht brauchen, um die Mühe zu definieren -ms-grid-rows (die IE-version von grid-template-rows). Die Zeilen werden automatisch für Sie erzeugt im IE, wenn Sie Ihre grid-Zellen.

Eine wichtige Sache zu beachten ist jedoch, dass moderne Browser haben Zugriff auf die Eigenschaften grid-auto-Reihen und grid-auto-columns. Diese Eigenschaften können Sie Steuern, wie bearbeitet der browser die Größe von Zeilen und Spalten in der impliziten grid. IE hat kein Konzept für diese Eigenschaften. IE implizite Zeilen und Spalten kann immer nur so bemessen sein als auto.

IE hat wiederholen-Funktionalität

Fürchtet Euch nicht! Es gibt keine Notwendigkeit zu schreiben, 1fr 20px 12 mal für Ihre wertvollen 12-Spalten-raster (ALSO nicht native grid-gap unterstützen). IE kommt pre-verpackt mit voller wiederholen () – Funktionalität. Es ist nur versteckt hinter einer anderen syntax.

Die moderne syntax für wiederholte Werte in den Spalten und Zeilen wiederholen(12, 1fr 20 px) mit der Bedeutung “wiederholen Sie die 1fr 20px Muster 12 mal.” Die IE-version der syntax ist (1fr 20px)[12]. Die IE-version hat die gleiche Funktionalität, nur eine andere syntax.

/* Dieses Gitter… */
.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;
}

/* …ist genau das gleiche wie dieses raster: */
.grid-zwei {
display: -ms-grid;
display: grid;

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

/* Moderne Wiederholung syntax */
grid-template-columns: 1fr wiederholen(3, 20 px 1fr);
}

Andere als syntax, es gibt nur einen Unterschied zwischen der Art, modernen Browsern und dem IE Umsetzung der wiederholen () – Funktion. Moderne Browser Hinzugefügt, die auto-fit und auto-fill-keywords auf die Funktion. Da der IE nicht unterstützt auto-Platzierung, diese keywords sind ziemlich sinnlos, IE, so vermeiden, mit Ihnen.

minmax() ist nativ unterstützt IE

minmax() ist ein CSS-sizing-Funktion, die exklusiv von CSS-grid (im moment jedenfalls). Seine Funktionalität ist Recht selbsterklärend. Sie bieten es zu einem minimalen Wert in der ersten parameter und einen maximalen Wert im zweiten parameter übergeben. Die Spalte oder Zeile, dass diese angewendet wird, ist dann in der Lage zu schrumpfen und wachsen, zwischen den beiden Werten als der verfügbare Platz, es steigt und sinkt. Versuchen Sie, ändern der Größe der codepen unten, um ihn in Aktion zu sehen.

Finden Sie den Stift minmax() demo von Daniel Tonon (@daniel-tonon) auf CodePen.

Die Leute denken oft, dass dieses wunderbare kleine feature nicht unterstützt in IE, aber es ist in der Tat nativ unterstützt. Ich vermute, dies ist aufgrund mindestens einer der beiden Gründe:

  1. Es ist cool, Funktionalität, und Sie denken, DH nicht haben können Coole Dinge wie diese, weil IE Scheiße.
  2. Jeder hat gesehen, dass dieses Magische code-snippet und hatte Ihre Träume zerschlagen, wenn Sie realisiert, dass es nicht im IE funktioniert: grid-template-columns: wiederholen( auto-fit, minmax(250px, 1fr) );.

(Wenn Sie nie gesehen haben, dass snippet vor, sehen Sie dieses kurze video an und bereiten Sie Ihren Verstand geblasen.)

Da die Magie snippet funktioniert nicht im IE Menschen wohl davon ausgehen, dass nichts in das snippet IE-freundlich. In Wirklichkeit, der einzige Grund, warum das code-snippet ist nicht replizierbar im IE, da IE nicht unterstützt die automatische Anpassung von keyword-und auto-Platzierung.

min-Inhalt und max-Inhalt sind beide 100% IE-freundlich

IE hat die volle native Unterstützung sowohl für den min-Inhalt und max-Inhalt Werte.

min-content ist ein Stichwort Wert, verkleinern der Spalte/Zeile nach unten, um die minimal mögliche Breite, dass der Inhalt verkleinern. Wenn auf eine Spalte angewendet, dies bedeutet im wesentlichen, dass die Spalte die Breite des längsten Wortes.

Finden Sie die Pen-min-content-demo von Daniel Tonon (@daniel-tonon) auf CodePen.

max-Inhalt, auf der anderen Seite, wachsen wird die Spalte/Zeile bis zu der maximal möglichen Breite, die seinen Inhalt aufnimmt, und nicht weiter. Wenn Sie jemals white-space: nowrap auf einem großen Abschnitt der text, dieser erscheint sehr ähnlich.

Finden Sie die Stift-max-Inhalt-demo von Daniel Tonon (@daniel-tonon) auf CodePen.

Ich hatte nicht erwartet, D. H. zu unterstützen, diese Werte vor allem, weil der Grund, warum man unter minmax(). Ich war freudig überrascht, als ich war sich als falsch erwiesen, während die Erforschung IE11 grid unterstützen. In Kombination mit minmax(), gibt es nicht viele Netze, dass Sie einen modernen browser machen kann, dass der IE nicht umgehen kann (solange die Netze nicht mit auto-Platzierung).

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

fit-Inhalt() nicht funktioniert nativ im IE. 😢

Zum Glück passen-content() ist eine Art Kurzschrift, syntax, und wenn Sie es schreiben, der lange Weg, der IE unterstützt es! 🎉

Der lange Weg zu schreiben, es ist durch die Anwendung auto (oder genauer gesagt, minmax(min-Inhalt, max-Inhalt)), um die Spalte/Zeile im raster, template, dann die Einstellung max-width: [Wert] auf das child-element.

Hier ist ein Beispiel, wie Sie möglicherweise verwenden Sie die fit-content () – Funktion in einen modernen browser:

/* Dies ist nicht IE-freundlich */
.grid {
display: grid;
grid-template-columns: 100px Passform-Inhalte(300px) 1fr;
}

.Zelle {
grid-column: 2;
}

Was passt-content() ist im Grunde damit sagen will, ist, “stellen Sie in der mittleren Spalte nehmen, bis die maximal mögliche Breite Ihrer Inhalte (d.h. seine max-Inhalt-Wert), bis es erreicht 300px an welcher Stelle, weiß nicht mehr weiter wachsen, es sei denn gezwungen.”

Finden Sie die Pen passen-Inhalt() modernes Beispiel 1 durch Daniel Tonon (@daniel-tonon) auf CodePen.

Wenn Sie dies Lesen auf mobilen, Ansicht dieser Abschnitte Codepen demos im Querformat zum besseren Verständnis.

Um IE Verhalten sich in der gleichen Weise, Sie würde schreiben müssen, wird der code wie folgt:

/* IE-freundlich “fit-Inhalt ()” alternative */
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 100px auto 1fr;
grid-template-columns: 100px auto 1fr;
}

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

Finden Sie die Pen passen-Inhalte IE hack von Daniel Tonon (@daniel-tonon) auf CodePen.

Beachten Sie, dass dies ist nicht ein full-proof-Methode zu replizieren Passform-Inhalte() im IE. Wenn es eine andere grid-Zelle einen Inhalt, der mehr Breite als die max-width-Einstellung der anderen Zelle der raster-Spalte wird wachsen, so dass die größere Zelle. Es wird nicht gespannt werden 300px wie wäre es mit fit-Inhalt().

Finden Sie den Stift Gebrochen Passform-content-hack von Daniel Tonon (@daniel-tonon) auf CodePen.

Vergleichen, die die moderne Passform-Inhalt () – Funktion, die klemmt die ganze Spalte:

Finden Sie die Pen passen-Inhalt() modernes Beispiel von Daniel Tonon (@daniel-tonon) auf CodePen.

Während ich auf das Thema, ich sollte klar bis ein häufiges Missverständnis rund um die Passform-Inhalt () – Funktion selbst. Das Missverständnis ist, dass die Spalte (oder Zeile), auf die es angewendet wird, kann überschreiten Sie niemals den Wert, den Sie der Funktion. Dies ist nicht der Fall. Wenn eine Spalte auf eine Breite von fit-Inhalte(300px) und eine grid-Zelle in dieser Spalte ist festgelegt auf eine Breite von 400px die Spalte Breite 400px, nicht 300px als viele Leute erwarten.

Finden Sie den Stift Gebrochen, modern fit-content von Daniel Tonon (@daniel-tonon) auf CodePen.

IE auto != Moderne auto

Der auto-Wert in IE verhält sich ein wenig anders als auto in modernen Browsern. In IE, auto strikt gleich minmax(min-Inhalt, max-Inhalt). Eine Spalte oder Zeile auf auto eingestellt im IE kann nie schrumpfen, kleiner werden kann als min-content. Es kann auch nie wachsen, jeder größer als max-Inhalt.

Moderne durchsucht behandeln den Wert auto ein bisschen anders. Für die meisten Teil, wenn der Wert verwendet, auf seine eigene, Sie noch zu behandeln-auto wie minmax(min-Inhalt, max-Inhalt). Es gibt einen kleinen, aber entscheidenden Unterschied: automatisch in moderne Browser in der Lage ist, gedehnt zu werden, die durch das align-content und rechtfertigen-content-Eigenschaften. IE nicht zulassen, dass.

Wenn auto verwendet wird, für die Größenanpassung von Spalten in einem modernen browser, auto verhält sich mehr wie 1fr, wenn gibt es nicht genügend Inhalt, die Spalte zu füllen. IE nicht. IE wird immer verkleinern Sie die Spalte nach unten, um die Größe des max-Inhalt.

Also, wenn Sie diesen code definieren Sie in Ihrem raster:

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

Sie werden am Ende mit dieser in modernen Browsern:

Moderne browser automatisch die Breite der Spalten mit wenig Inhalt. Spalten das raster ausfüllen.

…und das ganze im IE aus:

IE automatische Breite Spalten mit wenig Inhalt. Spalten verkleinern, um den Inhalt.

Ok, das moderne browser-man sieht aus wie eine Menge, was wir bekommen, wenn wir 1fr. Können wir mit Hilfe des minmax(min-content, 1fr) für den IE dann? Wird, ziehen Sie es aus, wie es in modernen Browsern wird es nicht?

Ja, aber dann laufen wir in dieser Ausgabe:

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

Moderne Browser:

Moderne browser die automatische Spaltenbreite mit viel Inhalt in eine Zelle. Die Spalten sind unterschiedlich breit.

DH:

IE minmax(min-content, 1fr) Spalten mit viel Inhalt in eine Zelle. Spalten sind gleich breit sind.

FYI, minmax(min-content, 1fr) ist im wesentlichen 1fr und 1fr und nicht gleich auto. Ich habe auch versucht minmax(min-Inhalt, 100%) im IE aber das führte zu der gleichen auf der Suche Netz mit 1fr. So weit wie ich kann sagen, es ist nicht möglich zu replizieren, die moderne browser-auto-Funktionalität im IE.

Es ist ein weiterer wichtiger Unterschied zwischen IE und moderne Versionen der auto Wert obwohl. Da die IE-version von auto explizit gleich minmax(min-Inhalt, max-Inhalt), auto nicht verwendet werden, in minmax () – Ausdrücken. minmax() kann nicht verwendet werden, in einem anderen minmax () – Funktion, damit automatisch disqualifiziert.

Moderne Browser sind ein wenig differenzierter. Sie erkennen, dass auto kann bedeuten, verschiedene Dinge in verschiedenen Kontexten. Wenn verwendet, auf seine eigene, im wesentlichen gleich minmax(min-Inhalt, max-Inhalt), aber mit der zusätzlichen Fähigkeit, sich zu Strecken. Wenn verwendet, als ein max-Wert, auto ist identisch mit max-Gehalt. Bei Verwendung als min-Wert im wesentlichen gleich min-content.

Wenn, jetzt, und Sie schwor, nie mit auto in Ihrer grid-templates immer wieder, möchten Sie vielleicht zu überdenken. Es gibt nur drei Situationen, wo auto anders Verhalten zwischen den modernen Browsern und dem IE. Diese sind:

  1. auto wird in der grid-template-columns ohne fr-Einheit in der gleichen Erklärung.
  2. auto wird in der grid-template-rows ohne fr-Einheit in der gleichen Erklärung und die Höhe der Gitter ist größer als die Höhe der Gitterzellen.
  3. auto ist in einem minmax () – Funktion.

Das ist es! Das sind die einzigen Zeiten, wenn auto verhält sich anders im IE zu, wie verhält es sich in modernen Browsern. auto ist viel einfacher zu schreiben als minmax(min-Inhalt, max-Inhalten), so ist es nicht wirklich Wert, zu verurteilen, es über ein paar kleine browser-Inkonsistenzen, die leicht vermeidbar sind.

Also, was haben wir gelernt?

  • DH hat einen impliziten grid.
  • IE unterstützt repeat-Funktionalität.
  • minmax(), min-Inhalt und max-Inhalt sind alle nativ unterstützt.
  • fit-Inhalt() nicht unterstützt, aber Sie können es umgehen, mit auto und max-width-Einstellungen.
  • D. H. auto ist nicht gleich auto in modernen Browsern.

Nicht die Netze aus nur noch obwohl. Es gibt noch eine Menge Dinge, die Sie wissen müssen, bevor Sie beginnen können sicher Umsetzung der IE-Netze in Ihre Web-Seiten. Stellen Sie sicher, zu bleiben, um für Teil 2! Ich werden zeigen Sie alles, was Sie wissen müssen, um sicher bauen Websites für IE und modernen Browsern nur mit CSS-raster. Am besten von allen, gibt es keine Notwendigkeit mehr für beschissene fallback-layouts!

Artikel-Serie:

  1. Debunking Common IE Grid Missverständnisse (Dieser Beitrag)
  2. CSS-Grid und der neue Autoprefixer (Kommt Bald!)
  3. Faking eine automatische Platzierung raster mit Lücken (Kommt Bald!)

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!