Logische Eigenschaften für Größenanpassung
In diesem Leitfaden erklären wir die flussrelativen Zuordnungen zwischen physikalischen Dimensionseigenschaften und logischen Eigenschaften, die zur Größenanpassung von Elementen auf unseren Seiten verwendet werden.
Wenn Sie die Größe eines Elements angeben, bietet Ihnen das Modul CSS logical properties and values die Möglichkeit, die Größenanpassung in Bezug auf den Textfluss (inline und block) anzugeben, anstatt physikalische Größenangaben zu verwenden, die sich auf die physikalischen Dimensionen von horizontal und vertikal (z.B. links und rechts) beziehen. Während diese flussrelativen Zuordnungen für viele von uns wohl zum Standard werden, kann es in einem Design gut sein, sowohl physikalische als auch logische Größenanpassungen zu verwenden. Möglicherweise möchten Sie, dass sich einige Merkmale stets auf die physikalischen Dimensionen beziehen, unabhängig vom Schreibmodus.
Zuordnungen für Dimensionen
Die folgende Tabelle bietet Zuordnungen zwischen logischen und physikalischen Eigenschaften. Diese Zuordnungen gehen davon aus, dass Sie sich in einem horizontal-tb-Schreibmodus befinden, wie zum Beispiel Englisch oder Arabisch, in welchem Fall width auf inline-size abgebildet wird.
Wenn Sie sich in einem vertikalen Schreibmodus befinden würden, würde inline-size auf height abgebildet werden.
| Logische Eigenschaft | Physikalische Eigenschaft |
|---|---|
inline-size |
width |
block-size |
height |
min-inline-size |
min-width |
min-block-size |
min-height |
max-inline-size |
max-width |
max-block-size |
max-height |
Beispiel für Breite und Höhe
Die logischen Zuordnungen für width und height sind inline-size, was die Länge in der Inline-Dimension einstellt, und block-size, was die Länge in der Block-Dimension einstellt. Bei der Arbeit in Englisch ergibt das Ersetzen von width durch inline-size und height durch block-size dasselbe Layout.
Im folgenden Live-Beispiel ist der writing-mode auf horizontal-tb eingestellt. Ändern Sie ihn zu vertical-rl und Sie werden sehen, dass das erste Beispiel — welches width und height verwendet — in jeder Dimension gleich groß bleibt, obwohl der Text vertikal wird. Das zweite Beispiel — welches inline-size und block-size verwendet — folgt der Textrichtung, als ob der gesamte Block rotiert wurde.
<div class="container">
<div class="physical box">I have a width of 200px and a height of 100px.</div>
<div class="logical box">
I have an inline-size of 200px and a block-size of 100px.
</div>
</div>
.box {
writing-mode: horizontal-tb;
}
.physical {
width: 200px;
height: 100px;
}
.logical {
inline-size: 200px;
block-size: 100px;
}
Beispiel für min-width und min-height
Es gibt auch Zuordnungen für min-width und min-height — diese sind min-inline-size und min-block-size. Diese funktionieren auf die gleiche Weise wie die Eigenschaften inline-size und block-size, jedoch wird eine Mindestgröße statt einer festen Größe festgelegt.
Versuchen Sie, das Beispiel unten zu vertical-rl zu ändern, wie im ersten Beispiel, um den Effekt zu sehen. Im ersten Beispiel verwende ich min-height und im zweiten min-block-size.
<div class="container">
<div class="physical box">
I have a width of 200px and a min-height of 5em.
</div>
<div class="logical box">
I have an inline-size of 200px and a min-block-size of 5em.
</div>
</div>
.box {
writing-mode: horizontal-tb;
}
.physical {
width: 200px;
min-height: 5em;
}
.logical {
inline-size: 200px;
min-block-size: 5em;
}
Beispiel für max-width und max-height
Schließlich können Sie max-inline-size und max-block-size als logische Ersetzungen für max-width und max-height verwenden. Versuchen Sie, mit dem untenstehenden Beispiel auf die gleiche Weise zu experimentieren wie zuvor.
<div class="container">
<div class="physical box">I have a max-width of 200px.</div>
<div class="logical box">I have a max-inline-size of 200px.</div>
</div>
.box {
writing-mode: horizontal-tb;
}
.physical {
max-width: 200px;
}
.logical {
max-inline-size: 200px;
}
Logische Schlüsselwörter zur Größenänderung
Die Eigenschaft resize legt fest, ob ein Element vergrößert werden kann oder nicht, und hat physikalische Werte von horizontal und vertical. Die Eigenschaft resize verfügt auch über logische Schlüsselwortwerte. Die Verwendung von resize: inline erlaubt die Größenänderung in der Inline-Dimension und resize: block erlaubt die Größenänderung in der Block-Dimension.
Der Schlüsselwortwert both für die Resize-Eigenschaft funktioniert unabhängig davon, ob Sie physikalisch oder logisch denken. Er setzt beide Dimensionen gleichzeitig. Versuchen Sie, mit dem untenstehenden Beispiel zu spielen.
<div class="container">
<div class="physical box">
I have a width of 200px and a height of 100px. I can be resized
horizontally.
</div>
<div class="logical box">
I have an inline-size of 200px and a block-size of 100px. I can be resized
in the inline direction.
</div>
</div>
.box {
writing-mode: horizontal-tb;
overflow: scroll;
}
.physical {
width: 200px;
height: 100px;
resize: horizontal;
}
.logical {
inline-size: 200px;
block-size: 100px;
resize: inline;
}