The CSS Podcast – 012: Logische Eigenschaften
Ein sehr gängiges Benutzeroberflächenmuster ist eine Textbeschriftung mit einem unterstützenden Inline-Symbol.
Das Symbol befindet sich links neben
dem Text mit einer kleinen Lücke zwischen den beiden,
bereitgestellt von margin-right
auf dem Symbol.
Es gibt jedoch ein Problem.
da dies nur funktioniert,
wenn die Textrichtung von links nach rechts ist.
Wenn sich die Textrichtung in linksläufig ändert, also z. B. in Sprachen wie Arabisch, wird das Symbol am Text platziert.
Wie wird das im Preisvergleichsportal berücksichtigt? Mit logischen Eigenschaften können Sie solche Situationen beheben. Neben vielen weiteren Vorteilen wird die Internationalisierung durch das Tool kostenlos und automatisch unterstützt. Sie helfen Ihnen, ein widerstandsfähigeres, inklusiveres Frontend zu erstellen.
Terminologie
Die physischen Eigenschaften von oben, rechts, unten und links beziehen sich auf die physischen Abmessungen des Darstellungsbereichs. Sie können sich diese wie eine Kompassrose auf einer Karte vorstellen. Logische Eigenschaften hingegen beziehen sich auf die Ränder einer Box, da sie sich auf den Inhaltsfluss beziehen. Daher können sie sich ändern, wenn sich die Textrichtung oder der Schreibmodus ändert. Das ist ein großer Wandel von Richtungsstile, und gibt uns bei der Gestaltung unserer Benutzeroberflächen viel mehr Flexibilität.
Ablauf blockieren
Der Blockfluss ist die Richtung, in der Inhaltsblöcke platziert werden. Wenn es beispielsweise zwei Absätze gibt, wird der zweite Absatz in den Blockablauf eingefügt. In einem englischen Dokument verläuft der Blockablauf von oben nach unten. Stellen Sie sich dies im Kontext von Textabsätzen vor, die aufeinander folgen, von oben nach unten.
Inline-Ablauf
Der Inline-Ablauf bestimmt den Textfluss in einem Satz.
In einem englischen Dokument ist der Inline-Ablauf von links nach rechts dargestellt.
Wenn Sie die Dokumentsprache Ihrer Webseite in Arabisch (<html lang="ar">
) ändern,
wäre der Inline-Flow von rechts nach links.
Der Text fließt in die vom Schreibmodus des Dokuments vorgegebene Richtung.
Mit der Eigenschaft writing-mode
können Sie die Richtung ändern, in der Text dargestellt wird.
Dies kann auf das gesamte Dokument oder auf einzelne Elemente angewendet werden.
Fluss relativ
Früher haben wir in CSS
konnten wir Eigenschaften wie den Rand nur relativ zur Seitenrichtung anwenden.
Beispielsweise wird margin-top
auf die physische Oberseite des Elements angewendet.
Mit logischen Attributen wird margin-top
zu margin-block-start
.
Das bedeutet, dass unabhängig von Sprache und Textrichtung
Der Blockfluss hat geeignete Randregeln.
Größe
Um zu verhindern, dass ein Element eine bestimmte Breite oder Höhe überschreitet, schreiben Sie eine Regel wie diese:
.my-element {
max-width: 150px;
max-height: 100px;
}
Die flussrelativen Entsprechungen sind max-inline-size
und max-block-size
.
Sie können auch min-block-size
und min-inline-size
anstelle von min-height
und min-width
verwenden.
Bei logischen Attributen würde diese Regel für maximale Breite und Höhe so aussehen:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Start und Ende
Anstatt Richtungen wie oben, rechts, unten und links zu verwenden, „start“ und „end“. Dies gibt Ihnen die Optionen block-start, Inline-end, block-end und inline-start. Damit können Sie CSS-Eigenschaften anwenden, die auf Änderungen des Schreibmodus reagieren.
Um Text rechtsbündig auszurichten, können Sie beispielsweise diesen CSS-Code verwenden:
p {
text-align: right;
}
Wenn Ihr Ziel nicht darin besteht, sich
mit dem physischen Recht abzugleichen,
sondern am Anfang der Leserichtung.
ist das nicht hilfreich.
Bei logischen Werten gibt es hilfreichere start
- und end
-Werte, die der Textrichtung zugeordnet sind.
Die Textausrichtungsregel sieht jetzt so aus:
p {
text-align: end;
}
Abstände und Positionierung
Logische Attribute für margin
, padding
und inset
das Positionieren von Elementen zu erleichtern und zu bestimmen, wie diese Elemente in verschiedenen Schreibmodi miteinander interagieren.
Die Eigenschaften für Rand und Padding sind immer noch direkte Zuordnungen zur Route.
aber der Hauptunterschied besteht darin, dass sie sich mit dem Schreibmodus ändern, wenn sie sich ändern.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Dadurch wird mit padding
vertikal ein Innenraum hinzugefügt und mit margin
von links nach außen geschoben.
Das Attribut top
verschiebt ihn auch nach unten.
Mit Entsprechungen logischer Eigenschaften würde dies stattdessen so aussehen:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Dadurch wird Inline-Bereich mit padding
eingefügt und aus dem Inline-Start mit margin
herausgegeben.
Das Attribut inset-block
verschiebt es vom Blockanfang nach innen.
Das Attribut inset-block
ist nicht die einzige Kurzschreibweise mit logischen Attributen.
Diese Regel kann
noch weiter verdichtet werden,
Kurzversionen der Eigenschaften
margin und Padding.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Rahmen
Das Hinzufügen von border
und border-radius
kann auch über logische Attribute erfolgen.
Um unten und rechts einen Rahmen mit einem Radius auf der rechten Seite hinzuzufügen, können Sie eine Regel wie diese schreiben:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
Oder Sie könnten logische Eigenschaften wie diese verwenden:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
Die end-end
in border-end-end-radius
ist das Blockende und das Inline-Ende.
Einheiten
Logische Attribute bringen zwei neue Einheiten mit sich: vi
und vb
.
Eine vi
-Einheit entspricht 1% der Größe des Darstellungsbereichs in Inline-Richtung.
Das nicht logische Attributäquivalent ist vw
.
Die Einheit vb
entspricht 1% des Darstellungsbereichs in Blockrichtung.
Das nicht logische Attributäquivalent ist vh
.
Diese Einheiten entsprechen immer der Leserichtung.
Wenn ein Element beispielsweise 80% des verfügbaren Inline-Bereichs eines Darstellungsbereichs einnehmen soll,
Wenn Sie die Einheit vi
verwenden, wird die Schriftgröße automatisch von oben nach unten geändert, wenn der Schreibmodus vertikal ist.
Logische Attribute pragmatisch verwenden
Logische Eigenschaften und Schreibmodi dienen nicht nur der Internationalisierung. Damit lässt sich eine vielseitigere Benutzeroberfläche erstellen.
Wenn Sie ein Diagramm mit Beschriftungen auf der X-Achse und der Y-Achse haben, soll der Text auf dem Y-Label vertikal gelesen werden.
Da das Label der Y-Achse in der Demo den writing-mode
vertical-rl
hat,
können Sie für beide Labels dieselben margin
-Werte verwenden.
Der Wert margin-block-start
gilt für beide Labels
da der Anfang des Blocks auf der Y-Achse rechts und auf der X-Achse oben ist.
Die Seiten am Anfang des Blocks sind rot umrandet.
Symbolproblem lösen
Nachdem wir nun logische Eigenschaften behandelt haben, dieses Wissen auf das Designproblem anwenden können, mit dem wir angefangen haben.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Der Rand wurde rechts neben dem Symbolelement angewendet.
Damit der Abstand zwischen Symbol und Text alle Leserichtungen berücksichtigt,
muss stattdessen das Attribut margin-inline-end
verwendet werden.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Unabhängig von der Leserichtung wird sich das Symbol positionieren und dementsprechende Abstände platzieren.
Wissen testen
Ihr Wissen über logische Eigenschaften testen
Wenn du mit deiner Hand schreibst, bewegt sich dein Handgelenk entlang welcher logischen Achse?
inline
block
Alle Elemente auswählen, die von logischen Eigenschaften profitieren können
flex-start
, block-end
und inline-start
block-start
und inline
.inline-size
und max-block-size
.border-end-end-radius
.Welche logische Seite eines Wortes wird unterstrichen?