The CSS Podcast – 012: Logical Properties
Ein sehr gebräuchliches UI-Muster ist ein Textlabel mit einem unterstützenden Inline-Symbol.
Das Symbol befindet sich links neben dem Text mit einer kleinen Lücke zwischen den beiden, die durch margin-right auf dem Symbol bereitgestellt wird.
Es gibt jedoch ein Problem, da dies nur funktioniert, wenn die Textrichtung von links nach rechts ist.
Wenn die Textrichtung von rechts nach links geändert wird – dies ist die Sprache, die in anderen Sprachen wie Arabisch gelesen wird –, steht das Symbol neben dem Text.
Wie wird das im Preisvergleichsportal berücksichtigt? Mit logischen Eigenschaften können Sie diese Situationen beheben. Sie bieten unter anderem kostenlosen, automatischen Support für die Internationalisierung. Sie helfen Ihnen, ein robusteres, inklusiveres Front-End aufzubauen.
Terminologie
Die physischen Eigenschaften von oben, rechts, unten und links beziehen sich auf die physischen Abmessungen des Darstellungsbereichs. Sie können sich das wie eine Kompassrose auf einer Karte vorstellen. Logische Attribute beziehen sich dagegen auf die Ränder eines Felds, wenn sie sich auf den Inhaltsfluss beziehen. Daher können sie sich ändern, wenn sich die Textrichtung oder der Schreibmodus ändert. Das ist eine große Veränderung gegenüber Richtungsstile, die uns viel mehr Flexibilität bei der Gestaltung unserer Oberflächen bietet.
Ablauf blockieren
Der Blockfluss ist die Richtung, in der Inhaltsblöcke platziert werden. Bei zwei Absätzen wird der zweite Absatz eingefügt, in einem englischen Dokument ist der Blockfluss von oben nach unten. Stellen Sie sich dies im Kontext von Textabsätzen vor, die von oben nach unten aufeinander folgen.
Inline-Ablauf
Der Inline-Flow ist der Textfluss in einem Satz.
In einem englischen Dokument ist der Inline-Ablauf von links nach rechts.
Wenn Sie die Dokumentsprache Ihrer Webseite in Arabisch (<html lang="ar">) ändern würden, wäre der Inline-Vorgang von rechts nach links.
Der Text fließt in die vom Schreibmodus des Dokuments festgelegte Richtung.
Mit der Eigenschaft writing-mode kannst du die Textrichtung ändern.
Dies kann auf das gesamte Dokument oder auf einzelne Elemente angewendet werden.
Fluss relativ
Bisher konnten wir in CSS nur Eigenschaften wie die Marge 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 für den Blockablauf unabhängig von Sprache und Textrichtung die entsprechenden Randregeln gelten.
Größen
Um zu verhindern, dass ein Element eine bestimmte Breite oder Höhe überschreitet, erstellen Sie eine Regel wie die folgende:
.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.
Mit logischen Eigenschaften 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
Verwenden Sie anstelle von Richtungen wie oben, rechts, unten und links Start und Ende. Damit stehen Ihnen Block-Start-, Inline-End-, Block-End- und Inline-Start-Anzeigen zur Verfügung. Damit können Sie CSS-Eigenschaften anwenden, die auf Änderungen des Schreibmodus reagieren.
Um Text rechtsbündig auszurichten, können Sie beispielsweise folgenden CSS-Code verwenden:
p {
text-align: right;
}
Wenn das Ziel nicht darin besteht, sich dem physischen Recht anzugleichen, sondern am Anfang der Leserichtung, ist dies nicht hilfreich.
Mit logischen Werten sind start- und end-Werte hilfreicher, die der Textrichtung entsprechen.
Die Regel zur Textausrichtung sieht jetzt so aus:
p {
text-align: end;
}
Abstände und Positionierung
Logische Eigenschaften für margin, padding und inset erleichtern und effizienteren das Positionieren von Elementen und das Bestimmen, wie diese Elemente in den Schreibmodi miteinander interagieren.
Die Eigenschaften in Bezug auf Rand und Auffüllung sind zwar weiterhin direkte Zuordnungen zu Routen, aber der Hauptunterschied besteht darin, dass sie sich bei einer Änderung des Schreibmodus mit ihr ändern.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Dadurch wird mit padding ein Teil des vertikalen Innenraums hinzugefügt und mit margin von links nach außen verschoben.
Das Attribut top verschiebt ihn ebenfalls nach unten.
Mit entsprechenden logischen 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 werden einige Inline-Elemente innerhalb des Raums mit padding hinzugefügt und mit margin aus dem Inline-Start übernommen.
Mit dem Attribut inset-block wird es vom Blockanfang nach innen verschoben.
Das Attribut inset-block ist nicht die einzige Kurzschreiboption mit logischen Attributen.
Diese Regel kann mithilfe von Kurzversionen der Eigenschaften für Rand und Auffüllung weiter verdichtet werden.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Rahmen
border und border-radius können auch mit logischen Attributen hinzugefügt werden.
Um unten und rechts einen Rahmen mit einem Radius rechts hinzuzufügen, könnten 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 verwenden logische Attribute wie diese:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
Der end-end in border-end-end-radius ist das Blockende und das Inline-Ende.
Einheiten
Logische Attribute bringen zwei neue Einheiten mit: 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, wird bei Verwendung der Einheit vi die Größe automatisch von oben nach unten angepasst, wenn der Schreibmodus vertikal ist.
Logische Eigenschaften pragmatisch verwenden
Logische Attribute und Schreibmodi dienen nicht nur der Internationalisierung. Sie können sie verwenden, um eine vielseitigere Benutzeroberfläche zu erstellen.
Wenn Sie ein Diagramm mit Beschriftungen auf der X-Achse und der Y-Achse haben, möchten Sie vielleicht, dass der Text auf dem Y-Label vertikal gelesen wird.
Da das Label der Y-Achse in der Demo für writing-mode den Wert 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 sich der Blockanfang für die Y-Achse auf der rechten Seite und für die X-Achse oben befindet.
Die Seiten des Blockstarts haben einen roten Rahmen, damit Sie sie sehen können.
Problem mit Symbolen lösen
Logische Eigenschaften können jetzt auf das Designproblem angewendet werden, mit dem wir begonnen 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 auf der rechten Seite des Symbolelements angewendet.
Damit der Abstand zwischen Symbol und Text alle Leserichtungen unterstützt, muss stattdessen die Eigenschaft 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;
}
Jetzt wird das Symbol unabhängig von der Leserichtung positioniert und platziert.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über logische Attribute
Wenn du mit deiner Hand schreibst, bewegt sich dein Handgelenk entlang welcher logischen Achse?
inlineblockWählen Sie alle aus, die von logischen Eigenschaften profitieren können
flex-start, block-end und inline-startblock-start und inline.inline-size und max-block-size.border-end-end-radius.Welche logische Seite eines Wortes wird unterstrichen?