Logische Eigenschaften
CSS logische Eigenschaften bieten eine Möglichkeit, Inhalte basierend auf dem Schreibmodus und der Schreibrichtung des Dokuments und nicht auf den physischen Abmessungen des Viewports zu layouten. Dies ermöglicht flexiblere und wartungsfreundlichere Designs, insbesondere für Websites, die mehrere Sprachen unterstützen.
Während physische Eigenschaften wie top, right, padding-bottom und border-bottom-left-radius Positionen und Merkmale basierend auf physischen Richtungen definieren und spezifische Seiten eines Elements referenzieren, verwenden logische Eigenschaften wie inset-block-start, inset-inline-end, padding-block-end und border-end-end-radius logische Richtungs-Schlüsselwörter, die relativ zum Inhaltsfluss entlang der Block- und Inline-Achsen sind.
Blockrichtung
Die Blockachse bezieht sich auf die Achse, die die Stapelreihenfolge von Elementen in einem Blocklayout definiert. Im Wesentlichen ist es die Richtung, entlang derer Blöcke von Inhalten — wie Absätze (<p>), Überschriften und divs (<div>) — auf einer Webseite angeordnet sind. Dies wird auch als Blockrichtung bezeichnet. In Links-nach-Rechts und Links-nach-Rechts-Sprachen ist die Blockrichtung die vertikale Richtung des Inhaltsflusses, die von oben nach unten verläuft.
Die block-start- und block-end-Richtungen repräsentieren den Anfangsrand und den Endrand des Inhalts entlang der Blockachse oder die „von“ und „nach“ Richtungen mit block-start, das dem Äquivalent von top und block-end, das dem Äquivalent von bottom in horizontalen Schreibmodi entspricht.
Inline-Richtung
Die Inline-Achse steht senkrecht zur Blockachse. Die Inline-Achse repräsentiert die Richtung, entlang welcher Inline-Inhalte wie Text in einem Block fließen. Dies wird auch als Inline-Richtung bezeichnet. In Links-nach-Rechts-Schreibmodi wie dem Englischen ist die Inline-Richtung horizontal, von links nach rechts. In Rechts-nach-Links-Sprachen wie Arabisch und Hebräisch ist die Inline-Richtung horizontal, von rechts nach links.
Inline-start und inline-end repräsentieren den Anfangsrand und den Endrand des Inhalts entlang der Inline-Achse, wobei die Werte und Eigenschaften inline-start und inline-end den left- und right-Eigenschaften und -Werten in horizontalen Schreibmodi entsprechen. Welche den right- oder left-Eigenschaften entsprechen, hängt von der Schreibrichtung ab — zum Beispiel ist inline-start left in Links-nach-Rechts-Sprachen und right in Rechts-nach-Links-Sprachen.