Logische Eigenschaften für Fließverhalten und Positionierung

Das CSS-Modul für logische Eigenschaften und Werte enthält logische Zuordnungen für die physikalischen Werte von float und clear, sowie für die Positionierungseigenschaften, die bei positioniertem Layout verwendet werden. Dieser Leitfaden zeigt, wie diese verwendet werden können.

Zuordnungen von Eigenschaften und Werten

Die folgende Tabelle zeigt die logischen Eigenschaften und Werte, die in diesem Leitfaden besprochen werden, zusammen mit ihren physikalischen Eigenschaften und Wertzuordnungen. Sie gehen von einem horizontalen writing-mode mit einer Links-nach-Rechts-Richtung aus.

Logische Eigenschaft oder Wert Physikalische Eigenschaft oder Wert
float: inline-start float: left
float: inline-end float: right
clear: inline-start clear: left
clear: inline-end clear: right
inset-inline-start left
inset-inline-end right
inset-block-start top
inset-block-end bottom
text-align: start text-align: left
text-align: end text-align: right

Zusätzlich zu diesen zugeordneten Eigenschaften gibt es einige zusätzliche Kurzschreibweisen, die durch die Möglichkeit entstehen, Block- und Inline-Dimensionen anzusprechen. Diese haben keine Zuordnung zu physikalischen Eigenschaften, abgesehen von der inset-Eigenschaft.

Logische Eigenschaft Zweck
inset-inline Setzt gleichzeitig beide oben genannten Einfügewerte für die Inline-Dimension.
inset-block Setzt gleichzeitig beide oben genannten Einfügewerte für die Block-Dimension.
inset Setzt alle vier Einfügewerte gleichzeitig mit physikalischer Zuordnung mehrerer Werte.

Beispiel für Float und Clear

Die physikalischen Werte, die mit den Eigenschaften float und clear verwendet werden, sind left, right und both. Das Modul für CSS-logische Eigenschaften und Werte definiert die Werte inline-start und inline-end als Zuordnungen für left und right.

Im folgenden Beispiel wird das erste Feld mit float: left gefloatet und das zweite mit float: inline-start. Wenn Sie direction: rtl auf den .inner-Selektor anwenden, bleibt das linksgestapelte Feld immer auf der linken Seite, während das inline-start-gestapelte Element der direction des Textes folgt. Sie können dies mit writing-mode: vertical-rl kombinieren, um den Unterschied im Block-Layout in Kombination mit den direction-Werten zu sehen.

html
<div class="container">
  <div class="inner">
    <div class="physical box"></div>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale.
  </div>
  <div class="inner">
    <div class="logical box"></div>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale.
  </div>
</div>
css
.inner {
  /* direction: rtl; */
  /* writing-mode: vertical-rl; */
}

.physical {
  float: left;
}

.logical {
  float: inline-start;
}

Beispiel: Einfüge-Eigenschaften für positioniertes Layout

Die CSS-Positionierung ermöglicht es uns im Allgemeinen, ein Element relativ zu seinem umgebenden Block zu positionieren – wir setzen im Wesentlichen das Element relativ zu seiner normalen Flussposition ein. Um ein Element relativ zum Ansichtsfenster zu positionieren, verwenden Sie die physikalischen Eigenschaften top, right, bottom und left. Wenn Sie möchten, dass sich die Positionierung auf den Textfluss in Ihrem Schreibmodus bezieht, verwenden Sie stattdessen inset-block-start, inset-block-end, inset-inline-start und inset-inline-end.

Diese Eigenschaften nehmen eine Länge oder einen Prozentsatz als Wert und beziehen sich auf die Bildschirmabmessungen des Benutzers.

Im untenstehenden Beispiel werden die Eigenschaften inset-block-start und inset-inline-end verwendet, um das blaue Feld mit absoluter Positionierung innerhalb des Bereichs mit der grau gepunkteten Grenze zu positionieren, der position: relative hat. Ändern Sie die writing-mode-Eigenschaft auf vertical-rl oder fügen Sie direction: rtl hinzu und sehen Sie, wie das flussnahe Feld mit der Textausrichtung bleibt.

html
<div class="container">
  <div class="inner">
    <div class="physical box"></div>
  </div>
  <div class="inner">
    <div class="logical box"></div>
  </div>
</div>
css
.inner {
  writing-mode: horizontal-tb;
}

.physical {
  position: absolute;
  top: 20px;
  right: 0;
}

.logical {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 0;
}

Neue Kurzschreibweisen für zwei und vier Werte

Wie bei anderen Eigenschaften im Modul haben wir Kurzschreibweisen, die es ermöglichen, zwei oder vier Werte auf einmal zu setzen.

  • inset — setzt alle vier Seiten zusammen mit physikalischer Zuordnung.
  • inset-inline — setzt beide logischen Inline-Einfügungen.
  • inset-block — setzt beide logischen Block-Einfügungen.

Beispiel: Logische Werte für Textausrichtung

Die text-align-Eigenschaft hat logische Werte, die sich auf die Textrichtung beziehen – anstelle von left und right können Sie start und end verwenden. Im untenstehenden Beispiel ist text-align: right im ersten Block eingestellt und text-align: end im zweiten.

Wenn Sie den Wert von direction auf rtl ändern, sehen Sie, dass die Ausrichtung für den ersten Block rechts bleibt, aber im zweiten zum logischen Ende auf der linken Seite wechselt.

html
<div class="container">
  <div class="inner physical">Aligned text</div>
  <div class="inner logical">Aligned text</div>
</div>
css
.inner {
  direction: ltr;
}

.physical {
  text-align: right;
}

.logical {
  text-align: end;
}

Dies funktioniert konsistenter, wenn Box-Ausrichtung verwendet wird, die Start und Ende anstelle von physikalischen Richtungen für die Ausrichtung verwendet.