Logische Eigenschaften für Floating und Positionierung

Zuordnete Eigenschaften und Werte

Die folgende Tabelle beschreibt die in diesem Leitfaden diskutierten logischen Eigenschaften und Werte sowie deren Zuordnung zu physikalischen Eigenschaften und Werten. Sie gehen von einem horizontalen writing-mode mit einer Richtung von links nach rechts aus.

Zusätzlich zu diesen zugeordneten Eigenschaften gibt es einige zusätzliche Kurzschrift-Eigenschaften, die möglich sind, indem Block- und Inline-Dimensionen adressiert werden. Diese haben keine Zuordnung zu physikalischen Eigenschaften, abgesehen von der inset-Eigenschaft.

Beispiel: 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 die erste Box mit float: left gefloatet und die zweite mit float: inline-start. Wenn Sie direction: rtl auf den .inner-Selektor anwenden, bleibt die nach links gefloatete Box immer links, während das inline-start-Element der direction des Textes folgt. Sie können dies mit writing-mode: vertical-rl kombinieren, um den Unterschied des Block-Layouts in Kombination 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: Einfüge-Eigenschaften für positioniertes Layout

Die CSS-Positionierung ermöglicht es uns im Allgemeinen, ein Element relativ zu seinem enthaltenden Block zu positionieren — wir setzen das Element im Wesentlichen relativ zu seinem normalen Fluss ein. Um ein Element relativ zum Viewport zu positionieren, verwenden Sie die physikalischen Eigenschaften top, right, bottom und left. Wenn Sie möchten, dass die Positionierung mit dem Textfluss in Ihrem Schreibmodus zusammenhängt, 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 Bildschirmabmessungen des Benutzers.

Im untenstehenden Beispiel werden die Eigenschaften inset-block-start und inset-inline-end verwendet, um die blaue Box mit absoluter Positionierung innerhalb des Bereichs mit der grauen gepunkteten Umrandung zu positionieren, die position: relative hat. Ändern Sie die Eigenschaft writing-mode in vertical-rl, oder fügen Sie direction: rtl hinzu, und sehen Sie, wie die in Fluss positionierte Box sich mit der Textrichtung bewegt.

<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 Zwei- und Vier-Wert-Kurzformen

Wie bei anderen Eigenschaften im Modul gibt es Kurzschrift-Eigenschaften, die die Möglichkeit bieten, gleichzeitig zwei oder vier Werte einzustellen.

• inset — setzt alle vier Seiten gleichzeitig 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 in Bezug auf die Textrichtung — anstatt left und right zu verwenden, können Sie start und end verwenden. Im untenstehenden Beispiel wird text-align: right im ersten Block gesetzt und text-align: end im zweiten.

Wenn Sie den Wert von direction auf rtl ändern, werden Sie feststellen, dass die Ausrichtung im ersten Block rechts bleibt, im zweiten jedoch 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 zur Ausrichtung verwendet.