Jetzt, da die plattformübergreifende Unterstützung einen Wendepunkt erreicht, ist es eine gute Zeit, sich logische Eigenschaften und Werte anzusehen. Wenn Sie eine Website in mehreren Sprachen erstellen, sind logische Eigenschaften und Werte unglaublich nützlich. Selbst wenn Sie dies nicht tun, gibt es dennoch einige praktische neue Kurzschreibweisen, die es wert sind, bekannt zu sein.
Zum Beispiel habe ich schon unzählige Male dies geschrieben, um etwas zu zentrieren
.thing {
margin-left: auto;
margin-right: auto;
}Wir könnten es mit margin: 0 auto; in einer Zeile machen, aber dann werden die oberen und unteren Ränder mit einbezogen. Stattdessen können wir nur den linken und rechten Rand mit der logischen Eigenschaft margin-inline auswählen.
Denken Sie an "inline" oder "block"
Die letzte Demo ist ziemlich raffiniert, oder? Die Eigenschaft margin-inline setzt sowohl margin-left als auch margin-right. Ähnlich setzt die Eigenschaft margin-block sowohl margin-top als auch margin-bottom. Und wir sprechen nicht nur von Rändern. Logische Eigenschaften haben ähnliche Kurzschreibweisen, um border und padding zu setzen. Wenn Sie also ein visuelles Design haben, das nur an den Seiten Ränder vorsieht, können Sie einfach border-inline verwenden, anstatt sich mit jeder physischen Richtung einzeln zu befassen.
Wenn wir also weitermachen, wissen wir nun, dass wir es mit Inline- und Blockrichtungen anstelle von physischen Richtungen zu tun haben. Inline behandelt die Richtungen links und rechts, während Block oben und unten verwaltet.
Das heißt, bis sich die Dinge umkehren, wenn sich der Schreibmodus ändert.
Achten Sie auf Richtung und Schreibmodus
Was wir bisher gesehen haben, sind Beispiele für CSS-logische Eigenschaften. Dies sind Versionen von CSS-Eigenschaften, die wir früher wie margin und padding verwendet haben, aber auf eine neue Weise geschrieben, die physische Richtungen (d.h. links, rechts, oben und unten) außer Acht lässt.
CSS wurde mit Blick auf die englische Sprache entwickelt, und Englisch wird von links nach rechts geschrieben und gelesen. Das gilt jedoch nicht für alle Sprachen. Arabisch zum Beispiel wird von rechts nach links gelesen. Deshalb hat HTML ein dir-Attribut.
<html dir="rtl">CSS hat eine entsprechende Eigenschaft (obwohl es empfohlen wird, das HTML-Attribut zu verwenden, falls CSS nicht geladen wird)
.foreign-language { direction: rtl; }
Chinesisch, Japanisch, Koreanisch und Mongolisch können entweder horizontal von links nach rechts oder vertikal von oben nach unten geschrieben werden. Die meisten Websites in diesen Sprachen werden horizontal geschrieben, genau wie im Englischen.
Vergleichsweise ist vertikales Schreiben auf japanischen Websites üblicher. Einige Websites verwenden eine Mischung aus vertikalem und horizontalem Text.
Wenn Chinesisch, Japanisch und Koreanisch vertikal geschrieben werden, beginnen sie oben rechts, während Mongolisch von links nach rechts gelesen wird. Genau deshalb gibt es in CSS die Eigenschaft writing-mode, die die folgenden Werte enthält
horizontal-tb: Dies ist der Standardwert, der die Richtung von links nach rechts für Sprachen wie Englisch oder Französisch und von rechts nach links für Sprachen wie Arabisch festlegt. Dastbsteht für "top-to-bottom" (von oben nach unten).vertical-rl: Dies ändert die Richtung in rechts-nach-links in einer vertikalen Ausrichtung für Sprachen wie Chinesisch, Japanisch und Koreanisch.vertical-lr: Dies wird für vertikale Links-nach-rechts-Sprachen wie Mongolisch verwendet.
CSS-logische Eigenschaften bieten eine Möglichkeit, CSS kontextbezogen zu schreiben. Bei der Verwendung von logischen Eigenschaften hängen Abstände und Layout sowohl vom writing-mode als auch von der Richtung (ob durch CSS oder HTML festgelegt) ab. So ist es möglich, CSS-Stile über verschiedene Sprachen hinweg wiederzuverwenden. BBC News zum Beispiel baut seine Website in über einem Dutzend Sprachen neu auf. Das ist eine bessere Erfahrung, als Benutzer auf automatische Übersetzungen angewiesen sein zu lassen. Es bedeutet auch, dass sie spezifische Inhalte besser auf verschiedene Teile der Welt zuschneiden können. Das visuelle Styling bleibt jedoch in den meisten Regionen gleich.
Betrachten wir das folgende Beispiel, um die Nachteile physischer Eigenschaften zu sehen. Mit der physischen Eigenschaft margin-left (in Rot dargestellt) sieht alles auf Englisch gut aus. Wenn Sie das CSS wiederverwenden, aber den Schreibmodus auf RTL (unten gezeigt) ändern, gibt es keinen Abstand zwischen Text und Symbol und übermäßigen Weißraum links vom Text. Dies können wir vermeiden, indem wir stattdessen eine logische Eigenschaft verwenden.
Was logische Eigenschaften und Werte so nützlich macht, ist, dass sie sich automatisch an den Kontext der Sprache anpassen. In einer Links-nach-Rechts-Sprache wie Englisch setzt margin-inline-start den linken Rand. Für eine Rechts-nach-Links-Sprache wie Arabisch, Urdu oder Hebräisch setzt es den rechten Rand – was das Layoutproblem im obigen Beispiel löst. Das ist rechts-nach-links erledigt. Wenn Sie vertikalen Text haben, passt sich margin-inline-start auch diesem Kontext an und fügt den Rand oben hinzu, wo man bei jeder vertikalen Sprache zu lesen beginnt (deshalb heißt er margin-inline-start – denken Sie einfach daran, in welcher Richtung Sie zu lesen beginnen). Die Richtung von inline ändert sich basierend auf dem writing-mode des Elements. Wenn ein vertikaler writing-mode eingestellt ist, behandelt er die vertikale Richtung oben und unten. Sehen Sie, wie sich die Dinge umkehren können?
Eine vollständige Liste der logischen Eigenschaften und Werte
Es gibt Dutzende von CSS-Eigenschaften, die eine logische alternative Syntax haben. Adrian Roselli hat eine praktische Visualisierung, bei der Sie zwischen den physischen CSS-Eigenschaften, an die wir alle gewöhnt sind, und ihren logischen Gegenstücken umschalten können. Es ist eine schöne Möglichkeit, logische Eigenschaften und die physischen Eigenschaften zu visualisieren, auf die sie abgebildet werden, wenn die Richtung ltr und der writing-mode horizontal-tb sind.
Zerlegen wir all diese noch weiter und bilden jede einzelne physische CSS-Eigenschaft Seite an Seite auf ihren logischen Begleiter ab. Die Tabellen in diesem Artikel zeigen traditionelle physische CSS in der linken Spalte und ihre logischen Entsprechungen (mit einer Links-nach-Rechts-Horizontalabbildung) in der rechten Spalte. Denken Sie jedoch daran, dass der Sinn von logischen Eigenschaften darin besteht, dass sie sich je nach Kontext ändern!
Größenanpassung
In einem horizontalen Schreibmodus setzt inline-size die Breite eines Elements, während block-size die Höhe setzt. In einem vertikalen Schreibmodus ist das Gegenteil der Fall: inline-size setzt die Höhe und block-size setzt die Breite.
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
width | inline-size |
max-width | max-inline-size |
min-width | min-inline-size |
height | block-size |
max-height | max-block-size |
min-height | min-block-size |
Logische Eigenschaften für die Größenanpassung haben gute plattformübergreifende Unterstützung.
Ränder
Alles hier hat solide plattformübergreifende Unterstützung unter modernen Browsern.
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
border-top | border-block-start |
border-bottom | border-block-end |
border-left | border-inline-start |
border-right | border-inline-end |
Hier ist ein Beispiel für die Verwendung von border-inline-start, gezeigt mit Englisch, Arabisch und Chinesisch.
Hier ist ein Beispiel, das border-block-start gepunktet und border-block-end gestrichelt setzt
Es gibt auch logische Eigenschaften, um Farbe, Breite und Stil des Randes einzeln zu setzen
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
border-top-color | border-block-start-color |
border-top-width | border-block-start-width |
border-top-style | border-block-start-style |
Es geht also wieder darum, in Begriffen von "inline" und "block" zu denken, anstatt an physische Richtungen wie left und top. Wir haben auch logische Kurzschreibweisen für Ränder
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
border-top und border-bottom | border-block |
border-left und border-right | border-inline |
Rand
Hier sind alle einzelnen logischen margin-Eigenschaften
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
margin-top | margin-block-start |
margin-bottom | margin-block-end |
margin-left | margin-inline-start |
margin-right | margin-inline-end |
Diese logischen Eigenschaften haben eine umfassende moderne plattformübergreifende Unterstützung, einschließlich Samsung Internet, und werden in Safari seit 12.2 unterstützt.
Und denken Sie daran, wir haben auch die Kurzschreibweisen
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
margin-top und margin-bottom | margin-block |
margin-left und margin-right | margin-inline |
Innenabstand
Der Innenabstand ist dem Rand sehr ähnlich. Ersetzen Sie margin durch padding und Sie haben dieselbe Liste von Eigenschaften.
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
padding-top | padding-block-start |
padding-bottom | padding-block-end |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
padding-top und padding-bottom | padding-block |
padding-left und padding-right | padding-inline |
Genau wie bei den Rändern haben logische Eigenschaften für den Innenabstand eine gute plattformübergreifende Unterstützung.
Positionierung
Müssen Sie die Position eines Elements in eine bestimmte Richtung verschieben? Das können wir auch logisch deklarieren.
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
top | inset-block-start |
bottom | inset-block-end |
left | inset-inline-start |
right | inset-inline-end |
top und bottom | inset-block |
left und right | inset-inline |
In einem horizontalen Schreibmodus (entweder von links nach rechts oder von rechts nach links) entspricht inset-block-start dem Setzen von top, und inset-block-end entspricht dem Setzen von bottom. In einem horizontalen Schreibmodus mit Links-nach-Rechts-Richtung entspricht inset-inline-start left, während inset-inline-end right entspricht, und umgekehrt für Rechts-nach-Links-Sprachen.
Umgekehrt entspricht in einem vertikalen Schreibmodus inset-inline-start top, während inset-inline-end bottom entspricht. Wenn writing-mode auf vertical-rl eingestellt ist, entspricht inset-block-start right und inset-block-end left. Wenn der writing-mode auf vertical-lr eingestellt ist, ist das Gegenteil der Fall, und so entspricht inset-block-start left.
| Logische Eigenschaft | Schreibmodus | Entspricht |
|---|---|---|
inset-block-start | Horizontal LTR | top |
inset-block-start | Horizontal RTL | top |
inset-block-start | Vertikal LTR | left |
inset-block-start | Vertikal RTL | right |
Hier ist ein Beispiel dafür, wie derselbe CSS-Code für absolute Positionierung in jeder der vier verschiedenen Schreibrichtungen aussieht
Logische Eigenschaften für die Positionierung werden in allen modernen Browsern unterstützt, landeten aber erst kürzlich in Safari.
Es gibt auch eine neue Kurzschreibweise, um alle vier Offsets in einer Codezeile festzulegen. Hier ist ein Beispiel, das inset als Kurzschreibweise verwendet, um top, bottom, left und right auf einmal zu setzen, um ein seitenfüllendes Overlay zu erstellen
Ich habe gehört, dass inset fälschlicherweise als logische Eigenschaft bezeichnet wird. Aber ein kurzer Blick in die Entwicklertools zeigt, dass es sich tatsächlich um eine Kurzschreibweise für physische Werte handelt, nicht für logische Eigenschaften
Was es tatsächlich tut, ist, dass es physische Offsets (d.h. links, rechts, oben und unten) definiert und nicht logische (d.h. inline, block, start und end). Offensichtlich ist es egal, wenn Sie denselben Wert für alle vier Seiten setzen wollen, wie im obigen Beispiel.
inset: 10px 20px 5px 8px; /* shorthand for physical properties not logical properties */Textausrichtung
Logische Werte für die Textausrichtung genießen eine hervorragende Browserunterstützung und das schon seit vielen Jahren. Wenn Sie auf Englisch arbeiten, entspricht text-align: start text-align: left, während text-align: end text-align: right entspricht. Wenn Sie das dir-Attribut auf rtl setzen, ändern sie ihre Bedeutung, und text-align: start richtet Text nach rechts aus.
| Physischer Wert | Schreibmodus | Entspricht |
|---|---|---|
start | LTR | left |
start | RTL | right |
end | LTR | right |
end | RTL | left |
Randradius
Bisher haben alle betrachteten Elemente eine ordentliche Browserunterstützung. Es gibt jedoch einige andere logische Eigenschaften, deren Unterstützung noch in Arbeit ist, und der Randradius gehört dazu. Mit anderen Worten, wir können einen anderen border-radius-Wert für verschiedene Ecken eines Elements mit logischen Eigenschaften festlegen, aber die Browserunterstützung ist nicht großartig.
| Physische Eigenschaft | Logische Eigenschaft |
|---|---|
border-top-left-radius | border-start-start-radius |
border-top-right-radius | border-start-end-radius |
border-bottom-left-radius | border-end-start-radius |
border-bottom-right-radius | border-end-end-radius |
Es ist erwähnenswert, dass die Spezifikation keine Kurzschreibweisen wie border-start-radius und border-end-radius enthält. Aber, wie gesagt, wir stecken noch in den Anfängen, also das könnte ein Bereich sein, den man im Auge behalten sollte.
Floats
Flussrelative Werte für logische Floats haben zum Zeitpunkt des Schreibens dieser Zeilen eine schreckliche Browserunterstützung. Nur Firefox unterstützt inline-start und inline-end als float-Werte.
| Physischer Wert | Logischer Wert |
|---|---|
float: left | float: inline-start |
float: right | float: inline-end |
clear: left | clear: inline-start |
clear: right | clear: inline-end |
Andere logische Eigenschaften
Es gibt vorgeschlagene logische Eigenschaften für overflow und resize, aber sie haben derzeit eine horrende Browserunterstützung.
| Physisch | Logisch |
|---|---|
resize: vertical | resize: block |
resize: horizontal | resize: inline |
overflow-y | overflow-block |
overflow-x | overflow-inline |
Tiefer graben
Wir haben untersucht, was es bedeutet, wenn eine Eigenschaft als "logisch" gilt, und dann alle neuen logischen Eigenschaften und Werte ihren physischen Gegenstücken zugeordnet. Das ist großartig! Aber wenn Sie noch tiefer in CSS-logische Eigenschaften und Werte eintauchen möchten, gibt es eine Reihe von Ressourcen, die es wert sind, angeschaut zu werden.
- "RTL Styling 101" (Ahmad Shadeed): Eine großartige Ressource, wenn Sie mit Arabisch oder anderen Rechts-nach-Links-Sprachen zu tun haben. Ahmad behandelt alles, von logischen Eigenschaften bis hin zu Überlegungen bei der Arbeit mit spezifischen Layouttechniken wie Flexbox und Grid.
text-combine-upright(CSS-Tricks): Wenn Sie mit vertikalem Text arbeiten, wussten Sie, dass diese Eigenschaft Text drehen und mehrere Zeichen auf dem Platz eines einzelnen Zeichens zusammenpressen kann? Es ist eine schöne Raffinesse in bestimmten Situationen, in denen einige Zeichen zusammengehen müssen, aber dennoch mit einem vertikalen Schreibmodus fließen.
Wenn Sie einige schöne Beispiele für vertikale Typografie aus dem Web sehen möchten, schauen Sie sich die Web Awards für horizontale und vertikale Schriften an. Dort gibt es viel großartige Arbeit.
Zusammenfassung
Müssen Sie eilig alle physischen Eigenschaften aus Ihrer Codebasis austauschen? Nein. Aber es schadet auch nicht, logische Eigenschaften und Werte in Ihrer Arbeit zu verwenden. Wie wir gesehen haben, ist die Browserunterstützung praktisch vorhanden. Und selbst wenn Sie an einer Website arbeiten, die nur auf Englisch ist, gibt es keinen Grund, sie nicht zu verwenden.
Nun, ich denke, die logischen Eigenschaften sind nicht kurz. Start, block-start, block-end, … Ich frage mich, ob wir den CSS-Dateien mehr Gewicht geben. Für mich sind die Richtungen links, rechts, oben, unten bei border, margin, padding verständlicher als start und end.
Physische Richtungen wie links und rechts sind relativ zum Schreibmodus und verursachen Probleme, wenn sich der Schreibmodus ändert. Das wird im Artikel ziemlich ausführlich behandelt.
Wenn Sie einen gültigen Grund haben, physische Richtungen gegenüber logischen zu bevorzugen, würde ich ihn gerne lesen. (ehrlich)
So sehr ich mich für die Verwendung logischer Eigenschaften einsetze, leider machen physische Richtungen manchmal mehr Sinn, z.B. wenn man sich in einem LTR-Kontext innerhalb eines RTL-Dokuments befindet.
Wenn Sie beispielsweise ein E-Mail-Eingabefeld haben (das, soweit ich weiß, immer LTR sein sollte) und dem Sie
dir="ltr"geben, und daneben ein Symbol anzeigen möchten, wirdpadding-inline-startaufgrund der LTR-Richtung auf der anderen Seite angewendet.Daher wäre etwas wie
.parent:dir(rtl) .child { padding-right: 10px }in diesem Fall sinnvoller.@Ollie Williams
text-align-right sollte text-align: right sein
Die zweite Tabelle unter https://css-tricks.de/css-logical-properties-and-values/#positioning hat ein falsch gesetztes Apostroph.
Danke für den Artikel!
@tommy Offensichtlich. Aufwand und Ertrag. Man erzielt ein besseres Ergebnis, aber man muss dafür arbeiten.
Wenn Sie stylelint verwenden, kann dieses Plugin helfen: https://www.npmjs.com/package/stylelint-use-logical-spec
Ich habe es so eingestellt, dass es mich warnt, wenn eine alternative logische Eigenschaft verfügbar ist.
Auf diese Weise lerne ich, während ich jede neue Eigenschaft begegne, anstatt zu versuchen, mich an alle zu erinnern – was etwas einschüchternd ist.
Nur zur Info, Safari wird bald Unterstützung für logische Eigenschaften für float und clear erhalten.
https://webkit.org/blog/11680/release-notes-for-safari-technology-preview-125/
Guter Artikel! Danke fürs Teilen, und ich werde ihn ins Chinesische übersetzen, damit mehr Leute ihn lesen können.