Logische Eigenschaften für Floaten und Positionierung

Zuordnete Eigenschaften und Werte

Die folgende Tabelle beschreibt die in diesem Leitfaden besprochenen logischen Eigenschaften und Werte zusammen mit deren Zuordnungen zu physischen Eigenschaften und Werten. Sie gehen von einem horizontalen writing-mode mit einer von links nach rechts gerichteten Richtung aus.

Neben diesen zugeordneten Eigenschaften gibt es einige zusätzliche Kurzform-Eigenschaften, die es ermöglichen, Block- und Inline-Dimensionen anzusprechen. Diese haben keine Zuordnung zu physikalischen Eigenschaften, abgesehen von der inset-Eigenschaft.

Beispiel für Float und Clear

Die physischen Werte, die mit den Eigenschaften float und clear verwendet werden, sind left, right und both. Das CSS-Modul für 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 Kästchen mit float: left gefloatet, und das zweite mit float: inline-start. Wenn Sie direction: rtl auf den .inner-Selektor anwenden, bleibt das links gefloatete Kästchen immer auf der linken Seite, während das inline-start-gefloatete Element der direction des Textes folgt. Sie können dies mit writing-mode: vertical-rl kombinieren, um den Unterschied des Block-Layouts in Verbindung mit 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;
}

Beispiel: Inset-Eigenschaften für positioniertes Layout

Die CSS-Positionierung erlaubt es uns generell, ein Element in einer Weise relativ zu seinem enthaltenden Block zu positionieren – wir setzen das Element im Wesentlichen relativ zu seiner normalen Flussposition ein. Um ein Element relativ zum Viewport zu positionieren, verwenden Sie die physischen Eigenschaften top, right, bottom und left. Wenn Sie möchten, dass sich die Positionierung auf den Fluss des Textes 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 an und beziehen sich auf die Bildschirmdimensionen des Benutzers.

Im folgenden Beispiel werden die Eigenschaften inset-block-start und inset-inline-end verwendet, um das blaue Kästchen mit absoluter Positionierung innerhalb des Bereichs mit der grauen gestrichelten Umrandung zu positionieren, welche position: relative hat. Ändern Sie die writing-mode-Eigenschaft zu vertical-rl oder fügen Sie direction: rtl hinzu und sehen Sie, wie das der Flussrichtung zugeordnete Kästchen mit der Textausrichtung verbleibt.

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

Neue Kurzformen für zwei und vier Werte

Wie bei anderen Eigenschaften im Modul haben wir Kurzform-Eigenschaften, die es ermöglichen, zwei oder vier Werte gleichzeitig zu setzen.

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

Beispiel: Logische Werte für Textausrichtung

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

Wenn Sie den Wert von direction auf rtl ändern, sehen Sie, dass die Ausrichtung beim ersten Block auf der rechten Seite bleibt, aber im zweiten Block zum logischen Ende auf die linke Seite geht.

<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 Sie Box-Ausrichtung verwenden, die Start und Ende anstelle von physischen Richtungen für die Ausrichtung nutzt.