Logische Eigenschaften für Fließverhalten und Positionierung

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.

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.

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.

<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>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}

.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  margin: 10px;
  width: 100px;
  height: 100px;
}

.inner {
  /* direction: rtl; */
  /* writing-mode: vertical-rl; */
}

.physical {
  float: left;
}

.logical {
  float: inline-start;
}

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.

<div class="container">
  <div class="inner">
    <div class="physical box"></div>
  </div>
  <div class="inner">
    <div class="logical box"></div>
  </div>
</div>

.container {
  display: flex;
}

.inner {
  width: 200px;
  height: 200px;
  position: relative;
  border: 2px dotted grey;
}

.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  width: 100px;
  height: 100px;
}

.inner {
  writing-mode: horizontal-tb;
}

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

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

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.

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.

<div class="container">
  <div class="inner physical">Aligned text</div>
  <div class="inner logical">Aligned text</div>
</div>

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

.container {
  display: flex;
}

.inner {
  width: 200px;
  border: 2px dotted grey;
  padding: 10px;
}

.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.