Firefox 71: Erster Vorreiter mit Subgrid

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Eine großartige Veröffentlichung von Firefox diese Woche! Sehen Sie sich den kompletten Übersichtsbeitrag von Chris Mills an. Ich persönlich freue mich sehr über die Einführung von clip-path: path();, das wir verfolgt haben und das so offensichtlich nützlich ist. Wir erhalten auch column-span: all;, was gut ist, falls Sie einer der wenigen sind, die CSS-Spalten nutzen.

Aber es gibt zwei weitere Dinge, die meiner Meinung nach **sehr wichtig** sind

  1. Wenn Sie flüssige Bilder haben (was die meisten Websites tun) über flexible Container und img { max-width: 100%; }, sind Sie anfällig für etwas ruckelige Ladevorgänge, da diese Bilder geladen werden, weil der Browser die Höhe des zu reservierenden Platzes erst kennt, wenn er die Abmessungen des Bildes kennt. Aber jetzt, wenn Sie Breiten-/Höhenattribute angeben (z.B. <img width="500" height="250" src="...">), berechnet Firefox (und Chrome) das Seitenverhältnis daraus und reserviert den korrekten Platz. Es scheint eine Kleinigkeit zu sein, aber das ist es wirklich nicht. Es wird die wahrgenommene Ladezeit für unzählige Websites verbessern.
  2. Jetzt haben wir Subgrid! Erinnern Sie sich, Eric Meyer nannte sie vor Jahren essentiell. Sie erlauben es Ihnen, ein Element mit den Gitterlinien von Elternelementen zu teilen, anstatt neue erstellen zu müssen. Das Ergebnis könnte weniger Markup-Vereinfachung und sauberere Designs sein. Ein Gitter von "Karten" ist hier ein großartiges Beispiel, das Miriam in diesem Video zeigt, wie Sie eine viel logischere Platzverteilung erzielen können. Es muss in der Luft liegen, denn Anton Ball behandelt dasselbe Konzept in diesem Beitrag. Ich mag, wie dies progressive Verbesserung unterstützt. Sie können für Browser, die Subgrid nicht unterstützen, immer noch Gitterspalten/-zeilen auf einem Element festlegen, aber dann display: subgrid; verwenden, damit diese stattdessen in unterstützenden Browsern Linien erben.

Direkter Link →