Angenommen, Sie haben ein <blockquote> und das Design erfordert einen dicken Rand auf der linken Seite. Nun, Sie meinen vielleicht nicht unbedingt die *linke* Seite, sondern eigentlich *auf der Seite des Textbeginns*.
Genau dafür sind CSS Logical Properties gedacht, und Hussein Al Hammad hat einen schönen Artikel, der einige Anwendungsfälle beschreibt, einschließlich des von mir erwähnten Blockquote-Beispiels.
Durch die Verwendung von logischen Eigenschaften müssen Sie sich nicht mit der manuellen Erstellung von Selektoren wie [dir="rtl"] herumschlagen oder sich Gedanken über Schreibmodi und ähnliches machen. Die Box-Modell-Elemente (Ränder, Polster, Abstände…) passen sich dort an, wo sie es tun müssen.
Hussein's Blockquote ist ein gutes Einstiegsbeispiel, um all dies zu verstehen.
blockquote {
/* Rather than... */
border-left: 4px solid #aaa;
padding-left: 1.75rem;
/* You'd do... */
border-inline-start: 4px solid #aaa;
padding-inline-start: 1.75rem;
}
Siehe den Pen
Logical properties demo: blockquote von Hussein Al Hammad (@hus_hmd)
auf CodePen.
Die Unterstützung ist ziemlich gut.
Diese Browser-Support-Daten stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 89 | 66 | Nein | 89 | 15 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 15.0-15.1 |
Eine Sache, die mich im Artikel verwirrt hat, ist der Begriff "horizontale Linien". Zuerst stellte ich mir das <hr>-Element vor. Dann stellte ich mir vor, die Richtung des Designs mit logischen Eigenschaften umkehren zu wollen. Normalerweise ist ein <hr> nur eine Linie, daher spielt die horizontale Richtung keine Rolle, aber sagen wir, es ist wie eine *kürzere* Linie am Rand, wo neue Zeilen nach dem Umbruch beginnen.
Wir könnten die kürzere Linie mit Hintergründen zeichnen, die verschiedene Teile des Box-Modells abdecken, und dann logische Eigenschaften verwenden, wo der Innenabstand angewendet wird. Dies ist ein ziemlich einzigartiger Sonderfall, aber es macht Spaß, damit herumzuspielen.
Siehe den Pen
<hr>s, die irgendwie richtungsabhängig sind von Chris Coyier (@chriscoyier)
auf CodePen.
Es wäre noch einfacher, wenn wir logische Verläufe hätten.