Zusammenfassung

  • Der erste öffentliche Grid-Layout-Entwurf des W3C vom April 2011 nannte Tabellen, JavaScript und sorgfältig vermessene Floats als brüchige Hilfen für komplexe Webanwendungen.
  • Der Candidate-Recommendation-Text vom Dezember 2017 beschrieb Grid-Container, Tracks, Linien, benannte Flächen, flexible Größen und automatische Platzierung; die Inhaltsstruktur blieb Aufgabe des HTML.

Der Esstisch hatte genug. Erst sollte er Daten ordentlich in Reihen halten. Bald stapelten sich darauf Kopfzeile, Navigation, Artikel, Karten und Fußbereich. Floats wurden als Stützen untergeschoben, JavaScript kam mit dem Zollstock. Wurde das Browserfenster schmaler, wackelte das Ganze wie ein Regal auf ungleichen Beinen.

Der erste öffentliche Grid-Layout-Arbeitsentwurf des W3C vom 7. April 2011 beschrieb diese Werkstatt. Webanwendungen verlangten komplexe Bereiche; Autoren verwendeten Tabellen, Skripte und genau berechnete schwebende Elemente. Änderungen des verfügbaren Raums machten solche Konstruktionen anfällig. Eine feste Breite beseitigte das Zittern auf einem Bildschirm und schuf auf einem anderen leere Flächen oder Gedränge.

Der Entwurf bot ein räumliches Raster aus Zeilen und Spalten an. Elemente ließen sich an Linien oder Zellen dieses Rasters ausrichten. Der Unterschied zur Datentabelle war wesentlich: Tabellenzellen geben dem Inhalt eine Beziehung; Grid-Linien bestimmen, wo vorhandene Inhalte zu sehen sind. Eine Seitenleiste kann neben einer Reportage stehen, ohne die Reportage zu einer Tabellenzelle zu erklären.

Im frühen Plan waren die Namen noch im Bau. Beispiele von 2011 verwendeten grid-columns und grid-rows; die spätere CSS-Syntax sieht anders aus. Ein erster Bauentwurf lässt sich nicht bedenkenlos als aktuelle Anleitung abschreiben. Bestand hatte die Idee, Tracks, Grenzen, Positionen und veränderliche Maße zu beschreiben, damit der Browser den vorhandenen Platz ausnutzt.

Die W3C Candidate Recommendation vom 14. Dezember 2017 erläutert den Grid-Container und seine Elemente genauer. Autoren legen horizontale und vertikale Tracks fest, benennen Linien oder Flächen und platzieren wichtige Teile ausdrücklich. Andere werden automatisch gesetzt. Tracks können feste oder flexible Größen haben; fr teilt freien Raum unter flexiblen Tracks auf. Der Plan ersetzt Koordinaten, die nur auf einem einzigen Bildschirmmaß stimmen.

Die automatische Platzierung macht wachsende Kartensammlungen erträglich. Eine weitere Karte kann nach festgelegter Flussrichtung den nächsten passenden Platz einnehmen, während der Browser bei Bedarf implizite Tracks erzeugt. Der Autor bestimmt die Sitzordnung; der Browser führt die Gäste zu den freien Plätzen. Karte dreizehn braucht keinen nächtlichen Umbau.

Grid arbeitet in zwei Dimensionen. Eine Kopfzeile überspannt Spalten, die Navigation belegt einen Track, darunter richten sich Tafeln in mehreren Reihen aus. Andere Layoutwerkzeuge bedienen andere Bewegungsrichtungen. Hier geht es um den Grundriss einer Seite. Der Tisch darf zurück ins Esszimmer.

Räume auf dem Bildschirm zu verschieben verlangt Aufmerksamkeit für die Lesereihenfolge. CSS kann eine Karte anderswo anzeigen, während die Abfolge im HTML für andere Lese- und Navigationswege bestehen bleibt. Der Text von 2017 behandelt diese Trennung. Wer das Fazit optisch nach oben zieht, hat den Weg der Argumentation im Dokument noch nicht neu geschrieben. Möbel dürfen wandern; der Flur muss begehbar bleiben.

Die W3C-Publikationsgeschichte von CSS Grid Layout Level 1 beginnt mit dem Entwurf von 2011 und führt durch Candidate-Recommendation-Stufen von 2016 und 2017. Die Daten markieren Spezifikationstexte. Darin wird sichtbar, wie aus Behelfskonstruktionen ein beschriebenes System von Containern, Tracks, Positionen und flexiblen Größen wurde.

Leser fragen kaum nach der Zahl der Grid-Linien. Sie bemerken, wenn eine Seitenleiste auf dem Telefon den Artikel verdrängt oder Karten übereinanderfallen. Grid gab dem Verlag einen Plan und dem Browser die Aufgabe, ihn auf dem aktuellen Grundstück auszurechnen. Der Esstisch kann endlich wieder eine Tasse tragen.