Grundkonzepte der logischen Eigenschaften und Werte

CSS 2.1 und frühere Versionen haben Dinge nach den physischen Dimensionen des Bildschirms bemessen. Daher beschreiben wir Kästen als solche mit einer width und height, positionieren Elemente von top und left, weisen Ränder, Abstände und Auffüllungen zu top, right, bottom, left usw. zu. Das Modul der logischen Eigenschaften und Werte definiert Zuordnungen für diese physikalischen Eigenschaften und Werte zu ihren logischen, oder flussbezogenen, Gegenstücken — z.B. start und end anstelle von left und right/top und bottom.

Diese Zuordnungen sind sehr nützlich für Websites, die in Sprachen mit einem anderen Schreibmodus als das ursprüngliche Layout übersetzt werden. Zum Beispiel, bei einem CSS-Grid-Layout, wenn der Grid-Container eine Breite mit den Eigenschaften align-self und justify-self hat, die zum Ausrichten der Grid-Elemente verwendet werden, da diese Eigenschaften flussbezogen sind, richtet justify-self: start das Element am Anfang der Inline-Dimension aus, und align-self: start tut dasselbe auf der Block-Dimension.

Wenn der Schreibmodus dieser Komponente mit der Eigenschaft writing-mode auf vertical-rl geändert wird, funktioniert die Ausrichtung weiterhin auf die gleiche Weise. Die Inline-Dimension verläuft vertikal und die Block-Dimension horizontal. Das Raster sieht jedoch nicht mehr gleich aus, da die dem Container zugewiesene Breite ein horizontales Maß ist, ein Maß, das an die physische und nicht die logische oder flussbezogene Textausrichtung gebunden ist.

Wenn anstelle der width-Eigenschaft die logische Eigenschaft inline-size verwendet wird, funktioniert die Komponente unabhängig davon, welcher Schreibmodus verwendet wird, auf die gleiche Weise.

Sie können dies im untenstehenden Live-Beispiel ausprobieren. Ändern Sie writing-mode von vertical-rl zu horizontal-tb bei .grid, um zu sehen, wie sich die verschiedenen Eigenschaften auf das Layout auswirken.

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
}

.grid > * {
  border-radius: 5px;
  border: 2px solid rgb(96 139 168 / 0.4);
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.grid :nth-child(1) {
  align-self: start;
}

.grid :nth-child(2) {
  justify-self: end;
}

.grid {
  writing-mode: vertical-rl;
  inline-size: 400px;
}

Wenn Sie mit einer Website in einem anderen Schreibmodus als einem horizontalen, von oben nach unten, arbeiten, oder wenn Sie Schreibmodi aus kreativen Gründen verwenden, ergibt es viel Sinn, sich auf den Fluss des Inhalts zu beziehen.

Ein Schlüsselkonzept bei der Arbeit mit flussbezogenen Eigenschaften und Werten sind die beiden Dimensionen von Block und Inline. CSS-Layoutmethoden wie Flexbox und Grid-Layout verwenden die Konzepte von block und inline anstelle von right und left/top und bottom, wenn sie Elemente ausrichten.

Die inline-Dimension ist die Dimension, entlang der eine Textzeile im verwendeten Schreibmodus verläuft. In einem englischen Dokument, bei dem der Text horizontal von links nach rechts verläuft, oder in einem arabischen Dokument, bei dem der Text horizontal von rechts nach links verläuft, ist die Inline-Dimension horizontal. Wechseln Sie in einen vertikalen Schreibmodus (z.B. ein japanisches Dokument), und die Inline-Dimension ist jetzt vertikal, da Zeilen in diesem Schreibmodus vertikal verlaufen.

Die Block-Dimension ist die andere Dimension und die Richtung, in der Blöcke — wie Absätze — nacheinander angezeigt werden. In Englisch und Arabisch verlaufen diese vertikal, während in einem vertikalen Schreibmodus diese horizontal verlaufen.

Das unten stehende Diagramm zeigt die Inline- und Block-Richtungen in einem horizontalen Schreibmodus:

Dieses Diagramm zeigt Block und Inline in einem vertikalen Schreibmodus:

• Box-Ausrichtung im Grid-Layout
• Box-Ausrichtung im Flex-Layout
• Flusslayout und Schreibmodi
• Verständnis der logischen Eigenschaften und Werte auf Smashing Magazine (2018)