mitmario.dev

Abschnitt 10 · Lektion 4

Benannte Bereiche

CSS Im Browser 3 Min Lesezeit 3 BeispieleLektion 4 von 9

Elemente über Linien und span zu platzieren liest sich wie eine Rechnung. Es geht auch anders. Du zeichnest das Layout hin und sagst den Kindern nur noch, wo sie hingehören.

Eine Zeichnung in Anführungszeichen

Das Layout als Zeichnung 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* Die Zeichnung steht im Container. Eine Zeile pro
   Rasterzeile, ein Name pro Zelle. Man sieht das
   Layout im Stylesheet, ohne es sich vorzustellen. */
.rezept {
  display: grid;
  grid-template-columns: 1fr 160px;
  grid-template-areas:
    "titel titel"
    "zubereitung zutaten"
    "zubereitung bild";
  gap: 8px;
  padding: 8px;
  background-color: #e4e4e7;
}

/* Am Kind steht nur, wo es hingehört. Keine Linien,
   keine Zahlen. */
.titel {
  grid-area: titel;
}

.zubereitung {
  grid-area: zubereitung;
}

.zutaten {
  grid-area: zutaten;
}

.bild {
  grid-area: bild;
}

.rezept > * {
  padding: 24px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

.zubereitung {
  min-height: 160px;
}

grid-template-areas steht am Container und besteht aus einer Zeichenkette pro Rasterzeile. In jeder steht ein Name pro Zelle.

Am Kind steht dann nur noch grid-area: titel. Linien und Zahlen braucht es dort nicht.

Wiederholt sich ein Name über mehrere Zellen, wird der Bereich entsprechend groß. "titel titel" legt den Titel über beide Spalten. Über mehrere Zeilen hinweg geht das genauso, im Beispiel reicht zubereitung über zwei. Ein Bereich muss dabei nur rechteckig bleiben.

Der Gewinn ist die Lesbarkeit. Wer dein Stylesheet öffnet, sieht das Layout vor sich und muss es sich nicht erst aus Zahlenpaaren zusammensetzen. Für schmale Bildschirme zeichnet man es in einer Media Query einfach neu, ohne ein Kind anzufassen, und das kommt in Abschnitt 12.

Die Spaltenbreiten kommen weiterhin aus grid-template-columns. In der Zeichnung steht nur, wer wo liegt, nicht wie breit die Spuren sind.

Der Punkt

Ein Punkt lässt eine Zelle frei 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* Der Punkt steht für eine leere Zelle. Hier bleibt
   rechts neben dem Inhalt eine Spalte frei, ohne
   dass dafür ein leeres div im Markup steht. */
.seite {
  display: grid;
  grid-template-columns: 1fr 120px;
  grid-template-areas:
    "kopf kopf"
    "inhalt ."
    "fuss fuss";
  gap: 8px;
  padding: 8px;
  background-color: #e4e4e7;
}

header {
  grid-area: kopf;
}

main {
  grid-area: inhalt;
  min-height: 120px;
}

footer {
  grid-area: fuss;
}

header,
main,
footer {
  padding: 24px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

Für eine Zelle, die leer bleiben soll, steht ein Punkt statt eines Namens. Mehrere Punkte hintereinander gehen auch, . . . lässt drei Zellen frei.

Vor Grid hätte man dafür ein leeres div ins Markup gestellt. Ein Element ohne Inhalt und ohne Bedeutung, nur damit das Layout aufgeht. Der Punkt bleibt im Stylesheet, wo er hingehört.

Ungleich lange Zeilen

Eine Zeichnung, die nichts tut 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 8px;
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.seite {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background-color: #e4e4e7;
}

/* Die erste Zeile hat zwei Namen, die zweite drei.
   Damit ist die ganze Deklaration ungültig, und der
   Browser verwirft sie. Keine Meldung, kein Hinweis.
   Es gibt danach keinen einzigen Bereich mehr, an den
   sich ein Kind hängen könnte. */
.kaputt {
  grid-template-areas:
    "kopf kopf"
    "seitenspalte inhalt inhalt";
}

.heil {
  grid-template-areas:
    "kopf kopf"
    "seitenspalte inhalt";
}

/* Beide Raster hängen ihre Kinder an dieselben Namen.
   Im kaputten gibt es diese Bereiche nicht, und alle
   drei landen übereinander in einer neuen Spalte. */
.seite header {
  grid-area: kopf;
}

.seite aside {
  grid-area: seitenspalte;
}

.seite main {
  grid-area: inhalt;
}

header,
aside,
main {
  padding: 24px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

Alle Zeilen der Zeichnung müssen gleich viele Spalten haben. Steht in der einen Zeile zweimal ein Name und in der nächsten dreimal, ist die ganze Deklaration ungültig. Nicht nur die eine Zeile, die ganze Eigenschaft.

Der Browser verwirft eine ungültige Deklaration still, wie in Lektion 1.4. Keine Fehlermeldung, keine Warnung, kein roter Kringel. Das Raster steht da, es hat nur keine Bereiche mehr. Die Kinder finden ihren Namen nicht und landen alle drei übereinander in einer neuen Spalte rechts vom Raster, und du liest die Zeichnung dreimal, ohne den Fehler zu sehen.

Im oberen Kasten des Beispiels liegen deshalb drei blaue Kästen genau aufeinander. Lesen kannst du nur den obersten, inhalt.

Im Reiter „Regeln“ fehlt beim kaputten Kasten eine Zeile. Am unteren, heilen steht unter .heil die Zeile grid-template-areas: "kopf kopf" "seitenspalte inhalt". Am oberen steht unter .kaputt überhaupt keine grid-template-areas-Zeile, obwohl sie im Stylesheet steht. Sie ist schon beim Lesen verworfen worden und kommt gar nicht erst an. Fehlt im Reiter eine Zeile, die im Stylesheet steht, war sie ungültig.

Durchgestrichen und mit Warnsymbol siehst du sie dort allerdings nicht. Dafür müsste der Reiter deinen Rohtext lesen statt der Regeln des Browsers. Die Entwicklerwerkzeuge deines Browsers können das, und in Lektion 16.3 siehst du es dort.

Zwei Angewohnheiten helfen dagegen. Ich schreibe jede Zeile der Zeichnung in eine eigene Codezeile, dann stehen die Namen untereinander, und ein fehlender fällt auf. Und wenn eine Zeichnung gar nichts bewirkt, zähle ich als Erstes die Namen pro Zeile nach, bevor ich anderswo suche.

In der Aufgabe stehen die vier Bereiche des Seitenlayouts noch untereinander.

Zum Mitnehmen

Gezeichnet wird am Container, am Kind steht nur noch der Name seines Bereichs. Hat eine Zeile der Zeichnung mehr oder weniger Namen als die anderen, verwirft der Browser die ganze Eigenschaft.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.